/* ============================================================
   Bolão Trocafone 2026 — Design System
   Premium · Mobile-first · Performance-first · 0 dependências
   ============================================================ */

:root {
  /* ====================================================
     Paleta oficial Trocafone (extraída do site real)
     ==================================================== */
  --c-primary:    #FF8800;   /* laranja Trocafone (logo, CTAs, banners)   */
  --c-primary-2:  #E07300;   /* hover/active                              */
  --c-primary-3:  #FFA033;   /* tonal claro                               */
  --c-accent:     #0F3E99;   /* azul deep (CTAs secundários)              */
  --c-accent-2:   #1751C4;   /* azul tonal claro                          */
  --c-field:      #399D25;   /* verde "Super Oferta" Trocafone            */
  --c-field-2:    #2A7A1A;
  --c-fire:       #E63946;   /* alerta / vermelho */
  --c-fire-2:     #C42936;
  --c-ink:        #1F1F1F;   /* fundo dark    */
  --c-ink-2:      #2A2A2A;
  --c-text:       #383939;   /* texto principal Trocafone */
  --c-muted:      #6B6B6B;
  --c-line:       #E3E4E6;
  --c-line-2:     #C9CACB;
  --c-light:      #F4F4F4;   /* background claro Trocafone */
  --c-white:      #FFFFFF;

  /* Tokens por fase do campeonato (usados pelos cards consolidados de pontuação) */
  --c-final:      #E89818;   /* dourado/âmbar — fase final                */
  --c-bracket:    var(--c-final); /* idêntico ao final — bracket / pódio  */
  --c-warn-danger:#C9492E;   /* vermelho discreto — status "sem palpite"  */

  /* Gradientes — laranja vibrante Trocafone */
  --grad-hero:   linear-gradient(135deg, #FF8800 0%, #FF6A00 60%, #E05300 100%);
  --grad-card:   linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0));
  --grad-gold:   linear-gradient(135deg, #FFB400 0%, #FF8800 100%);
  --grad-pitch:  linear-gradient(180deg, #399D25 0%, #2A7A1A 100%);
  --grad-trust:  linear-gradient(135deg, #0F3E99 0%, #1751C4 100%);

  /* Tipografia (Trocafone usa Open Sans) */
  --f-sans:    "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-display: "Open Sans", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Tamanhos */
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-3xl: 36px;
  --fs-4xl: 48px;
  --fs-5xl: 64px;

  /* Espaçamento */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* Sombras */
  --sh-sm:  0 1px 2px rgba(15, 42, 78, 0.08);
  --sh-md:  0 4px 16px rgba(15, 42, 78, 0.10);
  --sh-lg:  0 12px 32px rgba(15, 42, 78, 0.14);
  --sh-xl:  0 20px 56px rgba(15, 42, 78, 0.20);
  --sh-glow: 0 0 0 4px rgba(255, 214, 10, 0.20);

  /* Bordas */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Animação */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);          /* overshooting suave */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);     /* material-style */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* leve bounce */
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 460ms;

  /* Gradientes premium para pódio + bracket */
  --grad-champion: linear-gradient(160deg, #FFFCE6 0%, #FFE9A8 35%, #FFC34F 75%, #E89818 100%);
  --grad-champion-border: linear-gradient(180deg, #FFD56B, #B07810);
  --grad-silver: linear-gradient(160deg, #FBFCFE 0%, #ECEEF3 40%, #C9CFD8 75%, #8E96A2 100%);
  --grad-silver-border: linear-gradient(180deg, #D7DCE3, #828893);
  --grad-bronze: linear-gradient(160deg, #FFF1DF 0%, #F2CB95 40%, #D29759 75%, #8C5419 100%);
  --grad-bronze-border: linear-gradient(180deg, #E9B175, #8C5419);
  --grad-ring-fg: linear-gradient(135deg, #FFB347, #FF7A00);
}

/* ============================================================
   Reset
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: var(--f-sans);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--c-text);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100vh;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
/* Evita zoom automático no iOS quando o usuário foca um input — exige >= 16px */
input, select, textarea { font-size: 16px; }
a { color: var(--c-primary-3); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
a:hover { color: var(--c-primary); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: 4px;
}
hr { border: 0; border-top: 1px solid var(--c-line); margin: var(--s-6) 0; }
ul, ol { padding-left: 1.4em; }

/* Touch targets — mínimo 44x44px (Apple HIG) */
button, [role="button"], .btn, .nav-cta, .nav-link, a.btn {
  min-height: 44px;
}

/* ============================================================
   Tipografia
   ============================================================ */

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--c-text);
}
h1 strong, h2 strong { color: var(--c-primary); font-weight: 800; }
/* No hero (fundo laranja), strong vira amarelo bola pra alto contraste */
.hero h1 strong, .hero h2 strong, .hero p strong { color: #FFE082; font-weight: 800; }
/* No final CTA escuro */
.section-dark h2 strong { color: var(--c-primary); }
h1 { font-size: clamp(1.75rem, 4.5vw + 1rem, 4rem); }
h2 { font-size: clamp(1.35rem, 2.5vw + 1rem, 2.4rem); margin-bottom: var(--s-4); }
h3 { font-size: clamp(1.15rem, 1.4vw + 0.9rem, 1.6rem); margin-bottom: var(--s-3); }
h4 { font-size: var(--fs-lg); margin-bottom: var(--s-2); }
p { margin-bottom: var(--s-3); }
.lead { font-size: var(--fs-base); color: var(--c-muted); line-height: 1.6; }
@media (min-width: 700px) { .lead { font-size: var(--fs-lg); } }
.eyebrow {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-primary);
  margin-bottom: var(--s-3);
}

/* ============================================================
   Layout: container, grid
   ============================================================ */

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--s-4); }
@media (min-width: 700px) { .container { padding: 0 var(--s-5); } }
.container-sm { max-width: 720px; }
.container-md { max-width: 960px; }
.container-lg { max-width: 1280px; }

.section { padding: var(--s-7) 0; }
@media (min-width: 900px) { .section { padding: var(--s-9) 0; } }
.section-sm { padding: var(--s-6) 0; }
@media (min-width: 900px) { .section-sm { padding: var(--s-7) 0; } }
.section-dark { background: var(--c-ink); color: var(--c-white); }
.section-dark h1, .section-dark h2, .section-dark h3 { color: var(--c-white); }
.section-light { background: var(--c-light); }

.grid { display: grid; gap: var(--s-5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.row { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.row-center { justify-content: center; align-items: center; }
.row-between { justify-content: space-between; align-items: center; }
.row-tight { gap: var(--s-2); }

.text-center { text-align: center; }
.text-muted { color: var(--c-muted); }
.text-fire { color: var(--c-fire); }
.text-accent { color: var(--c-accent-2); }

.stack > * + * { margin-top: var(--s-3); }
.stack-lg > * + * { margin-top: var(--s-5); }

/* ============================================================
   Buttons
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 12px 22px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--fs-base);
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-base) var(--ease),
              background var(--dur-base) var(--ease),
              color var(--dur-base) var(--ease);
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: -0.005em;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  isolation: isolate;
}
@media (min-width: 700px) { .btn { padding: 14px 28px; } }
.btn:active { transform: translateY(1px); }
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(255, 136, 0, 0.30), 0 6px 20px rgba(255, 136, 0, 0.20);
}
.btn--primary {
  background: var(--c-primary);
  color: var(--c-white);
  box-shadow: 0 6px 20px rgba(255, 136, 0, 0.30);
}
.btn--primary:hover { background: var(--c-primary-2); color: var(--c-white); box-shadow: 0 10px 28px rgba(255, 136, 0, 0.45); transform: translateY(-2px); }
.btn--primary:active { background: #C66400; box-shadow: 0 4px 12px rgba(255, 136, 0, 0.30); }
.btn--accent {
  background: var(--c-white);
  color: var(--c-primary);
  border-color: var(--c-primary);
  box-shadow: 0 6px 18px rgba(255, 136, 0, 0.18);
}
.btn--accent:hover { background: var(--c-primary); color: var(--c-white); transform: translateY(-2px); }
.btn--accent:active { background: var(--c-primary-2); }
.btn--trust {
  background: var(--c-accent);
  color: var(--c-white);
}
.btn--trust:hover { background: var(--c-accent-2); color: var(--c-white); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(15, 62, 153, 0.30); }
.btn--ghost {
  background: transparent;
  color: var(--c-white);
  border-color: rgba(255,255,255,0.30);
}
.btn--ghost:hover { background: rgba(255,255,255,0.10); border-color: var(--c-white); color: var(--c-white); }
.btn--outline {
  background: transparent;
  color: var(--c-primary);
  border-color: var(--c-primary);
}
.btn--outline:hover { background: var(--c-primary); color: var(--c-white); }
.btn--danger { background: var(--c-fire); color: var(--c-white); }
.btn--danger:hover { background: var(--c-fire-2); color: var(--c-white); transform: translateY(-2px); }
.btn--lg { padding: 18px 36px; font-size: var(--fs-lg); }
.btn--sm { padding: 8px 16px; font-size: var(--fs-sm); }
.btn--block { display: flex; width: 100%; justify-content: center; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* ============================================================
   Forms
   ============================================================ */

.form { display: flex; flex-direction: column; gap: var(--s-4); }
.form-row { display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .form-row { gap: var(--s-4); }
  .form-row.cols-2 { grid-template-columns: 1fr 1fr; }
  .form-row.cols-3 { grid-template-columns: 2fr 1fr 1fr; }
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text);
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--c-line-2);
  border-radius: var(--r-md);
  background: var(--c-white);
  font-size: 16px; /* Evita zoom no iOS */
  min-height: 48px;
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--c-primary-3); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 4px rgba(255, 136, 0, 0.15);
  outline: none;
}
.field .hint { font-size: var(--fs-xs); color: var(--c-muted); }
.field .err  { font-size: var(--fs-xs); color: var(--c-fire); font-weight: 600; }
.field.has-error input, .field.has-error select { border-color: var(--c-fire); }

.checkbox {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.checkbox input[type=checkbox] {
  width: 20px; height: 20px;
  accent-color: var(--c-primary);
  margin-top: 1px;
  flex: 0 0 20px;
}

/* ============================================================
   Header / Navbar — refeito 2026-05-27 (CTA hierarchy v3)
   ----------------------------------------------------------------
   Hierarquia visual:
   - Tier 1 (.nav-cta--primary)  → CTA principal: gradient laranja
     com shadow colorida, letra branca, lift no hover. "Minha área",
     "Palpitar grátis".
   - Tier 2 (.nav-cta--secondary) → CTA secundário: borda laranja,
     fundo transparente, hover suave. "Indicar", "Entrar".
   - Tier 3 (.nav-cta--ghost) → ação terciária: sem borda, cor muted,
     hover sutil. "Sair".
   - .nav-link → links de menu padrão, com underline animado no active.

   Acessibilidade:
   - Min-height 40px desktop / 44px mobile (WCAG AA touch target)
   - Focus-visible outline 2px com offset
   - Reduced motion respeitado
   ============================================================ */

.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--c-line);
}
.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px var(--s-4);
  max-width: 1200px;
  margin: 0 auto;
  gap: var(--s-3);
}
@media (min-width: 700px) { .navbar-inner { padding: var(--s-3) var(--s-5); gap: var(--s-4); } }

/* Brand block */
.brand {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--fs-base);
  color: var(--c-text);
  text-decoration: none;
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
}
.brand img.brand-logo { height: 28px; width: auto; display: block; }
.brand-logo--campaign { height: 32px; width: auto; display: block; max-width: 100%; }
@media (min-width: 700px) { .brand-logo--campaign { height: 38px; } }
.brand-icon { display: inline-flex; align-items: center; justify-content: center; }
.brand-icon svg { display: block; filter: drop-shadow(0 4px 12px rgba(255, 136, 0, 0.30)); }
.brand-wordmark { display: inline-flex; flex-direction: column; line-height: 1; gap: 2px; }
.brand-name {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 16px;
  color: var(--c-text);
  letter-spacing: -0.01em;
}
.brand-year {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 11px;
  color: var(--c-primary);
  letter-spacing: 0.10em;
}
.brand-mark {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: var(--c-primary);
  border-radius: 50%;
  color: var(--c-white);
  font-weight: 800;
  font-size: var(--fs-lg);
  box-shadow: 0 4px 12px rgba(255, 136, 0, 0.30);
}
.brand-divider {
  width: 1px; height: 24px;
  background: var(--c-line-2);
  display: inline-block;
}
.brand-tag {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--c-primary);
  text-transform: uppercase;
}

/* Navegação principal — grupos: menu (links) + cta (botões) */
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  list-style: none; padding: 0;
}
.nav-links__group {
  display: inline-flex;
  align-items: center;
}
.nav-links__group--menu { gap: 2px; }
.nav-links__group--cta  { gap: var(--s-2); margin-left: var(--s-3); padding-left: var(--s-3); border-left: 1px solid var(--c-line); }

/* Link de menu padrão (Como funciona, Prêmios, etc.) */
.nav-link {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--c-text);
  padding: 8px 12px;
  border-radius: var(--r-sm);
  text-decoration: none;
  position: relative;
  letter-spacing: -0.005em;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.nav-link:hover { color: var(--c-primary); background: rgba(255, 136, 0, 0.06); }
.nav-link:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}
.nav-link.active { color: var(--c-primary); }
.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 2px; left: 12px; right: 12px;
  height: 2px;
  background: var(--c-primary);
  border-radius: 2px;
}

/* ============================================================
   .nav-cta — base + 3 tiers
   ============================================================ */
.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  min-height: 40px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: 0.005em;
  border-radius: var(--r-md);
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  background: transparent;
  white-space: nowrap;
  line-height: 1;
  transition:
    transform var(--dur-fast) var(--ease),
    box-shadow var(--dur-base) var(--ease),
    background var(--dur-base) var(--ease),
    border-color var(--dur-base) var(--ease),
    color var(--dur-base) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.nav-cta__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nav-cta__icon svg { display: block; }
.nav-cta:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}
/* Active de página jamais "vaza" pra CTAs (evita barra do .nav-link.active::after) */
.nav-cta.active::after { content: none !important; display: none !important; }

/* Tier 1 — primary (Minha área / Palpitar grátis) */
.nav-cta--primary {
  background: linear-gradient(135deg, var(--c-primary) 0%, #FF7A00 100%);
  color: #fff !important; /* vence cascata global de a:hover */
  border-color: transparent;
  box-shadow:
    0 4px 14px rgba(255, 136, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
.nav-cta--primary:hover {
  background: linear-gradient(135deg, #FF9421 0%, #E07300 100%);
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow:
    0 8px 20px rgba(255, 136, 0, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.nav-cta--primary:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 3px 10px rgba(255, 136, 0, 0.30);
}

/* Tier 2 — secondary (Indicar / Entrar) */
.nav-cta--secondary {
  background: transparent;
  color: var(--c-primary) !important;
  border-color: var(--c-primary);
  box-shadow: none;
}
.nav-cta--secondary .nav-cta__icon { color: var(--c-primary); }
.nav-cta--secondary:hover {
  background: rgba(255, 136, 0, 0.08);
  color: var(--c-primary-2) !important;
  border-color: var(--c-primary-2);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 136, 0, 0.18);
}
.nav-cta--secondary:hover .nav-cta__icon { color: var(--c-primary-2); }
.nav-cta--secondary:active {
  transform: translateY(0) scale(0.98);
}
.nav-cta--secondary.active {
  background: rgba(255, 136, 0, 0.12);
  border-color: var(--c-primary);
}

/* Tier 3 — ghost (Sair) */
.nav-cta--ghost {
  background: transparent;
  color: var(--c-muted) !important;
  border-color: transparent;
  padding: 10px 12px;
  font-weight: 600;
}
.nav-cta--ghost .nav-cta__icon { color: var(--c-muted); opacity: 0.75; }
.nav-cta--ghost:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--c-text) !important;
}
.nav-cta--ghost:hover .nav-cta__icon { color: var(--c-text); opacity: 1; }
.nav-cta--ghost:active {
  transform: scale(0.98);
}

/* Form submit que vira CTA precisa zerar appearance nativo */
.nav-form { display: inline-flex; align-items: center; }
.nav-form button.nav-cta {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-family: var(--f-display);
}

/* Toggle do hamburguer (mobile) */
.nav-toggle {
  display: none;
  background: transparent; border: 0; cursor: pointer;
  padding: 8px;
  min-width: 44px; min-height: 44px;
  align-items: center; justify-content: center;
  border-radius: 8px;
  color: var(--c-text);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav-toggle:hover { background: var(--c-light); }
.nav-toggle:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}
.nav-toggle[aria-expanded="true"] { color: var(--c-primary); background: rgba(255, 136, 0, 0.08); }

/* CTA mobile (sempre visível) + container */
.nav-mobile-actions {
  display: none;
  align-items: center;
  gap: 10px;
}
.nav-cta--mobile {
  padding: 10px 16px;
  font-size: 13px;
  min-height: 44px; /* touch target WCAG no mobile */
}

/* ============================================================
   Responsive — ≤ 900px: drawer mobile
   ============================================================ */
@media (max-width: 900px) {
  .nav-mobile-actions { display: inline-flex; }
  .nav-toggle { display: inline-flex; }
  .nav-cta { min-height: 44px; }

  .nav-links {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--c-white);
    padding: var(--s-3) var(--s-4) var(--s-4);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border-bottom: 1px solid var(--c-line);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
    max-height: calc(100vh - 56px);
    overflow-y: auto;
  }
  .nav-links.open { display: flex; }

  .nav-links__group {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0;
  }
  .nav-links__group--cta {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--c-line);
    padding-top: var(--s-3);
    margin-top: var(--s-3);
    gap: var(--s-2);
  }

  .nav-link {
    padding: 14px 12px;
    border-bottom: 1px solid var(--c-line);
    border-radius: 0;
    min-height: 48px;
    display: flex; align-items: center;
    font-size: var(--fs-base);
    background: transparent;
  }
  .nav-link.active::after { display: none; }
  .nav-link.active { background: rgba(255, 136, 0, 0.06); }

  /* CTAs dentro do drawer: full-width, mais respiro */
  .nav-links .nav-cta {
    justify-content: center;
    padding: 14px 18px;
    min-height: 48px;
    font-size: var(--fs-base);
  }
  .nav-links .nav-cta--primary {
    /* Esconde o CTA primary DENTRO do drawer — o externo (.nav-cta--mobile) já é visível */
    display: none;
  }

  /* Form com botão ghost de Sair, full-width */
  .nav-form { display: flex; }
  .nav-form button.nav-cta { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-cta,
  .nav-cta:hover,
  .nav-cta:active { transform: none !important; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease) !important; }
}

/* ============================================================
   Hero
   ============================================================ */

.hero {
  position: relative;
  overflow: hidden;
  color: var(--c-white);
  background:
    linear-gradient(135deg, rgba(255, 136, 0, 0.85) 0%, rgba(224, 83, 0, 0.92) 100%),
    url('/assets/img/hero-bolao.jpg') center/cover no-repeat;
  padding: var(--s-7) 0;
  text-align: center;
}
@media (min-width: 900px) { .hero { padding: var(--s-9) 0; } }
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(255,214,10,0.20), transparent 30%),
    radial-gradient(circle at 80% 80%, rgba(21,184,111,0.25), transparent 35%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.05), transparent 40%);
  pointer-events: none;
}
.hero::after {
  /* malha sutil de gramado */
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 80px, rgba(255,255,255,0.025) 80px 81px),
    repeating-linear-gradient(0deg, transparent 0 80px, rgba(255,255,255,0.025) 80px 81px);
  pointer-events: none;
  mask-image: linear-gradient(180deg, transparent 0%, black 50%, transparent 100%);
}
.hero > .container { position: relative; z-index: 1; }
.hero h1 {
  color: var(--c-white);
  margin-bottom: var(--s-4);
}
.hero .lead { color: rgba(255,255,255,0.85); margin: 0 auto var(--s-6); max-width: 620px; }
.hero-cta {
  display: flex;
  gap: var(--s-3);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--s-6);
  flex-direction: column;
  align-items: stretch;
}
.hero-cta .btn { width: 100%; }
@media (min-width: 600px) {
  .hero-cta { flex-direction: row; align-items: center; margin-bottom: var(--s-7); }
  .hero-cta .btn { width: auto; }
}
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  justify-content: center;
  margin-top: var(--s-5);
}
@media (min-width: 600px) {
  .hero-stats { display: flex; gap: var(--s-6); flex-wrap: wrap; margin-top: var(--s-6); }
}
.hero-stat { text-align: center; }
.hero-stat .num {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 5vw, 3rem);
  font-weight: 800;
  color: var(--c-white);
  line-height: 1;
}
.hero-stat .lbl {
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.7);
  margin-top: 4px;
  line-height: 1.2;
}
@media (min-width: 700px) { .hero-stat .lbl { font-size: var(--fs-sm); } }

/* Logo "bola" decorativa animada */
.hero-ball {
  position: absolute;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFF 0%, #FFF 18%, #0F2A4E 25%, #0F2A4E 100%);
  opacity: 0.10;
  top: 10%; right: -50px;
  animation: ball-rotate 12s linear infinite;
  display: none;
}
@media (min-width: 900px) { .hero-ball { display: block; } }
@keyframes ball-rotate { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* ============================================================
   Cards
   ============================================================ */

.card {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); }
.card--feature {
  padding: var(--s-6);
}
.card-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--c-light);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: var(--s-4);
  font-size: 28px;
}
.card-icon--primary { background: rgba(15, 42, 78, 0.10); color: var(--c-primary); }
.card-icon--gold { background: rgba(255, 214, 10, 0.20); color: var(--c-accent-2); }
.card-icon--field { background: rgba(21, 184, 111, 0.15); color: var(--c-field-2); }
.card-icon--fire { background: rgba(230, 57, 70, 0.12); color: var(--c-fire); }

/* Card de prêmio
   Hierarquia em 3 níveis (ver bloco "PREMIAÇÃO TOP-10" mais abaixo p/ a grade):
   tier 1 = pódio 1º/2º/3º (medalhas, maior, elevado) ≫ tier 2 = 4º/5º (mais
   sóbrio) > tier 3 = bloco 6º–10º (o mais discreto). Aqui ficam a base + o
   tratamento de medalha do top 3; os níveis 2 e 3 são modulados adiante. */
.prize-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(165deg, var(--c-white) 0%, var(--c-light) 100%);
  border: 1.5px solid var(--c-line);
  border-radius: var(--r-xl);
  padding: var(--s-5);
  text-align: center;
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
@media (min-width: 700px) { .prize-card { padding: var(--s-6); } }
.prize-card:hover { transform: translateY(-6px); box-shadow: var(--sh-xl); }
.prize-card .rank {
  position: absolute;
  top: 14px; left: 14px;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--c-ink);
  font-size: var(--fs-base);
}
@media (min-width: 700px) { .prize-card .rank { width: 48px; height: 48px; font-size: var(--fs-lg); top: 16px; left: 16px; } }

/* — Tier 1: pódio 1º/2º/3º — medalhas, surface tonal e elevação maior — */
.prize-card[data-rank="1"],
.prize-card[data-rank="2"],
.prize-card[data-rank="3"] { box-shadow: var(--sh-lg); }
.prize-card[data-rank="1"] {
  background: var(--grad-champion);
  border-color: #F0C25A;
}
.prize-card[data-rank="2"] {
  background: linear-gradient(165deg, #FBFCFD 0%, #EDF0F4 100%);
  border-color: #D3D8E0;
}
.prize-card[data-rank="3"] {
  background: linear-gradient(165deg, #FFFBF6 0%, #F6E9DA 100%);
  border-color: #E6C9A8;
}
.prize-card[data-rank="1"] .rank { background: var(--grad-gold); color: #5C3C06; }
.prize-card[data-rank="2"] .rank { background: linear-gradient(135deg, #C0C7CF, #8A93A0); color: var(--c-white); }
.prize-card[data-rank="3"] .rank { background: linear-gradient(135deg, #CD7F32, #9C5818); color: var(--c-white); }
.prize-card[data-rank="1"] .prize-name { color: #5C3C06; }
.prize-card[data-rank="2"] .prize-name { color: #3A4250; }
.prize-card[data-rank="3"] .prize-name { color: #8C5419; }
.prize-card[data-rank="1"] .prize-desc { color: #7A5414; }
/* Coroa discreta no campeão */
.prize-card__crown {
  position: absolute; top: 12px; right: 14px;
  color: #E89818; display: inline-flex; line-height: 0;
}
@media (min-width: 700px) { .prize-card__crown { top: 16px; right: 18px; } }

.prize-emoji { font-size: 64px; margin: var(--s-3) 0 var(--s-2); line-height: 1; }
@media (min-width: 700px) { .prize-emoji { font-size: 80px; } }
.prize-name { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-xl); color: var(--c-primary); margin-bottom: 6px; }
.prize-desc { color: var(--c-muted); font-size: var(--fs-sm); }

/* ============================================================
   Steps
   ============================================================ */

.steps { counter-reset: step; display: grid; gap: var(--s-5); }
.step {
  counter-increment: step;
  position: relative;
  padding-left: 68px;
}
.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0; top: 0;
  width: 52px; height: 52px;
  background: var(--grad-hero);
  color: var(--c-white);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--fs-lg);
}
.step h4 { color: var(--c-primary); margin-bottom: 6px; }
.step p { color: var(--c-muted); }

/* ============================================================
   Ranking
   ============================================================ */

/* Wrapper para scroll horizontal só em telas pequenas */
.ranking-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-lg);
  background: var(--c-white);
  box-shadow: var(--sh-sm);
}
.ranking-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--c-white);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  min-width: 480px;
}
.ranking-table th, .ranking-table td {
  padding: 12px var(--s-3);
  text-align: left;
  border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-sm);
}
@media (min-width: 700px) {
  .ranking-table th, .ranking-table td { padding: 14px var(--s-4); font-size: var(--fs-base); }
}
.ranking-table th {
  background: var(--c-light);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-muted);
  font-weight: 700;
}
.ranking-table tbody tr:last-child td { border-bottom: 0; }
.ranking-table tbody tr:hover { background: rgba(15, 42, 78, 0.03); }
.ranking-pos {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--c-light);
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--c-muted);
  font-size: var(--fs-sm);
}
.ranking-pos.gold   { background: var(--grad-gold); color: var(--c-ink); }
.ranking-pos.silver { background: linear-gradient(135deg, #DCE0E6, #A6AFBB); color: var(--c-ink); }
.ranking-pos.bronze { background: linear-gradient(135deg, #CD7F32, #9C5818); color: var(--c-white); }
.ranking-points { font-family: var(--f-display); font-weight: 700; color: var(--c-primary); font-size: var(--fs-lg); }
.ranking-self {
  background: linear-gradient(90deg, rgba(255,136,0,0.20), rgba(255,136,0,0.05)) !important;
  font-weight: 600;
}
.ranking-self td:first-child {
  position: relative;
}
.ranking-self td:first-child::before {
  content: '★';
  position: absolute;
  left: 4px; top: 50%;
  transform: translateY(-50%);
  color: var(--c-primary);
  font-size: 14px;
  z-index: 1;
}

/* ============================================================
   Match / palpite card
   ============================================================ */

.match-card {
  background: var(--c-white);
  border: 1.5px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.match-card:hover { border-color: var(--c-primary); box-shadow: var(--sh-md); }
.match-card.locked { background: var(--c-light); opacity: 0.95; }
.match-card.locked::after {
  content: '🔒 Travado';
  font-size: var(--fs-xs);
  color: var(--c-muted);
  display: block;
  margin-top: 8px;
  text-align: center;
}
.match-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--s-3);
  font-size: var(--fs-xs);
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.match-phase { background: var(--c-primary); color: var(--c-white); padding: 4px 10px; border-radius: var(--r-pill); }
.match-time {}
.match-body {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-3);
}
.team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.team-flag { font-size: 40px; line-height: 1; }
.team-name { font-weight: 700; color: var(--c-primary); text-align: center; font-size: var(--fs-sm); }
.score-input {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--f-display);
}
.score-input input[type=number] {
  width: 48px; height: 48px;
  text-align: center;
  font-size: var(--fs-xl);
  font-weight: 700;
  border: 2px solid var(--c-line-2);
  border-radius: var(--r-md);
  -moz-appearance: textfield;
  -webkit-appearance: none;
  color: var(--c-primary);
  min-height: 48px;
}
@media (min-width: 700px) { .score-input input[type=number] { width: 56px; height: 56px; font-size: var(--fs-2xl); } }
.score-input input[type=number]::-webkit-outer-spin-button,
.score-input input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.score-input input:focus { border-color: var(--c-primary); box-shadow: var(--sh-glow); }
.score-input .sep { color: var(--c-muted); font-size: var(--fs-xl); font-weight: 700; }

/* Probabilidade lúdica */
.odds-bar {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  margin-top: var(--s-3);
  background: var(--c-line);
}
.odds-bar > span {
  display: block;
  transition: width var(--dur-slow) var(--ease);
}
.odds-bar .odds-home { background: var(--c-primary); }
.odds-bar .odds-draw { background: var(--c-muted); }
.odds-bar .odds-away { background: var(--c-fire); }
.odds-legend {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--c-muted);
  margin-top: 4px;
}

.tag-zebra { background: rgba(230, 57, 70, 0.12); color: var(--c-fire); padding: 2px 8px; border-radius: 4px; font-size: var(--fs-xs); font-weight: 700; }
.tag-fav   { background: rgba(15, 42, 78, 0.10); color: var(--c-primary); padding: 2px 8px; border-radius: 4px; font-size: var(--fs-xs); font-weight: 700; }
.tag-balance { background: rgba(255, 214, 10, 0.20); color: #8A6A00; padding: 2px 8px; border-radius: 4px; font-size: var(--fs-xs); font-weight: 700; }

/* ============================================================
   Dashboard cards
   ============================================================ */

.stat-card {
  background: var(--c-white);
  border-radius: var(--r-lg);
  border: 1px solid var(--c-line);
  padding: var(--s-4);
  display: flex; flex-direction: column; gap: 6px;
  transition: transform var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease);
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15, 25, 45, 0.08), 0 2px 6px rgba(15, 25, 45, 0.04);
  border-color: rgba(255, 136, 0, 0.30);
}
@media (min-width: 700px) { .stat-card { padding: var(--s-5); } }
.stat-card .stat-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--c-muted);
  font-weight: 700;
}
.stat-card .stat-value {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--fs-2xl);
  color: var(--c-primary);
  line-height: 1;
}
@media (min-width: 700px) { .stat-card .stat-value { font-size: var(--fs-3xl); } }
.stat-card .stat-delta { font-size: var(--fs-sm); color: var(--c-field-2); font-weight: 600; }

/* ============================================================
   Badges, flash messages, alerts
   ============================================================ */

.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--c-light);
  color: var(--c-muted);
  font-size: var(--fs-xs);
  font-weight: 700;
}
.badge--gold  { background: var(--grad-gold); color: var(--c-ink); }
.badge--fire  { background: var(--c-fire); color: var(--c-white); }
.badge--field { background: var(--grad-pitch); color: var(--c-white); }

.alert {
  padding: 14px 18px;
  border-radius: var(--r-md);
  margin-bottom: var(--s-4);
  border-left: 4px solid;
}
.alert--success { background: rgba(21,184,111,0.10); border-color: var(--c-field-2); color: var(--c-field-2); }
.alert--error   { background: rgba(230,57,70,0.10); border-color: var(--c-fire); color: var(--c-fire-2); }
.alert--info    { background: rgba(15,42,78,0.06); border-color: var(--c-primary); color: var(--c-primary); }
.alert--warn    { background: rgba(255,180,0,0.15); border-color: var(--c-accent-2); color: #8A6A00; }

/* ============================================================
   Footer
   ============================================================ */

.footer {
  background: var(--c-ink);
  color: rgba(255,255,255,0.75);
  padding: var(--s-7) 0 var(--s-5);
  margin-top: var(--s-9);
}
.footer a { color: rgba(255,255,255,0.85); }
.footer a:hover { color: var(--c-accent); }
.footer h5 { color: var(--c-white); margin-bottom: var(--s-3); font-family: var(--f-display); font-size: var(--fs-base); }
.footer-grid { display: grid; gap: var(--s-5); grid-template-columns: 2fr 1fr 1fr 1fr; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  font-size: var(--fs-xs);
  text-align: center;
}
.disclaimer { font-size: var(--fs-xs); color: rgba(255,255,255,0.55); margin-top: var(--s-3); }

/* ============================================================
   Confetti, microinterações
   ============================================================ */

.shake { animation: shake 0.3s var(--ease); }
@keyframes shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-3px); }
  40%, 60% { transform: translateX(3px); }
}

.spin { animation: spin 1s linear infinite; }
@keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

.pulse { animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

.fade-in { animation: fade-in 0.5s var(--ease); }
@keyframes fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ====== Animações globais state-of-the-art ====== */

/* Entrada suave de números/cards "subindo" */
@keyframes counter-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Pulse glow para chamar atenção (badges de pontos, indicadores) */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 136, 0, 0.4); }
  50%      { box-shadow: 0 0 0 8px rgba(255, 136, 0, 0); }
}
.pulse-glow { animation: pulse-glow 1.8s var(--ease-smooth) infinite; }

/* Shimmer (gradient passando por baixo) — usado em loading e destaque */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.shimmer-text {
  background: linear-gradient(90deg,
    var(--c-text) 0%, var(--c-text) 40%,
    var(--c-primary) 50%,
    var(--c-text) 60%, var(--c-text) 100%);
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 3.2s var(--ease-smooth) infinite;
}

/* Pop-in pequeno para badges, pills, ícones aparecendo */
@keyframes pop-in {
  0%   { opacity: 0; transform: scale(0.6); }
  60%  { opacity: 1; transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* Ripple effect (usado em botões pra clique tátil) */
@keyframes ripple {
  to { transform: scale(2.4); opacity: 0; }
}

/* Skeleton loader */
.skeleton {
  background: linear-gradient(90deg, var(--c-line) 0%, var(--c-light) 50%, var(--c-line) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s infinite;
  border-radius: var(--r-sm);
  min-height: 18px;
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Animated counter — fica suave quando o número trocar */
.counter-anim {
  display: inline-block;
  animation: counter-up 0.5s var(--ease) both;
}

/* ============================================================
   Utilidades responsivas
   ============================================================ */

.hide-sm { display: initial; }
.show-sm { display: none; }
@media (max-width: 700px) {
  .hide-sm { display: none; }
  .show-sm { display: initial; }
  .section { padding: var(--s-7) 0; }
  .hero { padding: var(--s-7) 0; }
}

/* ============================================================
   BREAKDOWN CARDS (dashboard + score)
   ------------------------------------------------------------
   Cards consolidados de pontuação por jogo / slot de bracket.
   Compartilhados entre app/Views/user/dashboard.php e .../score.php.
   ============================================================ */

.breakdown-stack { display: flex; flex-direction: column; gap: var(--s-3); }

.breakdown-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  border-top: 3px solid var(--bk-color, var(--c-primary));
  position: relative;
  padding: var(--s-4);
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
  /* Entrada com stagger: cada card calcula seu próprio delay via --card-index */
  animation: breakdown-card-in 0.5s var(--ease) both;
  animation-delay: calc(min(var(--card-index, 0), 10) * 50ms);
}
.breakdown-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15, 25, 45, 0.10), 0 2px 6px rgba(15, 25, 45, 0.06);
}

/* Stagger por posição do filho (até 12 cards na sequência) */
.breakdown-stack > .breakdown-card:nth-child(1)  { --card-index: 0;  }
.breakdown-stack > .breakdown-card:nth-child(2)  { --card-index: 1;  }
.breakdown-stack > .breakdown-card:nth-child(3)  { --card-index: 2;  }
.breakdown-stack > .breakdown-card:nth-child(4)  { --card-index: 3;  }
.breakdown-stack > .breakdown-card:nth-child(5)  { --card-index: 4;  }
.breakdown-stack > .breakdown-card:nth-child(6)  { --card-index: 5;  }
.breakdown-stack > .breakdown-card:nth-child(7)  { --card-index: 6;  }
.breakdown-stack > .breakdown-card:nth-child(8)  { --card-index: 7;  }
.breakdown-stack > .breakdown-card:nth-child(9)  { --card-index: 8;  }
.breakdown-stack > .breakdown-card:nth-child(10) { --card-index: 9;  }
.breakdown-stack > .breakdown-card:nth-child(11) { --card-index: 10; }
.breakdown-stack > .breakdown-card:nth-child(12) { --card-index: 11; }

@keyframes breakdown-card-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Variantes: gradient sutil de fundo por phase_group para reforçar categoria */
.breakdown-card--group    { background: linear-gradient(180deg, rgba(255, 136, 0, 0.04) 0%, transparent 50%); }
.breakdown-card--knockout { background: linear-gradient(180deg, rgba(15, 62, 153, 0.05) 0%, transparent 50%); }
.breakdown-card--final    { background: linear-gradient(180deg, rgba(232, 152, 24, 0.06) 0%, transparent 50%); }
.breakdown-card--bracket  { background: linear-gradient(180deg, rgba(232, 152, 24, 0.06) 0%, transparent 50%); }

.breakdown-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.breakdown-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bk-color, var(--c-primary));
  color: #fff;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.10);
}
.breakdown-card__badge-icon { display: inline-flex; align-items: center; }
.breakdown-card__subtitle {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  font-weight: 500;
  text-align: right;
  flex: 1;
  min-width: 0;
}

/* Matchup row — bandeirinhas + placar central */
.breakdown-card__matchup {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-radius: var(--r-sm);
}
.breakdown-card__team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.breakdown-card__team--home { align-items: flex-start; }
.breakdown-card__team--away { align-items: flex-end; }
.breakdown-card__flag { font-size: 28px; line-height: 1; }
.breakdown-card__teamname {
  font-weight: 700;
  color: var(--c-text);
  font-size: var(--fs-sm);
  text-align: center;
  line-height: 1.2;
}
.breakdown-card__team--home .breakdown-card__teamname { text-align: left; }
.breakdown-card__team--away .breakdown-card__teamname { text-align: right; }
.breakdown-card__scoreboard {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 10px;
  background: rgba(15, 25, 45, 0.04);
  border: 1px solid rgba(15, 25, 45, 0.06);
}
.breakdown-card__score {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--fs-xl);
  color: var(--c-text);
  line-height: 1;
  letter-spacing: -0.02em;
}
.breakdown-card__score--dash { color: var(--c-muted); font-weight: 600; }
.breakdown-card__sep { color: var(--c-muted); font-weight: 700; }
.breakdown-card__pen {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(232, 152, 24, 0.15);
  color: var(--c-final);
  margin-left: 6px;
  vertical-align: middle;
}

.breakdown-card__pred {
  margin: -6px 0 0;
  font-size: var(--fs-sm);
  color: var(--c-muted);
  text-align: center;
}
.breakdown-card__pred strong { color: var(--c-text); font-weight: 700; }
.breakdown-card__pred--missed { color: var(--c-fire); }

/* Variante bracket — ícone grande no lugar de placar */
.breakdown-card__bracket {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.breakdown-card__bracket-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(232, 152, 24, 0.18), rgba(232, 152, 24, 0.04));
  color: var(--c-bracket);
  flex-shrink: 0;
  border: 1px solid rgba(232, 152, 24, 0.25);
}
.breakdown-card__bracket-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.breakdown-card__bracket-sub {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--c-muted);
  font-weight: 500;
}
.breakdown-card__title {
  margin: 0;
  font-size: var(--fs-lg);
  font-family: var(--f-display);
  font-weight: 800;
  color: var(--c-text);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* Lista de regras */
.breakdown-card__rules {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: var(--s-3) 0 0;
  list-style: none;
  border-top: 1px dashed rgba(0, 0, 0, 0.08);
}
.breakdown-rule {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-sm);
  line-height: 1.3;
}
.breakdown-rule__bullet {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-line-2);
  flex-shrink: 0;
}
.breakdown-rule__label {
  color: var(--c-text);
  font-weight: 500;
  min-width: 0;
}
.breakdown-rule__qty {
  color: var(--c-muted);
  font-size: var(--fs-xs);
  font-weight: 500;
  margin-left: 4px;
}
.breakdown-rule__status { display: inline-flex; }

/* Bullets coloridos por status */
.breakdown-rule--won .breakdown-rule__bullet          { background: var(--c-field-2); box-shadow: 0 0 0 3px rgba(57, 157, 37, 0.18); }
.breakdown-rule--missed .breakdown-rule__bullet       { background: var(--c-line-2); }
.breakdown-rule--pending .breakdown-rule__bullet      { background: var(--c-primary); box-shadow: 0 0 0 3px rgba(255, 136, 0, 0.18); }
.breakdown-rule--noprediction .breakdown-rule__bullet { background: var(--c-warn-danger); }
.breakdown-rule--partial .breakdown-rule__bullet      { background: var(--c-final); box-shadow: 0 0 0 3px rgba(232, 152, 24, 0.18); }
.breakdown-rule--na .breakdown-rule__bullet           { background: var(--c-line); }
.breakdown-rule--na .breakdown-rule__label,
.breakdown-rule--na .breakdown-rule__badge            { opacity: 0.55; }

/* Badges de status */
.breakdown-rule__badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.breakdown-rule__badge--won {
  background: linear-gradient(135deg, var(--c-field-2) 0%, var(--c-field) 100%);
  color: #fff;
  box-shadow: 0 3px 8px rgba(57, 157, 37, 0.30);
}
.breakdown-rule__badge--missed {
  background: rgba(0, 0, 0, 0.05);
  color: var(--c-muted);
}
.breakdown-rule__badge--pending {
  background: rgba(255, 136, 0, 0.12);
  color: var(--c-primary);
  border: 1px solid rgba(255, 136, 0, 0.25);
}
.breakdown-rule__badge--noprediction {
  background: rgba(201, 73, 46, 0.10);
  color: var(--c-warn-danger);
  border: 1px solid rgba(201, 73, 46, 0.20);
}
.breakdown-rule__badge--partial {
  background: linear-gradient(135deg, var(--c-final) 0%, #F4A92E 100%);
  color: #fff;
  box-shadow: 0 3px 8px rgba(232, 152, 24, 0.30);
}
.breakdown-rule__badge--na {
  background: transparent;
  color: var(--c-muted);
  font-weight: 600;
  font-size: 10px;
}

/* Footer com progress bar + subtotal */
.breakdown-card__foot {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px dashed rgba(0, 0, 0, 0.08);
}
.breakdown-card__progress {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: rgba(15, 25, 45, 0.06);
  overflow: hidden;
}
.breakdown-card__progress-bar {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--bk-color, var(--c-primary)) 0%, color-mix(in srgb, var(--bk-color, var(--c-primary)) 80%, #fff) 100%);
  border-radius: 999px;
  transition: width var(--dur-base) var(--ease);
}
.breakdown-card__total {
  font-family: var(--f-display);
  font-size: var(--fs-sm);
  color: var(--c-text);
  font-weight: 600;
  white-space: nowrap;
}
.breakdown-card__total strong {
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--bk-color, var(--c-primary));
  letter-spacing: -0.02em;
}

/* Mobile <560px: aperta gap, reduz flags e placar */
@media (max-width: 560px) {
  .breakdown-card__matchup { gap: var(--s-2); }
  .breakdown-card__flag { font-size: 22px; }
  .breakdown-card__scoreboard { padding: 4px 10px; gap: 6px; }
  .breakdown-card__score { font-size: var(--fs-lg); }
}

/* Mobile MUITO estreito (<360px, tipo iPhone SE 1ª gen):
   reduz ainda mais flags + teamnames pra nada vazar do card. */
@media (max-width: 359px) {
  .breakdown-card__matchup { gap: 6px; }
  .breakdown-card__flag { font-size: 18px; }
  .breakdown-card__teamname { font-size: 11px; line-height: 1.15; }
  .breakdown-card__scoreboard { padding: 4px 8px; gap: 5px; }
  .breakdown-card__score { font-size: var(--fs-base); }
  .breakdown-card__sep { font-size: var(--fs-sm); }
  .breakdown-card { padding: var(--s-3); }
}

/* Reduced motion: desliga stagger e transitions desnecessárias */
@media (prefers-reduced-motion: reduce) {
  .breakdown-card { animation: none !important; }
  .breakdown-card,
  .breakdown-card__progress-bar { transition: none !important; }
}

/* ============================================================
   Acessibilidade
   ============================================================ */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   MARKETING POLISH (campaign v2) — agente WebDesign §14.4
   ------------------------------------------------------------
   Tokens extendidos, variants de cupom, animações de campanha,
   trust badges, social proof, push/cart modals, skip-to-content.
   Tudo respeita prefers-reduced-motion no final do arquivo.
   ============================================================ */

:root {
  /* ---- Paleta extendida (campaign v2) ---- */
  --c-urgency-red:    #DC2626;
  --c-success-light:  #10B981;
  --c-premium-gold:   #FFB400;
  --c-premium-gold-2: #E89818;
  --c-elite-purple:   #7C3AED;
  --c-elite-purple-2: #4F46E5;
  --c-neutral-800:    #1F2937;
  --c-trust-blue:     #0EA5E9;

  /* Gradients prontos por tier */
  --grad-flagship:        linear-gradient(135deg, #FFB400 0%, #E89818 50%, #E05300 100%);
  --grad-flagship-soft:   linear-gradient(135deg, #FFF6DC 0%, #FFE7A8 60%, #FFD06B 100%);
  --grad-top100:          linear-gradient(135deg, #7C3AED 0%, #4F46E5 100%);
  --grad-top100-soft:     linear-gradient(135deg, #F3EBFF 0%, #DCD3FF 100%);
  --grad-upgrade:         linear-gradient(135deg, #FF8800 0%, #DC2626 100%);
  --grad-upgrade-soft:    linear-gradient(135deg, #FFE7CF 0%, #FFB199 100%);
  --grad-base:            var(--c-primary);
  --grad-base-soft:       linear-gradient(135deg, #FFF6E8 0%, #FFE0BD 100%);

  /* Glows por tier (usados em hover + selo) */
  --glow-flagship: 0 12px 28px rgba(232, 152, 24, 0.35);
  --glow-top100:   0 12px 28px rgba(124, 58, 237, 0.32);
  --glow-upgrade:  0 12px 28px rgba(220, 38, 38, 0.30);
  --glow-base:     0 12px 28px rgba(255, 136, 0, 0.30);
}

/* ============================================================
   Skip-to-content (WCAG 2.4.1)
   ============================================================ */
.skip-to-content {
  position: absolute;
  top: -42px;
  left: 8px;
  background: var(--c-ink);
  color: var(--c-white);
  padding: 10px 18px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-decoration: none;
  z-index: 9999;
  transition: top var(--dur-base) var(--ease);
}
.skip-to-content:focus,
.skip-to-content:focus-visible {
  top: 8px;
  color: var(--c-white);
  outline: 3px solid var(--c-primary);
  outline-offset: 2px;
}

/* ============================================================
   Tier selo (pílula PREMIUM/ELITE/UPGRADE/BASE)
   ============================================================ */
.tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-family: var(--f-display);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #fff;
  background: var(--c-primary);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.10);
  line-height: 1;
}
.tier-badge svg { width: 12px; height: 12px; }
.tier-badge--flagship      { background: var(--grad-flagship);      box-shadow: var(--glow-flagship); }
.tier-badge--top100        { background: var(--grad-top100);        box-shadow: var(--glow-top100); }
.tier-badge--upgrade_ready { background: var(--grad-upgrade);       box-shadow: var(--glow-upgrade); }
.tier-badge--base          { background: linear-gradient(135deg, var(--c-primary), var(--c-primary-2)); }

/* ============================================================
   Coupon strip — variantes (campaign v2)
   ============================================================
   Polish de #1 da pendência do UI/UX agent.
   Cada variant ganha gradient próprio + selo + glow no selo em hover.
   ============================================================ */
.coupon-strip {
  position: relative;
  transition: filter var(--dur-base) var(--ease);
}
.coupon-strip-inner { position: relative; z-index: 1; }
.coupon-strip-emoji { transition: transform var(--dur-base) var(--ease); }
.coupon-strip:hover .coupon-strip-emoji { transform: scale(1.12) rotate(-6deg); }

/* Variant: BASE (gradient laranja sutil) */
.coupon-strip--base {
  background: linear-gradient(90deg, #FFF8EC 0%, #FFEAC8 50%, #FFF8EC 100%);
  border-top: 1px solid var(--c-primary);
  border-bottom: 1px solid var(--c-primary);
}

/* Variant: FLAGSHIP — ouro premium */
.coupon-strip--flagship {
  background:
    linear-gradient(90deg, rgba(255, 246, 220, 0.95) 0%, rgba(255, 224, 156, 0.95) 50%, rgba(255, 246, 220, 0.95) 100%),
    radial-gradient(ellipse at center, rgba(255, 180, 0, 0.18), transparent 60%);
  border-top: 1px solid #C68A1C;
  border-bottom: 1px solid #C68A1C;
}
.coupon-strip--flagship .coupon-strip-code,
.coupon-strip--flagship .coupon-strip-btn {
  border-color: #C68A1C;
  color: #8A5C00;
}
.coupon-strip--flagship .coupon-strip-cta {
  background: var(--grad-flagship);
  box-shadow: 0 6px 16px rgba(232, 152, 24, 0.30);
}
.coupon-strip--flagship .coupon-strip-cta:hover { filter: brightness(1.05); transform: translateY(-1px); }
.coupon-strip--flagship .coupon-strip-label strong { color: #8A5C00; }

/* Variant: UPGRADE_READY — laranja-fogo (urgência) */
.coupon-strip--upgrade_ready {
  background:
    linear-gradient(90deg, rgba(255, 231, 207, 0.95) 0%, rgba(255, 177, 153, 0.95) 50%, rgba(255, 231, 207, 0.95) 100%);
  border-top: 1px solid #DC2626;
  border-bottom: 1px solid #DC2626;
}
.coupon-strip--upgrade_ready .coupon-strip-code,
.coupon-strip--upgrade_ready .coupon-strip-btn {
  border-color: #DC2626;
  color: #8B1A1A;
}
.coupon-strip--upgrade_ready .coupon-strip-cta {
  background: var(--grad-upgrade);
  box-shadow: 0 6px 16px rgba(220, 38, 38, 0.30);
}
.coupon-strip--upgrade_ready .coupon-strip-cta:hover { filter: brightness(1.05); transform: translateY(-1px); }
.coupon-strip--upgrade_ready .coupon-strip-label strong { color: #8B1A1A; }

/* Variant: TOP100 — roxo elite */
.coupon-strip--top100 {
  background:
    linear-gradient(90deg, rgba(243, 235, 255, 0.95) 0%, rgba(220, 211, 255, 0.95) 50%, rgba(243, 235, 255, 0.95) 100%);
  border-top: 1px solid var(--c-elite-purple);
  border-bottom: 1px solid var(--c-elite-purple);
}
.coupon-strip--top100 .coupon-strip-code,
.coupon-strip--top100 .coupon-strip-btn {
  border-color: var(--c-elite-purple);
  color: var(--c-elite-purple);
}
.coupon-strip--top100 .coupon-strip-cta {
  background: var(--grad-top100);
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.30);
}
.coupon-strip--top100 .coupon-strip-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
.coupon-strip--top100 .coupon-strip-label strong { color: var(--c-elite-purple); }

/* ============================================================
   Coupon expanded block (dashboard) — variantes premium
   ============================================================ */
.dashboard-coupon-block { transition: box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); }
.dashboard-coupon-block:hover { transform: translateY(-2px); }
.dashboard-coupon-block .tier-badge { margin-bottom: 6px; }

.dashboard-coupon-block--base {
  background: var(--grad-base-soft);
  border-color: #FFD89A;
}
.dashboard-coupon-block--base:hover { box-shadow: var(--glow-base); }

.dashboard-coupon-block--flagship {
  background: var(--grad-flagship-soft);
  border-color: #E2B040;
  box-shadow: 0 4px 14px rgba(232, 152, 24, 0.12);
}
.dashboard-coupon-block--flagship:hover { box-shadow: var(--glow-flagship); }
.dashboard-coupon-block--flagship .dashboard-coupon-block__code {
  border-color: #C68A1C;
  color: #8A5C00;
  background: linear-gradient(180deg, #fff, #FFF8E1);
}
.dashboard-coupon-block--flagship .dashboard-coupon-block__h3 strong { color: #8A5C00; }
.dashboard-coupon-block--flagship .dashboard-coupon-block__eyebrow { color: #8A5C00; }
.dashboard-coupon-block--flagship .btn--primary {
  background: var(--grad-flagship);
  box-shadow: 0 6px 16px rgba(232, 152, 24, 0.30);
}

.dashboard-coupon-block--upgrade_ready {
  background: var(--grad-upgrade-soft);
  border-color: #DC2626;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.08);
}
.dashboard-coupon-block--upgrade_ready:hover { box-shadow: var(--glow-upgrade); }
.dashboard-coupon-block--upgrade_ready .dashboard-coupon-block__code {
  border-color: #DC2626;
  color: #8B1A1A;
}
.dashboard-coupon-block--upgrade_ready .dashboard-coupon-block__eyebrow { color: #8B1A1A; }
.dashboard-coupon-block--upgrade_ready .btn--primary {
  background: var(--grad-upgrade);
  box-shadow: 0 6px 16px rgba(220, 38, 38, 0.30);
}

.dashboard-coupon-block--top100 {
  background: var(--grad-top100-soft);
  border-color: var(--c-elite-purple);
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.10);
}
.dashboard-coupon-block--top100:hover { box-shadow: var(--glow-top100); }
.dashboard-coupon-block--top100 .dashboard-coupon-block__code {
  border-color: var(--c-elite-purple);
  color: var(--c-elite-purple);
}
.dashboard-coupon-block--top100 .dashboard-coupon-block__eyebrow { color: var(--c-elite-purple); }
.dashboard-coupon-block--top100 .btn--primary {
  background: var(--grad-top100);
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.30);
}

/* Selo de variant (canto superior direito do bloco grande) */
.dashboard-coupon-block { position: relative; overflow: hidden; }
.dashboard-coupon-block::after {
  /* glow decorativo */
  content: '';
  position: absolute;
  inset: -50% -10% auto auto;
  width: 50%; height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.45), transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.dashboard-coupon-block__inner { position: relative; z-index: 1; }

/* ============================================================
   Trust badges row (home logged-out + footer)
   ============================================================ */
.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  justify-content: center;
  align-items: center;
  margin-top: var(--s-5);
}
.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-pill);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: transform var(--dur-base) var(--ease),
              background var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease);
  opacity: 0;
  transform: translateY(8px);
}
.trust-badge.is-revealed { opacity: 1; transform: translateY(0); }
.trust-badge:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateY(-2px);
}
.trust-badge__icon {
  display: inline-flex;
  width: 22px; height: 22px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--c-premium-gold);
}
.trust-badge--light {
  background: var(--c-white);
  border-color: var(--c-line);
  color: var(--c-text);
}
.trust-badge--light .trust-badge__icon { color: var(--c-primary); }
.trust-badge--light:hover {
  background: var(--c-white);
  border-color: var(--c-primary);
  box-shadow: 0 8px 20px rgba(255, 136, 0, 0.12);
}

/* Stagger reveal — usado pelo IntersectionObserver no JS (.is-revealed) */
.trust-row .trust-badge:nth-child(1) { transition-delay: 0ms; }
.trust-row .trust-badge:nth-child(2) { transition-delay: 80ms; }
.trust-row .trust-badge:nth-child(3) { transition-delay: 160ms; }
.trust-row .trust-badge:nth-child(4) { transition-delay: 240ms; }
.trust-row .trust-badge:nth-child(5) { transition-delay: 320ms; }

/* Footer trust badges com SVGs */
.footer-trust__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-premium-gold);
  flex-shrink: 0;
}
.footer-trust__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  opacity: 0;
  transform: translateY(6px);
}
.footer-trust__item.is-revealed { opacity: 1; transform: translateY(0); }
.footer-trust__item:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.22); }
.footer-trust > li:nth-child(1) { transition-delay: 0ms; }
.footer-trust > li:nth-child(2) { transition-delay: 80ms; }
.footer-trust > li:nth-child(3) { transition-delay: 160ms; }
.footer-trust > li:nth-child(4) { transition-delay: 240ms; }
.footer-trust > li:nth-child(5) { transition-delay: 320ms; }
.footer-trust > li:nth-child(6) { transition-delay: 400ms; }

/* ============================================================
   Social proof counter (live)
   ============================================================ */
.social-proof {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(16, 185, 129, 0.10);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: var(--r-pill);
  color: var(--c-success-light);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: -0.005em;
}
.social-proof--dark {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.social-proof__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--c-success-light);
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45);
  animation: live-dot-pulse 1.8s ease-in-out infinite;
  flex-shrink: 0;
}
.social-proof--dark .social-proof__dot { background: var(--c-success-light); }
.social-proof__num {
  font-family: var(--f-display);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--c-success-light);
  display: inline-block;
  transition: transform var(--dur-base) cubic-bezier(0.22, 1, 0.36, 1);
}
.social-proof--dark .social-proof__num { color: #fff; }
.social-proof__num.is-bumping { animation: counter-bump 0.45s cubic-bezier(0.22, 1, 0.36, 1); }

@keyframes live-dot-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45); }
  70%  { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
@keyframes counter-bump {
  0%   { transform: translateY(0) scale(1); }
  35%  { transform: translateY(-3px) scale(1.08); }
  100% { transform: translateY(0) scale(1); }
}

/* ============================================================
   Recommended products thumbs (dashboard)
   ============================================================ */
.dashboard-reco__grid { gap: var(--s-3); }
.dashboard-reco__card {
  padding: 0;
  overflow: hidden;
  display: flex !important;
  flex-direction: column;
  align-items: stretch !important;
}
.dashboard-reco__thumb {
  position: relative;
  aspect-ratio: 1.4 / 1;
  background:
    radial-gradient(ellipse at center, rgba(255, 136, 0, 0.10), transparent 65%),
    var(--c-light);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.dashboard-reco__thumb img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: var(--s-3);
  transition: transform var(--dur-slow) var(--ease);
}
.dashboard-reco__card:hover .dashboard-reco__thumb img { transform: scale(1.04); }
.dashboard-reco__thumb-fallback {
  font-size: 56px;
  color: var(--c-line-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 4px 8px rgba(255, 136, 0, 0.15));
}
.dashboard-reco__body {
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
@media (max-width: 700px) {
  .dashboard-reco__grid { grid-template-columns: 1fr; gap: var(--s-3); }
}
/* Stagger fade-in dos cards de recomendação */
.dashboard-reco__card {
  animation: reco-fade-in 0.5s var(--ease) both;
  animation-delay: calc(var(--reco-idx, 0) * 80ms);
}
@keyframes reco-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Cadastro progress — shimmer no segmento atual + checkmark pulse
   ============================================================ */
.cadastro-progress__step.is-current .cadastro-progress__bullet {
  animation: cadastro-bullet-pulse 1.8s ease-in-out infinite;
}
@keyframes cadastro-bullet-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255, 136, 0, 0.18); }
  50%      { box-shadow: 0 0 0 8px rgba(255, 136, 0, 0.08); }
}
.cadastro-progress__step.is-done .cadastro-progress__bullet {
  animation: cadastro-check-pop 0.4s var(--ease-bounce) both;
}
@keyframes cadastro-check-pop {
  0%   { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}
/* Shimmer no fill da progress bar */
.cadastro-progress__bar-fill {
  position: relative;
  overflow: hidden;
}
.cadastro-progress__bar-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.45) 50%,
    transparent 100%);
  background-size: 200% 100%;
  animation: progress-shimmer 2.2s linear infinite;
}
@keyframes progress-shimmer {
  0%   { background-position: -150% 0; }
  100% { background-position: 250% 0; }
}

/* ============================================================
   Cart recovery banner — slide-down + countdown animation + cart icon
   ============================================================ */
.cart-recovery {
  animation: cart-slide-down 0.5s var(--ease-bounce);
  background: linear-gradient(90deg, #FFE4BC 0%, #FFD89A 50%, #FFE4BC 100%);
  border-top-color: var(--c-urgency-red);
  border-bottom-color: var(--c-urgency-red);
}
@keyframes cart-slide-down {
  0%   { transform: translateY(-100%); opacity: 0; }
  60%  { transform: translateY(2px); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}
.cart-recovery__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: var(--c-urgency-red);
  width: 32px; height: 32px;
  flex-shrink: 0;
}
.cart-recovery__icon::after {
  content: '';
  position: absolute;
  top: -2px; right: -2px;
  width: 8px; height: 8px;
  background: var(--c-urgency-red);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.6);
  animation: cart-badge-pulse 1.6s ease-in-out infinite;
}
@keyframes cart-badge-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.6); }
  70%  { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }
  100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}
.cart-recovery__countdown {
  font-family: var(--f-mono);
  font-weight: 800;
  color: var(--c-urgency-red);
  font-variant-numeric: tabular-nums;
  display: inline-block;
  min-width: 2.4em;
  text-align: right;
}

/* ============================================================
   Welcome modal — premium variants + confetti light
   ============================================================ */
.welcome-modal {
  /* Slide-up + fade já existem; adicionamos blur de entrada premium */
}
.welcome-modal-card { position: relative; overflow: hidden; }
.welcome-modal-card::before {
  /* Glow decorativo atrás do header */
  content: '';
  position: absolute;
  top: -40%; left: 50%;
  transform: translateX(-50%);
  width: 110%; height: 80%;
  background: radial-gradient(ellipse, rgba(255, 180, 0, 0.18), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.welcome-modal-header,
.welcome-modal-coupon,
.welcome-modal-actions,
.welcome-modal-foot { position: relative; z-index: 1; }

.welcome-modal--flagship .welcome-modal-card {
  border-top: 6px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--grad-flagship) border-box;
}
.welcome-modal--flagship .welcome-modal-card::before {
  background: radial-gradient(ellipse, rgba(255, 180, 0, 0.30), transparent 60%);
}
.welcome-modal--flagship .welcome-modal-emoji { color: #B66E00; }
.welcome-modal--flagship .welcome-modal-coupon code { color: #B66E00; }

.welcome-modal--upgrade_ready .welcome-modal-card {
  border-top: 6px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--grad-upgrade) border-box;
}
.welcome-modal--upgrade_ready .welcome-modal-card::before {
  background: radial-gradient(ellipse, rgba(220, 38, 38, 0.20), transparent 60%);
}

.welcome-modal--generic .welcome-modal-card {
  border-top: 6px solid var(--c-primary);
}

/* Confetti light dentro do welcome modal premium — apenas 6 dots animados */
.welcome-modal--flagship .welcome-modal-card::after,
.welcome-modal--upgrade_ready .welcome-modal-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 12% 18%, var(--c-premium-gold) 2.5px, transparent 3px),
    radial-gradient(circle at 88% 22%, var(--c-elite-purple) 2.5px, transparent 3px),
    radial-gradient(circle at 18% 78%, var(--c-success-light) 2.5px, transparent 3px),
    radial-gradient(circle at 78% 82%, var(--c-urgency-red) 2.5px, transparent 3px),
    radial-gradient(circle at 50% 8%, var(--c-primary) 2.5px, transparent 3px),
    radial-gradient(circle at 50% 95%, var(--c-trust-blue) 2.5px, transparent 3px);
  background-repeat: no-repeat;
  pointer-events: none;
  animation: welcome-dots-float 6s ease-in-out infinite;
  opacity: 0.6;
}
@keyframes welcome-dots-float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-3px) rotate(2deg); }
}

/* ============================================================
   Push opt-in modal — sino animado + slide-up elegant
   ============================================================ */
.push-optin { animation: push-slide-up 0.45s var(--ease-bounce); }
@keyframes push-slide-up {
  0%   { transform: translateY(32px); opacity: 0; }
  60%  { transform: translateY(-2px); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}
.push-optin[hidden] { display: none !important; }
.push-optin__icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 136, 0, 0.15), rgba(255, 136, 0, 0.05));
  color: var(--c-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  position: relative;
}
.push-optin__icon svg { animation: bell-ring 2.4s ease-in-out infinite; transform-origin: 50% 4px; }
@keyframes bell-ring {
  0%, 50%, 100% { transform: rotate(0); }
  6%            { transform: rotate(12deg); }
  12%           { transform: rotate(-10deg); }
  18%           { transform: rotate(8deg); }
  24%           { transform: rotate(-6deg); }
  30%           { transform: rotate(4deg); }
  36%, 42%      { transform: rotate(0); }
}

/* ============================================================
   First prediction referral modal — confetti real (CSS+JS)
   ============================================================ */
.fpr-modal__card { isolation: isolate; }
.fpr-modal__confetti {
  position: relative;
  z-index: 1;
}
.fpr-modal__confetti-piece {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 2px;
  top: 0;
  animation: confetti-fall 1.4s ease-out forwards;
  pointer-events: none;
}

/* Confetti container (overlay leve) */
.confetti-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.confetti-overlay span {
  position: absolute;
  width: 8px; height: 8px;
  top: -20px;
  opacity: 0;
  animation: confetti-fall 1.6s var(--ease) forwards;
}
@keyframes confetti-fall {
  0%   { transform: translate3d(0, -20px, 0) rotate(0); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translate3d(var(--confetti-x, 0), 220px, 0) rotate(720deg); opacity: 0; }
}

/* ============================================================
   Referral page (page /indicar) — premium polish
   ============================================================ */
/* Hero com gradient + padrão de confetti SVG sutil */
.referral-hero {
  position: relative;
  padding: var(--s-7) var(--s-4);
  border-radius: var(--r-xl);
  background:
    linear-gradient(135deg, rgba(255, 136, 0, 0.05) 0%, rgba(255, 106, 0, 0.10) 100%),
    radial-gradient(ellipse at top right, rgba(255, 180, 0, 0.12), transparent 60%),
    radial-gradient(ellipse at bottom left, rgba(15, 62, 153, 0.06), transparent 50%);
  overflow: hidden;
}
.referral-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle 1.5px at 8% 20%,   var(--c-premium-gold)   1px, transparent 2px),
    radial-gradient(circle 2px   at 22% 70%,  var(--c-primary)        1.2px, transparent 2.2px),
    radial-gradient(circle 1.5px at 38% 35%,  var(--c-success-light)  1px, transparent 2px),
    radial-gradient(circle 1.5px at 55% 80%,  var(--c-elite-purple)   1px, transparent 2px),
    radial-gradient(circle 2px   at 72% 28%,  var(--c-urgency-red)    1.2px, transparent 2.2px),
    radial-gradient(circle 1.5px at 88% 62%,  var(--c-trust-blue)     1px, transparent 2px),
    radial-gradient(circle 1.5px at 15% 90%,  var(--c-premium-gold-2) 1px, transparent 2px),
    radial-gradient(circle 1.5px at 92% 12%,  var(--c-primary-3)      1px, transparent 2px);
  opacity: 0.55;
  pointer-events: none;
  animation: referral-hero-twinkle 8s ease-in-out infinite;
}
@keyframes referral-hero-twinkle {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 0.85; transform: scale(1.02); }
}
.referral-hero__h1,
.referral-hero__lead { position: relative; z-index: 1; }

/* Stat cards — ícone SVG no lugar de emoji */
.referral-stat-card { transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
.referral-stat-card:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); border-color: var(--c-primary); }
.referral-stat-card__icon-svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 136, 0, 0.15), rgba(255, 136, 0, 0.04));
  color: var(--c-primary);
  margin: 0 auto var(--s-2);
}
.referral-stat-card--gold .referral-stat-card__icon-svg {
  background: linear-gradient(135deg, rgba(232, 152, 24, 0.18), rgba(232, 152, 24, 0.04));
  color: var(--c-premium-gold-2);
}
.referral-stat-card--milestone .referral-stat-card__icon-svg {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(16, 185, 129, 0.04));
  color: var(--c-success-light);
}

/* WhatsApp share button — pulse mobile */
@media (max-width: 700px) {
  .referral-share-wa { animation: wa-cta-pulse 2.4s ease-in-out infinite; }
  .referral-sticky-wa { animation: wa-cta-pulse 2.4s ease-in-out infinite; }
}
@keyframes wa-cta-pulse {
  0%, 100% { box-shadow: 0 10px 24px rgba(37, 211, 102, 0.35); transform: translateY(0); }
  50%      { box-shadow: 0 14px 32px rgba(37, 211, 102, 0.55); transform: translateY(-2px); }
}

/* Outros canais — ícones SVG + hover lift */
.referral-share-btn {
  transition: transform var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-base) var(--ease),
              background var(--dur-fast) var(--ease);
}
.referral-share-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(15, 25, 45, 0.10); }
.referral-share-btn--fb:hover { border-color: #1877F2; color: #1877F2; }
.referral-share-btn--tg:hover { border-color: #0088CC; color: #0088CC; }
.referral-share-btn--em:hover { border-color: var(--c-elite-purple); color: var(--c-elite-purple); }
.referral-share-btn--copy:hover { border-color: var(--c-primary); color: var(--c-primary); }
.referral-share-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
}

/* Leaderboard — avatares circulares com iniciais */
.referral-leaderboard__item {
  grid-template-columns: 40px 36px 1fr auto !important;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.referral-leaderboard__item:hover { background: rgba(255, 136, 0, 0.06); transform: translateX(2px); }
.referral-leaderboard__avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 12px;
  color: var(--c-white);
  background: linear-gradient(135deg, #FF8800, #E05300);
  letter-spacing: 0;
  flex-shrink: 0;
}
.referral-leaderboard__item--gold   .referral-leaderboard__avatar {
  background: var(--grad-flagship);
  box-shadow: 0 4px 10px rgba(232, 152, 24, 0.30);
}
.referral-leaderboard__item--silver .referral-leaderboard__avatar {
  background: linear-gradient(135deg, #DCE0E6, #8E96A2);
  color: #2A2A2A;
}
.referral-leaderboard__item--bronze .referral-leaderboard__avatar {
  background: linear-gradient(135deg, #E9B175, #8C5419);
}
.referral-leaderboard__medal-svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
}
.referral-leaderboard__item--gold   .referral-leaderboard__medal-svg { color: var(--c-premium-gold-2); }
.referral-leaderboard__item--silver .referral-leaderboard__medal-svg { color: #8E96A2; }
.referral-leaderboard__item--bronze .referral-leaderboard__medal-svg { color: #8C5419; }

/* Código referral — bordas decorativas (corner brackets) */
.referral-card__code-wrap {
  position: relative;
  display: inline-block;
  padding: 12px 20px;
}
.referral-card__code-wrap::before,
.referral-card__code-wrap::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  border: 2.5px solid var(--c-primary);
}
.referral-card__code-wrap::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.referral-card__code-wrap::after  { bottom: 0; right: 0; border-left: 0; border-top: 0; }

/* ============================================================
   Match card v2 — pulse no 🔥 + pile de comunidade
   ============================================================ */
.match-card[data-high-stakes="true"] .match-fire,
.match-card .high-stakes-fire {
  display: inline-block;
  animation: match-fire-pulse 1.6s ease-in-out infinite;
  transform-origin: center bottom;
}
@keyframes match-fire-pulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255, 136, 0, 0)); }
  50%      { transform: scale(1.12); filter: drop-shadow(0 0 6px rgba(255, 136, 0, 0.6)); }
}

.match-community-pile {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--s-2);
  font-size: var(--fs-xs);
  color: var(--c-muted);
}
.match-community-pile__avatars {
  display: inline-flex;
}
.match-community-pile__avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--c-white);
  background: linear-gradient(135deg, #FF8800, #E05300);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  font-family: var(--f-display);
  margin-left: -8px;
}
.match-community-pile__avatar:first-child { margin-left: 0; }
.match-community-pile__avatar:nth-child(2) { background: linear-gradient(135deg, #4F46E5, #7C3AED); }
.match-community-pile__avatar:nth-child(3) { background: linear-gradient(135deg, #10B981, #059669); }
.match-community-pile__avatar:nth-child(4) { background: linear-gradient(135deg, #DC2626, #F59E0B); }

/* ---------- Partial reusável `match_card.php` (home + dashboard, item 10) ---------- */
/* Card clicável (dashboard): herda o hover bonito do .match-card e dá um leve lift. */
.match-card--link { cursor: pointer; }
.match-card--link:hover { transform: translateY(-2px); }
.match-card--link:active { transform: translateY(0); }
.match-card--link:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 2px;
}
/* "Palpitar →" no lugar do placar quando o user ainda não palpitou. */
.match-card__topalpitar {
  font-size: var(--fs-sm);
  color: var(--c-primary);
  font-weight: 800;
  font-family: var(--f-display);
  white-space: nowrap;
}
/* Tag "Jogo equilibrado" — variante neutra do favorito. */
.tag-fav--balanced { background: rgba(255, 214, 10, 0.18); color: #8A6A00; }
/* Inputs read-only do card reusável: cursor neutro (visual igual ao demo da home). */
.match-card--reusable .score-input input[readonly] { cursor: default; }
@media (prefers-reduced-motion: reduce) {
  .match-card--link:hover,
  .match-card--link:active { transform: none; }
}

/* ============================================================
   Animação de stagger genérica (IntersectionObserver helper)
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
[data-reveal].is-revealed { opacity: 1; transform: translateY(0); }
[data-reveal-stagger="80"] > * {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
[data-reveal-stagger="80"] > *:nth-child(1)  { transition-delay: 0ms; }
[data-reveal-stagger="80"] > *:nth-child(2)  { transition-delay: 80ms; }
[data-reveal-stagger="80"] > *:nth-child(3)  { transition-delay: 160ms; }
[data-reveal-stagger="80"] > *:nth-child(4)  { transition-delay: 240ms; }
[data-reveal-stagger="80"] > *:nth-child(5)  { transition-delay: 320ms; }
[data-reveal-stagger="80"] > *:nth-child(6)  { transition-delay: 400ms; }
[data-reveal-stagger="80"].is-revealed > * { opacity: 1; transform: translateY(0); }

/* ============================================================
   Reduced motion — desativa TODAS as animações da campanha v2
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .coupon-strip-emoji,
  .cadastro-progress__bullet,
  .cadastro-progress__bar-fill::after,
  .cart-recovery,
  .cart-recovery__icon::after,
  .push-optin,
  .push-optin__icon svg,
  .welcome-modal-card::after,
  .referral-share-wa,
  .referral-sticky-wa,
  .referral-hero::before,
  .match-card .high-stakes-fire,
  .social-proof__dot,
  .social-proof__num.is-bumping,
  .dashboard-reco__card,
  .trust-badge,
  .footer-trust__item,
  .confetti-overlay span,
  .fpr-modal__confetti-piece {
    animation: none !important;
    transition: none !important;
  }
  .trust-badge,
  .footer-trust__item,
  [data-reveal],
  [data-reveal-stagger="80"] > * {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   AUTH SCREENS POLISH (cadastro v3)
   ------------------------------------------------------------
   Polimento premium dos 4 forms de cadastro (step1, step2_dream,
   step2_current, step2-dados).
   Princípios: hierarquia tipográfica limpa, respiro generoso,
   inputs touch-friendly, disclaimer contido, mobile-first.
   Inspiração: Stripe / Linear / Cursor signup.
   ============================================================ */

/* ---------- Background da página de auth (override em layouts/auth.php) ---------- */
.auth-body {
  background:
    radial-gradient(1200px 600px at 12% -10%, rgba(255, 136, 0, 0.10), transparent 60%),
    radial-gradient(900px 500px at 90% 110%, rgba(15, 62, 153, 0.07), transparent 60%),
    #F7F8FB;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: start center;
  padding: var(--s-4) var(--s-3) var(--s-6);
}
@media (min-width: 700px) {
  .auth-body { padding: var(--s-6) var(--s-5); place-items: center; }
}

/* ---------- Card central ---------- */
.auth-card {
  width: 100%;
  max-width: 480px;
  background: var(--c-white);
  border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-4);
  box-shadow:
    0 1px 2px rgba(15, 25, 45, 0.04),
    0 12px 32px rgba(15, 25, 45, 0.06),
    0 0 0 1px rgba(15, 25, 45, 0.04);
  position: relative;
}
@media (min-width: 700px) {
  .auth-card { padding: var(--s-6) var(--s-6); }
}
@media (min-width: 900px) {
  .auth-card {
    padding: var(--s-6) var(--s-6) var(--s-5);
    box-shadow:
      0 1px 2px rgba(15, 25, 45, 0.04),
      0 24px 48px rgba(15, 25, 45, 0.08),
      0 0 0 1px rgba(15, 25, 45, 0.04);
  }
}

/* ---------- Brand row (logo + tag) ---------- */
.auth-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-bottom: var(--s-5);
}
.auth-brand img { height: 24px; width: auto; display: block; }
.auth-brand .divider {
  width: 1px;
  height: 18px;
  background: var(--c-line);
}
.auth-brand .tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--c-primary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- Header block (eyebrow + h1 + lead) ---------- */
.auth-head { margin-bottom: var(--s-5); }
.auth-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-primary-2);
  background: #FFF4E0;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  margin-bottom: var(--s-3);
  line-height: 1.2;
}
.auth-eyebrow--accent { color: var(--c-accent-2); background: #EAF1FF; }
.auth-eyebrow--field  { color: var(--c-field-2, #1F7A36); background: #E8F5EC; }
.auth-eyebrow svg { width: 12px; height: 12px; flex-shrink: 0; }

.auth-h1 {
  font-size: clamp(1.5rem, 4.5vw + 0.4rem, 1.875rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-weight: 800;
  color: var(--c-text);
  margin: 0 0 var(--s-3);
}
.auth-h1 strong { color: var(--c-primary); font-weight: 800; }
.auth-h1--accent strong { color: var(--c-accent); }

.auth-lead {
  font-size: var(--fs-base);
  color: var(--c-muted);
  line-height: 1.55;
  margin: 0;
}
.auth-lead strong { color: var(--c-text); font-weight: 700; }

/* ---------- Disclaimer compacto (override do inline anterior) ---------- */
.auth-disclaimer {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: rgba(255, 180, 0, 0.08);
  border: 1px solid rgba(255, 180, 0, 0.30);
  border-left-width: 3px;
  color: #6B5200;
  font-size: var(--fs-sm);
  line-height: 1.5;
  margin: 0 0 var(--s-4);
}
.auth-disclaimer__ico {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: #B08200;
  margin-top: 1px;
}
.auth-disclaimer strong {
  color: #5A4500;
  font-weight: 700;
}
.auth-disclaimer p { margin: 0; }
.auth-disclaimer p + p { margin-top: 2px; }

/* ============================================================
   Mission 4.1 — Aviso premium de e-mail de confirmação (step1)
   ============================================================ */
.auth-notice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: var(--r-lg);
  margin: 0 0 var(--s-4);
  position: relative;
  overflow: hidden;
}
.auth-notice--email {
  background: linear-gradient(135deg, #FFF6EC 0%, #FFFDFA 70%);
  border: 1px solid #FFD9A6;
  box-shadow: 0 2px 10px rgba(255, 136, 0, 0.08);
}
.auth-notice__ico {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-primary);
  color: #fff;
  box-shadow: 0 4px 12px rgba(255, 136, 0, 0.28);
}
.auth-notice__ico svg { width: 22px; height: 22px; }
.auth-notice__body { min-width: 0; }
.auth-notice__title {
  display: block;
  color: var(--c-text);
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--fs-base);
  line-height: 1.25;
}
.auth-notice__text {
  margin: 4px 0 0;
  color: #6B5733;
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.auth-notice__text strong { color: #4A3A18; font-weight: 700; }
.auth-notice__steps {
  list-style: none;
  margin: 14px 0 2px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.auth-notice__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 2px;
}
/* Linha conectora entre os passos (passa atrás dos círculos opacos) */
.auth-notice__step::before {
  content: "";
  position: absolute;
  top: 13px;
  right: 50%;
  width: 100%;
  height: 2px;
  background: rgba(255, 136, 0, 0.28);
  border-radius: 2px;
  z-index: 0;
}
.auth-notice__step:first-child::before { display: none; }
.auth-notice__step--done::before {
  background: linear-gradient(90deg, rgba(255, 136, 0, 0.28), var(--c-field));
}
.auth-notice__step-num {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 13px;
  color: #fff;
  background: var(--c-primary);
  border: 2px solid #fff;
  box-shadow: 0 2px 7px rgba(255, 136, 0, 0.30);
}
.auth-notice__step--done .auth-notice__step-num {
  background: var(--c-field);
  box-shadow: 0 2px 7px rgba(57, 157, 37, 0.32);
}
.auth-notice__step-label {
  margin-top: 7px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.3;
  color: #7A6437;
  max-width: 13ch;
}
.auth-notice__step--done .auth-notice__step-label { color: #2E7D1E; }

/* ============================================================
   Mission 4.2 — Aviso forte de dados imutáveis (step2)
   ============================================================ */
.auth-lockwarn {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 18px 16px 20px;
  border-radius: var(--r-lg);
  margin: 0 0 var(--s-4);
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #FFFBF0 0%, #FFFFFF 75%);
  border: 1.5px solid #FFD27A;
  box-shadow: 0 4px 18px rgba(232, 152, 24, 0.14);
}
.auth-lockwarn__bar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: linear-gradient(180deg, var(--c-primary) 0%, var(--c-final) 100%);
}
.auth-lockwarn__ico {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--c-final) 0%, var(--c-primary) 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(232, 152, 24, 0.32);
}
.auth-lockwarn__ico svg { width: 24px; height: 24px; }
.auth-lockwarn__body { min-width: 0; }
.auth-lockwarn__title {
  display: block;
  color: #5A4500;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--fs-lg);
  line-height: 1.3;
}
.auth-lockwarn__title u {
  text-decoration-color: var(--c-primary);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
.auth-lockwarn__text {
  margin: 6px 0 0;
  color: #6B5430;
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.auth-lockwarn__text strong { color: #4A3A12; font-weight: 800; }

/* ============================================================
   Mission 5 — micro-feedback "Reenviamos!" no success state (step1)
   ============================================================ */
.signup-success__resend-form { display: contents; }
.signup-success__resend-form .signup-success__resend { cursor: pointer; }
.signup-success__resent {
  margin: var(--s-3) auto 0;
  max-width: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(57, 157, 37, 0.10);
  border: 1px solid rgba(57, 157, 37, 0.28);
  border-radius: var(--r-pill);
  color: var(--c-field-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-align: center;
  animation: signup-resent-pop 0.45s var(--ease-smooth) both;
}
.signup-success__resent-ico { font-size: 18px; line-height: 1; }
@keyframes signup-resent-pop {
  from { opacity: 0; transform: translateY(6px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 480px) {
  .auth-notice__ico { width: 36px; height: 36px; }
  .auth-notice__ico svg { width: 20px; height: 20px; }
  .auth-lockwarn { padding: 14px 14px 14px 18px; }
  .auth-lockwarn__ico { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .signup-success__resent { animation: none; }
}

/* ---------- Form (override sutil — mais respiro entre seções) ---------- */
.auth-card .form { gap: var(--s-4); }
.auth-card .form .checkbox + .checkbox { margin-top: calc(var(--s-2) * -1); }

/* ---------- Field labels mais firmes ---------- */
.auth-card .field label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text);
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: -0.005em;
}
.auth-card .field label svg { color: var(--c-primary); flex-shrink: 0; }
.auth-card .field .hint {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  line-height: 1.5;
  margin-top: 2px;
}

/* ---------- Checkbox elegante (custom) ---------- */
.auth-card .checkbox {
  align-items: flex-start;
  font-size: var(--fs-sm);
  color: var(--c-text);
  line-height: 1.45;
  gap: 12px;
  padding: 2px 0;
}
.auth-card .checkbox input[type=checkbox] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex: 0 0 18px;
  cursor: pointer;
}
.auth-card .checkbox > span { flex: 1; }
.auth-card .checkbox .hint {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-xs);
  color: var(--c-muted);
  line-height: 1.45;
}
.auth-card .checkbox a {
  color: var(--c-primary);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.auth-card .checkbox a:hover { color: var(--c-primary-2); }

/* ---------- CTA principal ---------- */
.auth-card .btn--primary.btn--lg {
  padding: 14px 24px;
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: -0.005em;
  min-height: 52px;
  border-radius: var(--r-md);
  margin-top: var(--s-2);
  background: linear-gradient(180deg, var(--c-primary) 0%, var(--c-primary-2) 100%);
  box-shadow: 0 6px 16px rgba(255, 136, 0, 0.28);
}
.auth-card .btn--primary.btn--lg:hover {
  box-shadow: 0 10px 24px rgba(255, 136, 0, 0.38);
}
.auth-card .btn--primary.btn--lg:active {
  transform: translateY(0) scale(0.99);
}

/* ---------- Footer micro-text ---------- */
.auth-card .auth-micro {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  text-align: center;
  line-height: 1.55;
  margin: var(--s-3) 0 0;
}
.auth-card .auth-micro + .auth-micro { margin-top: 4px; }
.auth-card .auth-micro strong { color: var(--c-primary); font-weight: 700; }

.auth-foot {
  text-align: center;
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-sm);
  color: var(--c-muted);
}
.auth-foot a {
  font-weight: 700;
  color: var(--c-primary);
  text-decoration: none;
}
.auth-foot a:hover { color: var(--c-primary-2); text-decoration: underline; }

/* ---------- Divider sutil entre blocos ---------- */
.auth-card hr {
  border: 0;
  border-top: 1px solid var(--c-line);
  margin: var(--s-3) 0 var(--s-2);
}

/* ---------- Progress bar — refinos no contexto auth-card ---------- */
.auth-card .cadastro-progress { margin-bottom: var(--s-5); }
.auth-card .cadastro-progress__steps { gap: 8px; }
@media (max-width: 380px) {
  .auth-card .cadastro-progress__label { font-size: 10px; }
}

/* ---------- Mobile fine-tune ---------- */
@media (max-width: 480px) {
  .auth-card { padding: var(--s-4) var(--s-3) var(--s-5); border-radius: var(--r-md); }
  .auth-brand { margin-bottom: var(--s-4); }
  .auth-head { margin-bottom: var(--s-4); }
  .auth-disclaimer { padding: 10px 12px; font-size: 13px; }
  .auth-disclaimer__ico { width: 16px; height: 16px; }
}

/* ---------- Animação de entrada do card (respeita reduced-motion) ---------- */
@media (prefers-reduced-motion: reduce) {
  .auth-card.fade-in { animation: none; }
}

/* ============================================================
   TF BANNER + NAV CTAs (adições Item 5 — 2026-05-27)
   ----------------------------------------------------------------
   .tf-banner: bloco compacto reutilizável "Telão pra Copa".
   Aceita 3 variantes (telao | cupom | upgrade) — diferentes via classe
   modificadora .tf-banner--{variant} pra ajustes futuros de cor/ícone.
   Mobile-first stacked, desktop em flex-row. Padding generoso, borda
   esquerda grossa laranja pra carimbar identidade Trocafone.
   ============================================================ */
.tf-banner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
  margin: var(--s-5) 0 0;
  padding: var(--s-4) var(--s-4);
  background: linear-gradient(135deg, #FFF8EC 0%, #FFE4BC 100%);
  border: 1px solid #FFD89A;
  border-left: 6px solid var(--c-primary, #FF8800);
  border-radius: var(--r-md, 12px);
  position: relative;
  overflow: hidden;
}
/* Halo decorativo sutil pra dar movimento sem distrair */
.tf-banner::before {
  content: '';
  position: absolute;
  top: -40%; right: -10%;
  width: 50%; height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.40), transparent 65%);
  pointer-events: none;
}
.tf-banner__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.65);
  color: var(--c-primary, #FF8800);
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(255, 136, 0, 0.18);
  position: relative;
  z-index: 1;
}
.tf-banner__body {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.tf-banner__h4 {
  margin: 0 0 4px;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--fs-lg);
  color: var(--c-text);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.tf-banner__lead {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--c-text);
  line-height: 1.5;
}
.tf-banner__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  min-height: 40px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: 0.01em;
  background: var(--c-primary, #FF8800);
  color: #fff !important;
  border-radius: var(--r-md, 12px);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(255, 136, 0, 0.30);
  transition:
    transform var(--dur-fast) var(--ease),
    box-shadow var(--dur-base) var(--ease),
    background var(--dur-base) var(--ease);
  position: relative;
  z-index: 1;
  align-self: flex-start;
}
.tf-banner__cta:hover {
  background: linear-gradient(135deg, var(--c-primary, #FF8800) 0%, var(--c-primary-2, #E07300) 100%);
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(255, 136, 0, 0.45);
}
.tf-banner__cta:active { transform: translateY(0) scale(0.98); }
.tf-banner__cta:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

/* Variantes — só ajustes leves de cor; layout permanece coerente */
.tf-banner--cupom {
  background: linear-gradient(135deg, #FFF4D6 0%, #FFE08A 100%);
  border-left-color: var(--c-final, #F4B400);
}
.tf-banner--cupom .tf-banner__icon { color: var(--c-final, #F4B400); }
.tf-banner--upgrade {
  background: linear-gradient(135deg, #FFEED9 0%, #FFD2A0 100%);
  border-left-color: var(--c-primary-2, #E07300);
}
.tf-banner--upgrade .tf-banner__icon { color: var(--c-primary-2, #E07300); }

/* Desktop ≥ 720px: vira layout horizontal em flex-row */
@media (min-width: 720px) {
  .tf-banner {
    flex-direction: row;
    align-items: center;
    padding: var(--s-4) var(--s-5);
    gap: var(--s-4);
  }
  .tf-banner__cta { align-self: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .tf-banner__cta,
  .tf-banner__cta:hover,
  .tf-banner__cta:active { transform: none !important; transition: none !important; }
}

/* ===== RECOMMENDED PRODUCTS — skeleton de carregamento (refresh dinâmico via AJAX) ===== */
.dashboard-reco__card--loading .dashboard-reco__thumb {
  background: linear-gradient(110deg, #F2F4F8 8%, #E8EBEF 18%, #F2F4F8 33%);
  background-size: 200% 100%;
  animation: recoShimmer 1.4s linear infinite;
  border-radius: var(--r-sm);
  min-height: 80px;
}
.dashboard-reco__card--loading .dashboard-reco__thumb-fallback svg { opacity: .35; }

.dashboard-reco__price-fallback {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--c-muted);
  font-size: var(--fs-sm);
}
.dashboard-reco__skeleton {
  display: inline-block;
  width: 72px;
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(110deg, #F2F4F8 8%, #E8EBEF 18%, #F2F4F8 33%);
  background-size: 200% 100%;
  animation: recoShimmer 1.4s linear infinite;
}
.dashboard-reco__price-fallback-text { font-style: italic; }

@keyframes recoShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-reco__card--loading .dashboard-reco__thumb,
  .dashboard-reco__skeleton { animation: none; }
}

/* ============================================================
   ============================================================
                       MIGRAÇÃO 2026-05-27
   Stylesheets que estavam inline em partials/views, agora
   centralizados em app.css (fonte única de estilos).

   Princípio: views/partials carregam SÓ markup + classes.
   Exceções: emails (CSS inline obrigatório), estilos dinâmicos
   baseados em variável PHP.
   ============================================================
   ============================================================ */

/* ============================================================
   topbar.php — top strip (Concurso cultural gratuito · Trocafone)
   ============================================================ */
.topbar {
  background: var(--c-primary);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 8px 16px;
}
.topbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.topbar-item strong { font-weight: 800; }
.topbar-divider {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.40);
  display: inline-block;
}

/* ============================================================
   cadastro_progress.php — progress bar de 4 etapas
   ============================================================ */
.cadastro-progress { margin-bottom: var(--s-5); }
.cadastro-progress__steps {
  list-style: none;
  padding: 0;
  margin: 0 0 10px 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.cadastro-progress__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--c-muted);
  text-align: center;
  line-height: 1.1;
}
.cadastro-progress__bullet {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
  border: 1.5px solid var(--c-line-2);
  background: var(--c-white);
  color: var(--c-muted);
  transition: background var(--dur-base) var(--ease),
              color var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease);
}
.cadastro-progress__step.is-current .cadastro-progress__bullet {
  background: var(--c-primary);
  color: #fff;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(255, 136, 0, 0.18);
}
.cadastro-progress__step.is-current .cadastro-progress__label { color: var(--c-primary); font-weight: 700; }
.cadastro-progress__step.is-done .cadastro-progress__bullet {
  background: var(--c-field);
  color: #fff;
  border-color: var(--c-field);
}
.cadastro-progress__step.is-done .cadastro-progress__label { color: var(--c-text); }
.cadastro-progress__label {
  font-family: var(--f-display);
  letter-spacing: -0.005em;
}
.cadastro-progress__bar {
  height: 4px;
  background: var(--c-line);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.cadastro-progress__bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--c-primary) 0%, var(--c-primary-2) 100%);
  border-radius: 999px;
  transition: width var(--dur-base) var(--ease);
}
@media (max-width: 380px) {
  .cadastro-progress__step { font-size: 10px; gap: 3px; }
  .cadastro-progress__bullet { width: 20px; height: 20px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .cadastro-progress__bullet,
  .cadastro-progress__bar-fill { transition: none; }
}

/* ============================================================
   countdown_strip.php
   ============================================================ */
.countdown-strip {
  background: linear-gradient(90deg, #1F1F1F 0%, #2A2A2A 100%);
  color: #fff;
  padding: 8px 0;
}
.countdown-strip.is-locked {
  background: linear-gradient(90deg, #E63946 0%, #C42936 100%);
}
.countdown-strip-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--s-4);
  display: flex;
  gap: var(--s-3);
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: var(--fs-sm);
}
@media (min-width: 700px) {
  .countdown-strip-inner { padding: 0 var(--s-5); gap: var(--s-4); }
}
.countdown-strip-info {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
  flex: 1;
}
.countdown-strip-info strong { color: var(--c-primary); font-weight: 800; font-size: 13px; }
.countdown-strip.is-locked .countdown-strip-info strong { color: #fff; }
.countdown-strip-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-primary);
  box-shadow: 0 0 0 0 rgba(255, 136, 0, 0.6);
  animation: pulse-dot 1.6s infinite;
  display: inline-block;
  flex: 0 0 8px;
}
.countdown-strip.is-locked .countdown-strip-pulse { background: #fff; }
@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0 rgba(255, 136, 0, 0.7); }
  70%  { box-shadow: 0 0 0 10px rgba(255, 136, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 136, 0, 0); }
}
.countdown-strip-clock {
  display: flex;
  gap: 4px;
  align-items: center;
  font-family: var(--f-mono);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
@media (min-width: 700px) { .countdown-strip-clock { gap: 6px; } }
.cd-cell {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 36px;
  padding: 4px 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 6px;
}
@media (min-width: 700px) { .cd-cell { min-width: 38px; padding: 4px 8px; } }
.cd-num { font-size: 16px; line-height: 1; color: #fff; }
@media (min-width: 700px) { .cd-num { font-size: 18px; } }
.cd-lbl {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.65;
  margin-top: 2px;
}
.cd-sep { color: var(--c-primary); font-weight: 800; }

/* ============================================================
   coupon_card.php
   ============================================================ */
.coupon-card {
  position: relative;
  background: var(--c-white);
  border: 2px dashed var(--c-primary);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  overflow: hidden;
  display: flex;
  gap: var(--s-4);
  align-items: stretch;
}
.coupon-card::before,
.coupon-card::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background: var(--c-light);
  border: 2px dashed var(--c-primary);
  border-radius: 50%;
}
.coupon-card::before { left: -14px; }
.coupon-card::after  { right: -14px; }
.coupon-card-stamp {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-primary);
  color: var(--c-white);
  font-weight: 800;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  letter-spacing: 0.18em;
  padding: 0 14px;
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
}
.coupon-card-body { flex: 1; }
.coupon-card-eyebrow {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--fs-xl);
  color: var(--c-primary);
  margin-bottom: 4px;
}
.coupon-card-subtitle {
  color: var(--c-muted);
  font-size: var(--fs-sm);
  margin-bottom: var(--s-3);
}
.coupon-card-code-wrapper {
  background: linear-gradient(135deg, #FFF4E0, #FFE4BC);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-3);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  justify-content: space-between;
}
.coupon-card-code-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--c-primary-2);
}
.coupon-card-code {
  font-family: var(--f-mono);
  font-size: var(--fs-2xl);
  font-weight: 800;
  letter-spacing: 0.10em;
  color: var(--c-primary);
}
.coupon-card-caption { font-size: var(--fs-sm); color: var(--c-muted); margin-bottom: var(--s-3); }
.coupon-card-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }
@media (max-width: 600px) {
  .coupon-card { flex-direction: column; }
  .coupon-card-stamp { writing-mode: horizontal-tb; transform: none; padding: 8px 14px; }
  .coupon-card::before,
  .coupon-card::after { display: none; }
}

/* ============================================================
   coupon_strip.php
   ============================================================ */
.coupon-strip {
  background: linear-gradient(90deg, #FFF8EC 0%, #FFEAC8 100%);
  border-top: 1px solid var(--c-primary);
  border-bottom: 1px solid var(--c-primary);
}
.coupon-strip-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.coupon-strip-text {
  display: flex;
  gap: 10px;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;
}
.coupon-strip-emoji { font-size: 22px; flex-shrink: 0; }
.coupon-strip-emoji svg { display: block; color: currentColor; }
.coupon-strip--base .coupon-strip-emoji { color: var(--c-primary); }
.coupon-strip--flagship .coupon-strip-emoji { color: var(--c-premium-gold-2, var(--c-final)); }
.coupon-strip--upgrade_ready .coupon-strip-emoji { color: var(--c-urgency-red, var(--c-fire)); }
.coupon-strip--top100 .coupon-strip-emoji { color: var(--c-elite-purple, #7C3AED); }
.coupon-strip-label { font-size: var(--fs-sm); color: var(--c-text); font-weight: 600; }
.coupon-strip-label strong { color: var(--c-primary); font-weight: 800; }
.coupon-strip-warn {
  font-size: var(--fs-xs);
  background: rgba(230, 57, 70, 0.10);
  color: #C42936;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 700;
  flex-shrink: 0;
}
.coupon-strip-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.coupon-strip-code {
  font-family: var(--f-mono);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.08em;
  padding: 8px 14px;
  border-radius: 6px;
  background: var(--c-white);
  color: var(--c-primary);
  border: 1.5px dashed var(--c-primary);
}
.coupon-strip-btn {
  padding: 8px 14px;
  border-radius: 6px;
  background: var(--c-white);
  color: var(--c-primary);
  border: 1.5px solid var(--c-primary);
  font-weight: 700;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.coupon-strip-btn:hover { background: var(--c-primary); color: var(--c-white); }
.coupon-strip-btn.copied { background: var(--c-field); color: var(--c-white); border-color: var(--c-field); }
.coupon-strip-cta {
  font-size: var(--fs-sm);
  font-weight: 700;
  background: var(--c-primary);
  color: #fff;
  padding: 8px 16px;
  border-radius: 6px;
  text-decoration: none;
}
.coupon-strip-cta:hover { background: var(--c-primary-2); color: #fff; }
@media (max-width: 600px) {
  .coupon-strip-inner { padding: 8px 12px; gap: 8px; }
  .coupon-strip-label { font-size: 12px; }
  .coupon-strip-code { font-size: 13px; padding: 6px 10px; }
  .coupon-strip-btn,
  .coupon-strip-cta { font-size: 12px; padding: 6px 10px; }
  .coupon-strip .tier-badge { display: none; }
}

/* ============================================================
   share_buttons.php — bloco WhatsApp/Facebook/Copy
   ============================================================ */
.share-section {
  padding: var(--s-6) 0;
  background: var(--c-light);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.share-section h2 { font-size: var(--fs-xl); margin-bottom: var(--s-4); }
.share-buttons {
  display: flex;
  gap: var(--s-3);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--s-3);
}
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  font-size: 14px;
  transition: transform .15s var(--ease), box-shadow .2s var(--ease);
}
.share-btn:hover { transform: translateY(-2px); }
.share-btn--wa { background: #25D366; color: #fff; box-shadow: 0 6px 16px rgba(37, 211, 102, 0.30); }
.share-btn--wa:hover { background: #1FB75A; color: #fff; box-shadow: 0 10px 24px rgba(37, 211, 102, 0.40); }
.share-btn--fb { background: #1877F2; color: #fff; box-shadow: 0 6px 16px rgba(24, 119, 242, 0.30); }
.share-btn--fb:hover { background: #135DC7; color: #fff; box-shadow: 0 10px 24px rgba(24, 119, 242, 0.40); }
.share-btn--copy { background: #fff; color: var(--c-text); border: 2px solid var(--c-line-2); }
.share-btn--copy:hover { border-color: var(--c-primary); color: var(--c-primary); }
.share-btn--copy.copied { background: var(--c-field); color: #fff; border-color: var(--c-field); }

/* ============================================================
   welcome_modal.php
   ============================================================ */
.welcome-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 16px;
  animation: wmFade .25s var(--ease);
}
.welcome-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 18, 32, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.welcome-modal-card {
  position: relative;
  background: #fff;
  border-radius: var(--r-xl);
  padding: var(--s-6);
  max-width: 520px;
  width: 100%;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.30);
  border-top: 6px solid var(--c-primary);
  animation: wmIn .35s var(--ease);
}
.welcome-modal--flagship .welcome-modal-card { border-top-color: #B66E00; }
.welcome-modal--upgrade_ready .welcome-modal-card { border-top-color: #E05300; }
.welcome-modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: transparent;
  border: 0;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: var(--c-muted);
}
.welcome-modal-close:hover { color: var(--c-text); }
.welcome-modal-header { text-align: center; margin-bottom: var(--s-5); }
.welcome-modal-emoji {
  font-size: 56px;
  line-height: 1;
  margin-bottom: var(--s-2);
  animation: wmBounce 1.2s ease-in-out infinite;
  color: var(--c-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255, 136, 0, 0.15), rgba(255, 136, 0, 0.04));
  margin-left: auto;
  margin-right: auto;
}
.welcome-modal-emoji svg { display: block; }
.welcome-modal--flagship .welcome-modal-emoji {
  background: linear-gradient(135deg, rgba(255, 180, 0, 0.25), rgba(232, 152, 24, 0.06));
  color: #B66E00;
}
.welcome-modal--upgrade_ready .welcome-modal-emoji {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.18), rgba(220, 38, 38, 0.04));
  color: var(--c-urgency-red, var(--c-fire));
}
.welcome-modal-eyebrow {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--c-primary);
  font-weight: 800;
}
.welcome-modal-card h2 { font-size: var(--fs-2xl); margin: 8px 0 var(--s-3); }
.welcome-modal-header p { color: var(--c-muted); font-size: var(--fs-sm); }
.welcome-modal-coupon {
  background: linear-gradient(135deg, #FFF4E0, #FFE4BC);
  border: 2px dashed var(--c-primary);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  text-align: center;
  margin-bottom: var(--s-5);
}
.welcome-modal--flagship .welcome-modal-coupon {
  background: linear-gradient(135deg, #FFF4D6, #F5D78B);
  border-color: #B66E00;
}
.welcome-modal-coupon-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-primary-2);
  font-weight: 800;
}
.welcome-modal-coupon code {
  display: block;
  font-family: var(--f-mono);
  font-weight: 800;
  font-size: 36px;
  letter-spacing: 0.12em;
  color: var(--c-primary);
  margin: 8px 0 6px;
  word-break: break-all;
}
.welcome-modal-coupon-caption { font-size: var(--fs-xs); color: var(--c-muted); }
.welcome-modal-actions {
  display: flex;
  gap: var(--s-3);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--s-3);
}
.welcome-modal-foot {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  text-align: center;
  margin: 0;
}
@keyframes wmFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wmIn { from { transform: translateY(16px) scale(0.96); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes wmBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) {
  .welcome-modal-emoji,
  .welcome-modal-card,
  .welcome-modal { animation: none; }
}
@media (max-width: 600px) {
  .welcome-modal { padding: 0; align-items: flex-end; }
  .welcome-modal-card {
    padding: var(--s-5);
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    border-top: 6px solid var(--c-primary);
  }
  .welcome-modal-coupon code { font-size: 26px; }
  .welcome-modal-actions { flex-direction: column; align-items: stretch; }
  .welcome-modal-actions .btn { width: 100%; justify-content: center; }
  .welcome-modal-card h2 { font-size: var(--fs-xl); }
  .welcome-modal-emoji { font-size: 48px; }
}

/* ============================================================
   push_optin_modal.php
   ============================================================ */
.push-optin {
  position: fixed;
  z-index: 900;
  bottom: 20px;
  right: 20px;
  max-width: 380px;
  animation: pushSlideUp .35s var(--ease);
}
.push-optin__card {
  background: #fff;
  border-radius: var(--r-lg);
  padding: var(--s-4);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.25);
  border-top: 4px solid var(--c-primary);
  position: relative;
}
.push-optin__close {
  position: absolute;
  top: 6px;
  right: 10px;
  background: transparent;
  border: 0;
  font-size: 24px;
  line-height: 1;
  color: var(--c-muted);
  cursor: pointer;
}
.push-optin__close:hover { color: var(--c-text); }
.push-optin h4 { margin: 0 0 6px; font-size: var(--fs-lg); }
.push-optin p { margin: 0 0 var(--s-3); font-size: var(--fs-sm); color: var(--c-text); line-height: 1.4; }
.push-optin__micro { color: var(--c-muted); font-size: var(--fs-xs); }
.push-optin__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.push-optin__actions .btn { flex: 1; min-width: 110px; justify-content: center; }
@keyframes pushSlideUp {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}
@media (max-width: 600px) {
  .push-optin {
    left: 0; right: 0; bottom: 0;
    max-width: none;
    border-radius: 0;
  }
  .push-optin__card {
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    margin: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .push-optin { animation: none; }
}

/* ============================================================
   cart_recovery_banner.php
   ============================================================ */
.cart-recovery {
  background: linear-gradient(90deg, #FFE4BC 0%, #FFD89A 100%);
  border-top: 1px solid var(--c-primary);
  border-bottom: 1px solid var(--c-primary);
  padding: 10px 0;
}
.cart-recovery__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--s-4);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.cart-recovery__text {
  flex: 1;
  min-width: 200px;
  font-size: var(--fs-sm);
  line-height: 1.35;
}
.cart-recovery__text strong { color: var(--c-primary-2); display: block; }
.cart-recovery__text span { color: var(--c-text); }
.cart-recovery__close {
  background: transparent;
  border: 0;
  font-size: 22px;
  cursor: pointer;
  color: var(--c-muted);
  padding: 4px 8px;
}
.cart-recovery__close:hover { color: var(--c-text); }

/* ============================================================
   first_prediction_referral_modal.php
   ============================================================ */
.fpr-modal {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  padding: 16px;
}
.fpr-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 18, 32, 0.72);
}
.fpr-modal__card {
  position: relative;
  background: #fff;
  border-radius: var(--r-xl);
  padding: var(--s-5);
  max-width: 480px;
  width: 100%;
  text-align: center;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.30);
  animation: fprIn .4s var(--ease);
}
.fpr-modal__close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: transparent;
  border: 0;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: var(--c-muted);
}
.fpr-modal__confetti {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  margin: 0 auto 8px;
  border-radius: 24px;
  background: var(--grad-flagship-soft, linear-gradient(135deg, #FFF6DC, #FFE7A8));
  color: var(--c-premium-gold-2, var(--c-final));
  animation: fprBounce 1s ease-in-out infinite;
  position: relative;
  z-index: 2;
}
.fpr-modal__confetti-icon { display: inline-flex; align-items: center; }
.fpr-modal__confetti svg { display: block; }
.fpr-modal__card h3 { margin: 0 0 8px; font-size: var(--fs-2xl); color: var(--c-primary); }
.fpr-modal__card p { color: var(--c-text); line-height: 1.45; }
.fpr-modal__code {
  background: linear-gradient(135deg, #FFF4E0, #FFE4BC);
  border: 2px dashed var(--c-primary);
  border-radius: var(--r-md);
  padding: 12px;
  margin: var(--s-4) 0;
}
.fpr-modal__code code {
  font-family: var(--f-mono);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: 0.10em;
  color: var(--c-primary);
}
.fpr-modal__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: var(--s-3);
}
.fpr-modal__actions .btn { flex: 1; min-width: 140px; justify-content: center; color: #fff; }
.fpr-modal__actions .btn--outline { background: transparent; color: var(--c-text); }
.fpr-modal__skip {
  background: transparent;
  border: 0;
  color: var(--c-muted);
  font-size: var(--fs-sm);
  cursor: pointer;
  text-decoration: underline;
  margin-top: 8px;
}
@keyframes fprIn { from { transform: translateY(20px) scale(0.96); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes fprBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) {
  .fpr-modal__card,
  .fpr-modal__confetti { animation: none; }
}

/* ============================================================
   footer.php — trust block (selos de confiança)
   ============================================================ */
.footer-trust {
  list-style: none;
  padding: 0;
  margin: var(--s-5) 0 var(--s-3);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.footer-trust__item {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
}
@media (max-width: 600px) {
  .footer-trust { gap: 6px; }
  .footer-trust__item { padding: 5px 10px; font-size: 11px; }
}

/* ============================================================
   user_subnav.php — barra de navegação secundária da área logada
   ============================================================ */
.user-subnav {
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  position: sticky;
  top: 0;
  z-index: 5;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
  mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
}
.user-subnav::-webkit-scrollbar { display: none; }
.user-subnav-inner {
  display: flex;
  gap: 4px;
  padding: 8px var(--s-4);
  min-height: 56px;
  align-items: center;
  white-space: nowrap;
}
.user-subnav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  text-decoration: none;
  color: var(--c-text);
  font-weight: 600;
  font-size: var(--fs-sm);
  border-radius: 999px;
  min-height: 40px;
  position: relative;
  transition:
    color var(--dur-fast) var(--ease),
    background var(--dur-base) var(--ease),
    transform var(--dur-fast) var(--ease),
    box-shadow var(--dur-base) var(--ease);
}
.user-subnav-link .user-subnav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.65;
  transition: opacity var(--dur-base) var(--ease);
}
.user-subnav-link:hover {
  background: rgba(255, 136, 0, 0.08);
  color: var(--c-primary);
}
.user-subnav-link:hover .user-subnav-icon { opacity: 1; }
.user-subnav-link:active { transform: scale(0.97); }
.user-subnav-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 136, 0, 0.30);
}
.user-subnav-link.is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--c-primary) 0%, #FF7A00 100%);
  box-shadow: 0 4px 12px rgba(255, 136, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.30);
}
.user-subnav-link.is-active .user-subnav-icon { opacity: 1; }
.user-subnav-link.is-active:hover {
  color: #fff;
  background: linear-gradient(135deg, #FF7A00 0%, var(--c-primary-2) 100%);
}
.user-subnav-icon svg { display: block; }
.user-subnav-label { font-family: var(--f-display); letter-spacing: -0.005em; }
@media (max-width: 600px) {
  .user-subnav-inner { padding: 6px var(--s-3); min-height: 52px; }
  .user-subnav-link { padding: 8px 12px; font-size: var(--fs-xs); gap: 6px; }
  .user-subnav-link .user-subnav-icon svg { width: 16px; height: 16px; }
}

/* Breadcrumb sutil abaixo da subnav */
.user-breadcrumb {
  background: linear-gradient(180deg, #FAFAFA, #fff);
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.user-breadcrumb-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px var(--s-4);
  font-size: var(--fs-xs);
  color: var(--c-muted);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.user-breadcrumb-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--c-muted);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 6px;
  transition: color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.user-breadcrumb-link:hover { color: var(--c-primary); background: rgba(255, 136, 0, 0.06); }
.user-breadcrumb-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.user-breadcrumb-sep {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-line-2);
}
.user-breadcrumb-current {
  color: var(--c-text);
  font-weight: 700;
  padding: 4px 8px;
  background: rgba(255, 136, 0, 0.08);
  border-radius: 6px;
}
@media (max-width: 600px) {
  .user-breadcrumb-inner { padding: 8px var(--s-3); font-size: 11px; gap: 6px; }
  .user-breadcrumb-home svg { width: 12px; height: 12px; }
}

/* ============================================================
   layouts/user.php — container principal da área logada
   ============================================================ */
.user-main {
  padding: var(--s-5) var(--s-4);
}
@media (min-width: 700px) {
  .user-main { padding: var(--s-6) var(--s-5); }
}

/* ============================================================
   user/profile.php — cards de conta + endereço
   ============================================================ */
.profile-card {
  transition: box-shadow var(--dur-base) var(--ease);
}
.profile-card:hover {
  box-shadow:
    0 8px 24px rgba(15, 25, 45, 0.06),
    0 2px 6px rgba(15, 25, 45, 0.04);
}
.profile-card h3 { margin: 0; }
.profile-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-line);
}
.profile-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255, 136, 0, 0.16), rgba(255, 136, 0, 0.04));
  color: var(--c-primary);
  flex-shrink: 0;
}
.profile-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
  margin: 0;
}
@media (max-width: 600px) { .profile-list { grid-template-columns: 1fr; } }
.profile-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--s-3) var(--s-4);
  background: rgba(0, 0, 0, 0.02);
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  transition:
    border-color var(--dur-fast) var(--ease),
    background var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}
.profile-item:hover {
  background: rgba(255, 136, 0, 0.05);
  border-color: rgba(255, 136, 0, 0.15);
  transform: translateY(-1px);
}
.profile-item--wide { grid-column: 1 / -1; }
.profile-item dt {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.profile-item dd {
  margin: 0;
  font-size: var(--fs-base);
  color: var(--c-text);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.profile-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-3);
}
.profile-empty-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.04);
  color: var(--c-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   user/referral.php — página "Indique e ganhe"
   ============================================================ */
.referral-page {
  display: grid;
  gap: var(--s-5);
  padding-bottom: 80px; /* espaço pra sticky CTA mobile */
}
.referral-page__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  align-items: start;
}
@media (min-width: 900px) {
  .referral-page__grid {
    grid-template-columns: minmax(0, 1.7fr) minmax(300px, 360px);
    gap: var(--s-5);
    align-items: center;
  }
  .referral-page__grid .referral-hero {
    text-align: left;
    margin: 0;
    max-width: none;
  }
}
.referral-hero {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.referral-hero .eyebrow {
  position: relative;
  z-index: 1;
}
.referral-hero__h1 {
  font-size: clamp(1.4rem, 2.8vw + 0.6rem, 2.1rem);
  margin: var(--s-2) 0 var(--s-3);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.referral-hero__h1 strong { color: var(--c-primary); }
.referral-hero__lead {
  font-size: var(--fs-base);
  color: var(--c-muted);
  line-height: 1.5;
}
.referral-hero__lead strong { color: var(--c-text); font-weight: 700; }

.referral-card {
  background: var(--c-white);
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  box-shadow: 0 6px 18px rgba(15, 25, 45, 0.06);
}
.referral-card__inner { display: grid; gap: var(--s-3); }
.referral-card__code-block {
  background: linear-gradient(135deg, #FFF8EC 0%, #FFE4BC 100%);
  border: 1.5px dashed var(--c-primary);
  border-radius: var(--r-md);
  padding: 14px 16px;
  text-align: center;
}
.referral-card__label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--c-primary-2);
  font-weight: 800;
}
/* Override aos corner brackets decorativos do app.css — versão compacta. */
.referral-card__code-wrap {
  display: block !important;
  padding: 6px 0 4px !important;
  text-align: center;
}
.referral-card__code-wrap::before,
.referral-card__code-wrap::after { display: none !important; }
.referral-card__code {
  display: inline-block;
  font-family: var(--f-mono);
  font-weight: 800;
  font-size: clamp(18px, 2vw + 0.6rem, 24px);
  letter-spacing: 0.05em;
  color: var(--c-primary);
  margin: 2px 0;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
  line-height: 1.1;
  outline-offset: 4px;
  border-radius: 4px;
}
.referral-card__code:hover { color: var(--c-primary-2); transform: scale(1.02); }
.referral-card__code:focus-visible { outline: 2px solid var(--c-primary); }
.referral-card__url-row {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.referral-card__url {
  flex: 1 1 100%;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-sm);
  background: #fff;
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--c-text);
  cursor: text;
  text-overflow: ellipsis;
  overflow: hidden;
}
.referral-card__url-btn {
  flex: 1 1 100%;
  padding: 9px 14px;
  border-radius: var(--r-sm);
  background: var(--c-text);
  color: #fff;
  border: 0;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
  min-height: 40px;
}
.referral-card__url-btn:hover { background: var(--c-primary); }
.referral-card__url-btn.copied { background: var(--c-field); }

/* ====== CTA WhatsApp GRANDE (mais chamativo) ====== */
.referral-share-wa {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color: #fff;
  border-radius: var(--r-md);
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
  box-shadow:
    0 10px 24px rgba(37, 211, 102, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  position: relative;
  overflow: hidden;
}
.referral-share-wa::after {
  /* Brilho diagonal sutil */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.10) 50%, transparent 60%);
  pointer-events: none;
}
.referral-share-wa:hover {
  transform: translateY(-2px);
  box-shadow:
    0 14px 32px rgba(37, 211, 102, 0.50),
    inset 0 1px 0 rgba(255, 255, 255, 0.20);
  color: #fff;
}
.referral-share-wa:active { transform: translateY(0); }
.referral-share-wa__icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  background: rgba(255, 255, 255, 0.20);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.referral-share-wa__icon svg { width: 28px; height: 28px; }
.referral-share-wa__txt {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}
.referral-share-wa__txt strong {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.referral-share-wa__txt small {
  font-size: 12px;
  opacity: 0.88;
  margin-top: 3px;
  font-weight: 500;
}

/* ====== Outros canais (só ícones, premium, com subtítulo) ====== */
.referral-share-extra {
  margin-top: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.referral-share-extra__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted);
  text-align: center;
}
.referral-share-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  max-width: 280px;
  margin: 0 auto;
}
.referral-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--c-line-2, #E5E7EB);
  color: var(--c-muted);
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--dur-fast) var(--ease),
    background var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}
.referral-share-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}
.referral-share-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(15, 25, 45, 0.10);
}
.referral-share-btn:active { transform: translateY(0); }
.referral-share-btn:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 3px;
}
/* Brand colors no hover (passa de cinza pra cor real da rede) */
.referral-share-btn--fb:hover { border-color: #1877F2; color: #1877F2; background: rgba(24, 119, 242, 0.05); }
.referral-share-btn--ig:hover { border-color: #E1306C; color: #E1306C; background: linear-gradient(135deg, rgba(245, 96, 64, 0.08), rgba(225, 48, 108, 0.08), rgba(193, 53, 132, 0.08)); }
.referral-share-btn--tt:hover { border-color: #000; color: #000; background: rgba(0, 0, 0, 0.04); }
.referral-share-btn--em:hover { border-color: var(--c-elite-purple, #7C3AED); color: var(--c-elite-purple, #7C3AED); background: rgba(124, 58, 237, 0.06); }

.referral-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
}
.referral-stat-card {
  background: #fff;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  text-align: center;
}
.referral-stat-card__icon { font-size: 28px; line-height: 1; margin-bottom: var(--s-2); }
.referral-stat-card__num {
  font-family: var(--f-display);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 800;
  color: var(--c-primary);
  line-height: 1;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.referral-stat-card--gold .referral-stat-card__num { color: var(--c-premium-gold-2, var(--c-final)); }
.referral-stat-card--milestone .referral-stat-card__num { color: var(--c-success-light, var(--c-field-2)); }
.referral-stat-card--milestone .referral-stat-card__num svg {
  display: inline-block;
  vertical-align: middle;
  stroke: currentColor;
}
.referral-stat-card__lbl {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  line-height: 1.3;
}

.referral-milestone-bar {
  width: 100%;
  height: 8px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 10px;
}
.referral-milestone-bar__fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--c-field) 0%, var(--c-field-2) 100%);
  border-radius: 999px;
  transition: width var(--dur-base) var(--ease);
}
.referral-milestone-bar__caption {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  margin-top: 6px;
  line-height: 1.3;
}
.referral-milestone-bar__caption strong { color: var(--c-field-2); font-weight: 800; }
.referral-milestone-bar__caption--done {
  color: var(--c-field-2);
  font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
  .referral-milestone-bar__fill { transition: none; }
}

.referral-how {
  background: var(--c-white);
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}
.referral-how h2 { font-size: var(--fs-xl); margin-top: 0; margin-bottom: var(--s-3); }
.referral-how__steps {
  list-style: none;
  counter-reset: refstep;
  padding: 0;
  margin: 0 0 var(--s-3) 0;
  display: grid;
  gap: var(--s-3);
}
.referral-how__steps li {
  counter-increment: refstep;
  padding-left: 42px;
  position: relative;
  font-size: var(--fs-base);
  line-height: 1.45;
}
.referral-how__steps li::before {
  content: counter(refstep);
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--c-primary);
  color: #fff;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.referral-how__micro { font-size: var(--fs-xs); color: var(--c-muted); margin: 0; }

.referral-bonus {
  background: linear-gradient(135deg, #FFF8EC 0%, #FFE4BC 100%);
  border: 1px solid #FFD89A;
  border-radius: var(--r-lg);
  padding: var(--s-5);
}
.referral-bonus__inner h3 { margin-top: 0; }
.referral-bonus__inner p { margin: 0; line-height: 1.5; }

.referral-leaderboard {
  background: var(--c-white);
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}
.referral-leaderboard h3 { margin-top: 0; }
.referral-leaderboard__empty {
  color: var(--c-muted);
  margin: 0;
  text-align: center;
  padding: var(--s-4) 0;
}
.referral-leaderboard__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
}
.referral-leaderboard__item {
  display: grid;
  grid-template-columns: 40px 28px 1fr auto;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: #f7f7f7;
  align-items: center;
}
.referral-leaderboard__pos { font-weight: 800; color: var(--c-muted); }
.referral-leaderboard__medal { font-size: 18px; line-height: 1; }
.referral-leaderboard__name { font-weight: 600; }
.referral-leaderboard__count { font-size: var(--fs-sm); color: var(--c-muted); }
.referral-leaderboard__count strong { color: var(--c-primary); font-weight: 800; }

.referral-sticky-wa {
  display: none;
  position: fixed;
  bottom: 16px;
  left: 16px;
  right: 16px;
  z-index: 50;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color: #fff;
  padding: 14px 18px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
  text-align: center;
  font-size: var(--fs-base);
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45);
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
}
.referral-sticky-wa span:first-child { font-size: 22px; }

@media (max-width: 700px) {
  .referral-stats { grid-template-columns: 1fr; }
  .referral-share-row { grid-template-columns: repeat(2, 1fr); }
  .referral-share-wa { flex-direction: column; text-align: center; }
  .referral-share-wa__txt { align-items: center; }
  .referral-sticky-wa { display: flex; }
}
@media (max-width: 460px) {
  .referral-card__code { font-size: clamp(22px, 9vw, 36px); }
}
@media (prefers-reduced-motion: reduce) {
  .referral-share-wa { transition: none; }
}

/* ============================================================
   public/legal.php — conteúdo de termos/regulamento/privacidade
   ============================================================ */
.legal-meta {
  font-size: var(--fs-sm);
  color: var(--c-muted);
  margin: 0 0 var(--s-2);
}
.legal-content {
  margin-top: var(--s-4);
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--c-text);
}
.legal-content h1 { font-size: var(--fs-2xl); margin: var(--s-6) 0 var(--s-3); }
.legal-content h2 { font-size: var(--fs-xl); margin: var(--s-5) 0 var(--s-2); color: var(--c-primary); }
.legal-content h3 { font-size: var(--fs-lg); margin: var(--s-4) 0 var(--s-2); }
.legal-content table { border-collapse: collapse; margin: var(--s-3) 0; }
.legal-content table th,
.legal-content table td { border: 1px solid var(--c-line); padding: 8px 12px; }
.legal-content blockquote {
  border-left: 4px solid var(--c-accent);
  padding: var(--s-3) var(--s-4);
  background: rgba(255, 214, 10, 0.10);
  margin: var(--s-4) 0;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.legal-content code {
  background: var(--c-light);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--f-mono);
  font-size: 0.9em;
}
.legal-content ul,
.legal-content ol { margin: var(--s-2) 0 var(--s-3) var(--s-4); }

/* ============================================================
   public/home.php — hero social proof
   ============================================================ */
.hero-social-proof {
  display: flex;
  justify-content: center;
  margin-top: var(--s-5);
}

/* ============================================================
   public/premios.php — bloco de cupom
   ============================================================ */
@media (min-width: 700px) {
  .premios-coupon-block {
    grid-template-columns: 2fr 1fr;
    padding: var(--s-6);
  }
}

/* ============================================================
   public/ranking.php — barra sticky com posição do usuário
   ============================================================ */
.ranking-sticky-pos {
  position: sticky;
  top: 0;
  z-index: 4;
  background: linear-gradient(90deg, var(--c-primary) 0%, var(--c-primary-2) 100%);
  color: #fff;
  padding: 10px 0;
}
.ranking-sticky-pos__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.ranking-sticky-pos__txt {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.ranking-sticky-pos__eyebrow {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  opacity: 0.85;
  font-weight: 700;
}
.ranking-sticky-pos__num {
  font-family: var(--f-display);
  font-size: var(--fs-xl);
  font-weight: 800;
}
.ranking-sticky-pos__sub { font-size: var(--fs-sm); opacity: 0.85; }
.ranking-sticky-pos .btn--outline {
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.40);
}
.ranking-sticky-pos .btn--outline:hover { background: rgba(255, 255, 255, 0.20); }

/* ============================================================
   public/ranking.php — header + cards (polidos 2026-05-27)
   Inspirado em /indicar (referral-hero): tipografia compacta,
   espaçamentos consistentes com /minha-area, hierarquia clara.
   ============================================================ */
.ranking-hero {
  margin-bottom: var(--s-4);
}
.ranking-hero__h1 {
  font-size: clamp(1.4rem, 2.5vw + 0.6rem, 2.1rem);
  margin: var(--s-2) 0 var(--s-3);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.ranking-hero__h1 strong { color: var(--c-primary); }
.ranking-hero__lead {
  font-size: var(--fs-base);
  color: var(--c-muted);
  line-height: 1.5;
  margin-bottom: 0;
}

/* Card de aviso "ranking abre depois do 1º jogo" */
.ranking-notice {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  background: linear-gradient(135deg, #FFFBF2 0%, #FFF3DC 100%);
  border: 1px solid rgba(255, 136, 0, 0.18);
  border-radius: var(--r-lg);
  padding: var(--s-3) var(--s-4);
  margin-top: var(--s-4);
  box-shadow: 0 2px 8px rgba(15, 25, 45, 0.04);
}
.ranking-notice__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--c-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ranking-notice__body { min-width: 0; flex: 1; }
.ranking-notice__h3 {
  font-size: var(--fs-lg);
  font-weight: 700;
  font-family: var(--f-display);
  color: var(--c-text);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.ranking-notice__p {
  font-size: var(--fs-sm);
  color: var(--c-text);
  margin: 0 0 6px;
  line-height: 1.5;
}
.ranking-notice__p:last-child { margin-bottom: 0; }
.ranking-notice__meta {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  margin: 0;
  line-height: 1.5;
}

/* Card "Sua posição" (logado e fora do top 100) — refinado */
.ranking-myposition {
  background: linear-gradient(120deg, var(--c-primary) 0%, var(--c-primary-2) 100%);
  color: #fff;
  border-radius: var(--r-lg);
  padding: var(--s-3) var(--s-4);
  margin-top: var(--s-4);
  box-shadow: 0 4px 16px rgba(255, 136, 0, 0.18);
}
.ranking-myposition__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.ranking-myposition__col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ranking-myposition__col--right { text-align: right; align-items: flex-end; }
.ranking-myposition__label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 700;
}
.ranking-myposition__num {
  font-family: var(--f-display);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  color: #fff;
  line-height: 1.05;
}
.ranking-myposition__sub {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.3;
}

/* Espaçamentos: container interno da view publica */
.ranking-section { padding-top: var(--s-5); padding-bottom: var(--s-5); }
.ranking-table-wrap--spaced { margin-top: var(--s-4); }
.ranking-lead--spaced { margin-top: var(--s-3); margin-bottom: 0; }
.ranking-footnote {
  margin-top: var(--s-4);
  font-size: var(--fs-xs);
  color: var(--c-muted);
  text-align: center;
  line-height: 1.5;
}

/* tf-banner herdado: respiro do bloco anterior */
.ranking-section .tf-banner { margin-top: var(--s-5); }


/* ============================================================
   public/premios.php — bloco cupom Trocafone
   ============================================================ */
.premios-coupon-block {
  background: linear-gradient(135deg, #FFF8EC 0%, #FFEAC8 100%);
  border: 1px solid rgba(255, 136, 0, 0.18);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  margin-top: var(--s-5);
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
  align-items: center;
  box-shadow: 0 4px 16px rgba(255, 136, 0, 0.08);
}
@media (min-width: 720px) {
  .premios-coupon-block {
    grid-template-columns: 1.4fr 1fr;
    padding: var(--s-5);
  }
}
.premios-coupon-block__h3 { margin: var(--s-2) 0; font-size: var(--fs-lg); letter-spacing: -0.01em; }
.premios-coupon-block__p { color: var(--c-muted); margin: 0; line-height: 1.5; }
.premios-coupon-block__code {
  text-align: center;
  background: #fff;
  border: 2px dashed var(--c-primary);
  border-radius: var(--r-md);
  padding: var(--s-4);
}
.premios-coupon-block__code-label {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-weight: 700;
  margin-bottom: 6px;
}
.premios-coupon-block__code-value {
  font-family: var(--f-mono);
  font-size: clamp(20px, 5vw, 28px);
  font-weight: 800;
  color: var(--c-primary);
  letter-spacing: 0.10em;
  word-break: break-all;
}
.premios-coupon-block__code-blur {
  position: relative;
  line-height: 1;
  min-height: 32px;
}
.premios-coupon-block__code-value--blurred {
  filter: blur(8px);
  user-select: none;
  pointer-events: none;
}
.premios-coupon-block__code-lock {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--c-text);
  font-size: var(--fs-xs);
  font-weight: 700;
}

/* ============================================================
   public/faq.php — perguntas + bloco de contato
   ============================================================ */
.faq-stack {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.faq-item {
  background: var(--c-white);
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.faq-item:hover { border-color: var(--c-primary); box-shadow: var(--sh-sm); }
.faq-item[open] {
  border-color: var(--c-primary);
  box-shadow: var(--sh-sm);
}
.faq-item__summary {
  font-weight: 700;
  font-family: var(--f-display);
  font-size: var(--fs-base);
  color: var(--c-text);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  line-height: 1.4;
  letter-spacing: -0.005em;
}
.faq-item__summary::-webkit-details-marker { display: none; }
.faq-item__toggle {
  color: var(--c-primary);
  font-size: var(--fs-2xl);
  line-height: 1;
  font-weight: 800;
  flex-shrink: 0;
  transition: transform var(--dur-base) var(--ease);
}
.faq-item[open] .faq-item__toggle { transform: rotate(45deg); }
.faq-item__body {
  margin-top: var(--s-3);
  color: var(--c-text);
  font-size: var(--fs-base);
  line-height: 1.6;
}
.faq-item__body p { margin-bottom: var(--s-2); }
.faq-item__body p:last-child { margin-bottom: 0; }
.faq-item__body a { color: var(--c-primary); }

.faq-contact {
  background: var(--c-light);
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5);
  margin-top: var(--s-5);
  text-align: center;
}
.faq-contact__h3 {
  font-size: var(--fs-lg);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.faq-contact__p {
  color: var(--c-muted);
  margin: 0;
  font-size: var(--fs-sm);
}
.faq-contact__p a { color: var(--c-primary); font-weight: 700; }

/* ============================================================
   public/como_funciona.php — callout "Bônus instantâneo"
   ============================================================ */
.como-funciona-callout {
  background: linear-gradient(135deg, #FFFBF2 0%, #FFEFD4 100%);
  border: 1px solid rgba(255, 136, 0, 0.18);
  border-left: 4px solid var(--c-primary);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-5);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--c-text);
  box-shadow: 0 2px 8px rgba(15, 25, 45, 0.04);
}


/* ============================================================
   user/score.php — página "Minha pontuação"
   ============================================================ */

/* ============================================== */
/*  HERO + POSIÇÃO                                 */
/* ============================================== */
.score-hero { margin-bottom: var(--s-5); }
.score-hero__title {
  font-size: clamp(1.5rem, 4vw + 1rem, 2.4rem);
  margin-bottom: var(--s-2);
  font-family: var(--f-display);
  letter-spacing: -0.02em;
}

.score-rankbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-top: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-md);
  background: linear-gradient(135deg, rgba(15, 62, 153, 0.06) 0%, rgba(255, 136, 0, 0.06) 100%);
  border: 1px solid rgba(15, 62, 153, 0.12);
  box-shadow: var(--sh-md);
}
.score-rankbar__rank {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.score-rankbar__rank-label {
  color: var(--c-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.score-rankbar__rank-pos {
  font-family: var(--f-display);
  font-size: clamp(2rem, 5vw + 0.5rem, 2.8rem);
  font-weight: 800;
  color: var(--c-accent);
  letter-spacing: -0.03em;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.score-rankbar__rank-pos small {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text);
  text-transform: lowercase;
  letter-spacing: 0;
}
.score-rankbar__rank-suffix {
  font-size: var(--fs-sm);
  color: var(--c-muted);
  font-weight: 500;
}
.score-rankbar__pill {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--c-primary) 0%, #FF7A00 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(255, 136, 0, 0.25);
  /* Pulse muito sutil: chama o olho sem irritar quem fica na tela */
  animation: pill-pulse 2.4s var(--ease) infinite;
}
@keyframes pill-pulse {
  0%, 100% { box-shadow: 0 4px 12px rgba(255, 136, 0, 0.25); }
  50%      { box-shadow: 0 4px 18px rgba(255, 136, 0, 0.45); }
}
.score-rankbar__pill-value {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--fs-xl);
  letter-spacing: -0.02em;
  line-height: 1;
}
.score-rankbar__pill-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.92;
  margin-top: 2px;
}
.score-rankbar--waiting {
  background: rgba(0, 0, 0, 0.03);
  border: 1px dashed rgba(0, 0, 0, 0.10);
  box-shadow: none;
  color: var(--c-muted);
  justify-content: flex-start;
  gap: var(--s-3);
}
.score-rankbar__waiting-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-muted);
}

/* ============================================== */
/*  B) SUMMARY (realizado + potencial)             */
/* ============================================== */
.score-summary {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}

/* desktop: 2 colunas (~65% × ~35%) */
@media (min-width: 820px) {
  .score-summary {
    grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
  }
}

/* ----- B.1 main (realizado, DESTAQUE) ----- */
.score-summary__main {
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, #FFFEFC 0%, #FFF4E2 100%);
  border-color: #FFD89A;
}
.score-summary__main::before {
  content: '';
  position: absolute;
  top: -20%; right: -10%;
  width: 60%; height: 140%;
  background: radial-gradient(ellipse at center, rgba(255, 136, 0, 0.10), transparent 60%);
  pointer-events: none;
}
.score-summary__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
  position: relative;
  z-index: 1;
}
.score-summary__head-title {
  margin: 0;
  font-size: var(--fs-lg);
  font-family: var(--f-display);
  font-weight: 800;
  color: var(--c-text);
}
.score-summary__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.score-summary__pill--done {
  background: rgba(57, 157, 37, 0.12);
  color: var(--c-field-2);
  border: 1px solid rgba(57, 157, 37, 0.25);
}
.score-summary__pill-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-field-2);
}

.score-summary__big {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: var(--s-4);
  position: relative;
  z-index: 1;
}
.score-summary__big-value {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(3rem, 8vw + 1rem, 4.5rem);
  letter-spacing: -0.04em;
  line-height: 0.95;
  /* Fallback sólido: se o browser não suportar background-clip:text, o número
     aparece em laranja Trocafone sólido em vez de invisível (Safari <15, etc). */
  color: var(--c-primary);
  background: linear-gradient(135deg, var(--c-primary) 0%, #E05300 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.score-summary__big-unit {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--fs-xl);
  color: var(--c-primary);
  text-transform: lowercase;
}

/* Lista de phases (group, knockout, final, bracket) */
.score-phase-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  position: relative;
  z-index: 1;
}
.score-phase {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
}
.score-phase:last-child { border-bottom: 0; }
.score-phase__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
}
.score-phase__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--phase-color, var(--c-primary)) 12%, transparent);
  color: var(--phase-color, var(--c-primary));
}
.score-phase__label {
  font-weight: 700;
  color: var(--c-text);
  font-size: var(--fs-base);
}
.score-phase__nums {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--f-display);
  white-space: nowrap;
}
.score-phase__nums strong {
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--phase-color, var(--c-primary));
  letter-spacing: -0.02em;
}
.score-phase__nums small {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  font-weight: 600;
}
.score-phase__bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(15, 25, 45, 0.06);
  overflow: hidden;
}
.score-phase__bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--phase-color, var(--c-primary)) 0%, color-mix(in srgb, var(--phase-color, var(--c-primary)) 70%, #fff) 100%);
  transition: width var(--dur-base) var(--ease);
}
.score-phase-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  color: var(--c-muted);
  font-size: var(--fs-sm);
  text-align: center;
  padding: var(--s-5) var(--s-3);
  border: 1px dashed rgba(0, 0, 0, 0.10);
  border-radius: var(--r-md);
  background: rgba(0, 0, 0, 0.015);
}
.score-phase-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-muted);
  opacity: 0.45;
}
.score-phase-empty__text {
  max-width: 38ch;
  line-height: 1.45;
}

/* ----- B.2 future (potencial, MAIS SUTIL) ----- */
.score-summary__future {
  background: rgba(0, 0, 0, 0.015);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: none;
}
.score-summary__future-title {
  margin: 0 0 var(--s-2);
  font-size: var(--fs-base);
  color: var(--c-muted);
  font-weight: 700;
  letter-spacing: 0;
  font-family: var(--f-display);
}
.score-summary__future-value {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: var(--s-3);
}
.score-summary__future-prefix {
  font-size: var(--fs-sm);
  color: var(--c-muted);
  font-weight: 600;
}
.score-summary__future-number {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 4vw + 0.5rem, 2.4rem);
  color: var(--c-text);
  letter-spacing: -0.03em;
  line-height: 1;
}
.score-summary__future-unit {
  font-size: var(--fs-sm);
  color: var(--c-muted);
  font-weight: 600;
}
.score-summary__future-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.score-summary__future-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
}
.score-summary__future-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
}
.score-summary__future-name {
  color: var(--c-text);
  font-weight: 500;
}
.score-summary__future-pts {
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--c-text);
  font-size: var(--fs-sm);
  white-space: nowrap;
}
.score-summary__future-empty {
  color: var(--c-muted);
  font-size: var(--fs-sm);
  font-style: italic;
}
.score-summary__future-caption {
  margin: var(--s-3) 0 0;
  padding-top: var(--s-3);
  border-top: 1px dashed rgba(0, 0, 0, 0.08);
  font-size: var(--fs-xs);
  color: var(--c-muted);
  font-style: italic;
}

/* ============================================== */
/*  C) Botão "Como funciona"                       */
/* ============================================== */
.score-howworks-cta {
  margin: var(--s-4) 0 var(--s-6);
  display: flex;
  justify-content: center;
}
.score-howworks-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  border-radius: var(--r-pill);
  padding: 10px 20px;
}
.score-howworks-btn__icon {
  display: inline-flex;
  align-items: center;
  color: var(--c-primary);
}

/* ============================================== */
/*  D) DETALHAMENTO POR JOGO                       */
/* ============================================== */
.score-detail { margin-top: var(--s-6); }
.score-detail__head {
  margin-bottom: var(--s-4);
}
.score-detail__head h2 {
  margin: 0 0 4px;
  font-size: clamp(1.2rem, 2.5vw + 0.8rem, 1.6rem);
  font-family: var(--f-display);
}
.score-detail__head p {
  margin: 0;
  font-size: var(--fs-sm);
}

.score-detail__group {
  margin-bottom: var(--s-6);
}
.score-detail__group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 2px solid color-mix(in srgb, var(--phase-color, var(--c-primary)) 30%, transparent);
}
.score-detail__group-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--phase-color, var(--c-primary)) 14%, transparent);
  color: var(--phase-color, var(--c-primary));
}
.score-detail__group-title {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--c-text);
  flex: 1;
}
.score-detail__group-count {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.score-detail__empty {
  padding: var(--s-6) var(--s-4);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  border: 1.5px dashed rgba(0, 0, 0, 0.12);
  background: rgba(0, 0, 0, 0.015);
}
.score-detail__empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-muted);
  opacity: 0.45;
}
.score-detail__empty-text {
  margin: 0;
  max-width: 44ch;
  font-size: var(--fs-base);
  line-height: 1.5;
}

/* NOTA: o bloco .breakdown-* foi migrado para public/assets/css/app.css
   (seção "BREAKDOWN CARDS (dashboard + score)"). Não duplicar aqui. */

/* ============================================== */
/*  D) TABS por fase (Grupos / Mata-mata / Bracket / Indicações) */
/* ============================================== */
.score-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: var(--s-4) 0 var(--s-4);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding-bottom: 0;
}
.score-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--c-muted);
  font-weight: 700;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  font-family: inherit;
  position: relative;
  bottom: -1px;
  white-space: nowrap;
}
.score-tab:hover { color: var(--c-text); }
.score-tab.is-active {
  color: var(--c-text);
  border-bottom-color: var(--c-primary);
}
.score-tab__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
}
.score-tab__pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  font-family: var(--f-mono, monospace);
}
.score-tab__pill--idle    { background: rgba(0, 0, 0, 0.06); color: var(--c-muted); }
.score-tab__pill--partial { background: rgba(255, 136, 0, 0.14); color: var(--c-primary-2, #E07300); }
.score-tab__pill--full    { background: rgba(57, 157, 37, 0.15); color: var(--c-field-2, #2A7A1A); }
.score-tab:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
  border-radius: var(--r-sm, 4px);
}

.score-tab-panel { display: none; }
.score-tab-panel.is-active { display: block; }

/* Banner de subtotal por fase, dentro da tab */
.score-phase-summary {
  margin-bottom: var(--s-4);
  padding: 12px 16px;
  border-left: 4px solid var(--phase-color, var(--c-primary));
  background: color-mix(in srgb, var(--phase-color, var(--c-primary)) 6%, transparent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: var(--fs-sm);
  color: var(--c-text);
  line-height: 1.5;
}
.score-phase-summary strong { font-weight: 800; }
.score-phase-summary__gained {
  font-family: var(--f-display);
  color: var(--phase-color, var(--c-primary));
  font-size: 1.25em;
  letter-spacing: -0.01em;
}
.score-phase-summary small { color: var(--c-muted); font-weight: 600; }

/* Acordeons (grupos da fase de grupos, fases do mata-mata) */
.score-groups-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.score-group {
  background: #fff;
  border: 1px solid var(--c-line-2, #eee);
  border-radius: var(--r-md, 8px);
  overflow: hidden;
  transition: box-shadow var(--dur-base) var(--ease);
}
.score-group[open] { box-shadow: var(--sh-md); }
.score-group__summary {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(140px, 0.8fr) auto;
  gap: var(--s-3);
  align-items: center;
  padding: 14px var(--s-4);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background var(--dur-fast) var(--ease);
}
.score-group__summary::-webkit-details-marker { display: none; }
.score-group__summary:hover { background: rgba(255, 136, 0, 0.04); }
.score-group__summary:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: -2px;
}
.score-group__letter {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--fs-lg);
  color: var(--c-text);
  letter-spacing: -0.01em;
}
.score-group__caption {
  font-size: var(--fs-sm);
  color: var(--c-muted);
  font-weight: 600;
}
.score-group__caption strong {
  color: var(--c-primary, #FF8800);
  font-weight: 800;
  font-family: var(--f-display);
}
.score-group__caption small {
  font-size: var(--fs-xs);
  margin-left: 4px;
  font-weight: 600;
}
.score-group__progress {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.score-group__progress-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--c-primary) 0%, var(--c-primary-2) 100%);
  border-radius: 999px;
  transition: width var(--dur-base) var(--ease);
}
.score-group__chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-muted);
  width: 28px; height: 28px;
  transition: transform var(--dur-base) var(--ease);
}
.score-group[open] .score-group__chev { transform: rotate(180deg); }
.score-group__matches {
  padding: var(--s-4);
  border-top: 1px solid var(--c-line, #E3E4E6);
  background: rgba(0, 0, 0, 0.015);
}

/* Mobile: layout do summary stackeia em 2 linhas */
@media (max-width: 700px) {
  .score-group__summary {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "letter chev"
      "caption caption"
      "progress progress";
    row-gap: 6px;
  }
  .score-group__letter   { grid-area: letter;   }
  .score-group__caption  { grid-area: caption;  }
  .score-group__progress { grid-area: progress; }
  .score-group__chev     { grid-area: chev;     }
}

/* ============================================== */
/*  D2) Indicações (lista de eventos referral)     */
/* ============================================== */
.score-referral-progress {
  background: linear-gradient(135deg, rgba(57, 157, 37, 0.08) 0%, rgba(57, 157, 37, 0.02) 100%);
  border: 1px solid rgba(57, 157, 37, 0.20);
  border-radius: var(--r-md, 8px);
  padding: var(--s-4);
  margin-bottom: var(--s-4);
}
.score-referral-progress__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: 10px;
}
.score-referral-progress__count {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--fs-lg);
  color: var(--c-field-2, #2A7A1A);
}
.score-referral-progress__caption {
  font-size: var(--fs-sm);
  color: var(--c-text);
}
.score-referral-progress__caption strong { color: var(--c-field-2, #2A7A1A); font-weight: 800; }
.score-referral-progress__bar {
  height: 10px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  overflow: hidden;
}
.score-referral-progress__fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--c-field, #399D25) 0%, var(--c-field-2, #2A7A1A) 100%);
  border-radius: 999px;
  transition: width var(--dur-base) var(--ease);
}

.score-referral-list-title {
  margin: var(--s-5) 0 var(--s-3);
  font-size: var(--fs-lg);
  font-family: var(--f-display);
  font-weight: 800;
}
.score-referral-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.score-referral-item {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: var(--s-3);
  align-items: center;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--c-line-2, #eee);
  border-radius: var(--r-md, 8px);
  font-size: var(--fs-sm);
}
.score-referral-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(57, 157, 37, 0.12);
  color: var(--c-field-2, #2A7A1A);
}
.score-referral-item__label { color: var(--c-text); font-weight: 600; }
.score-referral-item__date  { color: var(--c-muted); font-size: var(--fs-xs); }
.score-referral-item__pts {
  font-family: var(--f-mono, monospace);
  font-weight: 800;
  color: var(--c-field-2, #2A7A1A);
  background: rgba(57, 157, 37, 0.10);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: var(--fs-xs);
}
@media (max-width: 560px) {
  .score-referral-item {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "icon label pts"
      "icon date pts";
    row-gap: 2px;
  }
  .score-referral-item__icon  { grid-area: icon; align-self: center; }
  .score-referral-item__label { grid-area: label; }
  .score-referral-item__date  { grid-area: date; }
  .score-referral-item__pts   { grid-area: pts; align-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  .score-group__chev { transition: none; }
  .score-group__progress-fill,
  .score-referral-progress__fill { transition: none; }
}

/* ============================================== */
/*  MODAL: como funciona                          */
/* ============================================== */
.score-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  overflow: hidden;
}
.score-modal[hidden] { display: none; }
.score-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 25, 45, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  animation: scoreModalFade var(--dur-base) var(--ease) forwards;
}
.score-modal__panel {
  position: relative;
  background: #fff;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -20px 60px rgba(15, 25, 45, 0.25);
  transform: translateY(40px);
  opacity: 0;
  animation: scoreModalSlide var(--dur-base) var(--ease) forwards;
}
@media (min-width: 720px) {
  .score-modal { align-items: center; padding: var(--s-5); }
  .score-modal__panel { border-radius: var(--r-lg); max-height: 85vh; }
}
@keyframes scoreModalFade { to { opacity: 1; } }
@keyframes scoreModalSlide { to { transform: translateY(0); opacity: 1; } }

.score-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-5) var(--s-3);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.score-modal__title {
  margin: 2px 0 0;
  font-family: var(--f-display);
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--c-text);
  letter-spacing: -0.02em;
}
.score-modal__subtitle {
  margin: 4px 0 0;
  font-size: var(--fs-sm);
}
.score-modal__close {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--c-muted);
  flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.score-modal__close:hover {
  background: var(--c-fire);
  color: #fff;
  border-color: var(--c-fire);
  transform: rotate(90deg);
}
.score-modal__close:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}
.score-modal__body {
  padding: var(--s-4) var(--s-5);
  overflow: auto;
  flex: 1;
}
.score-modal__foot {
  padding: var(--s-3) var(--s-5);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  background: rgba(0, 0, 0, 0.015);
}
.score-modal__link {
  color: var(--c-primary);
  font-weight: 700;
  font-size: var(--fs-sm);
  text-decoration: none;
}
.score-modal__link:hover { text-decoration: underline; }

/* ============================================== */
/*  Tabela de regras (dentro do modal)             */
/* ============================================== */
.score-rules { width: 100%; border-collapse: collapse; }
.score-rules th, .score-rules td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.score-rules th {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  color: var(--c-muted);
  letter-spacing: 0.06em;
  font-weight: 800;
}
.score-rules td.num, .score-rules th.num { text-align: right; min-width: 90px; }
.score-rules tbody tr.score-rules-row:nth-child(odd) td { background: rgba(0, 0, 0, 0.015); }
.score-rules tbody tr.score-rules-row:hover td {
  background: rgba(255, 136, 0, 0.08);
  color: var(--c-text);
}
.score-rules tbody tr.score-rules-row { transition: background var(--dur-fast) var(--ease); cursor: help; }
.score-rules-section td {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--phase-color, var(--c-primary)) 14%, transparent),
    color-mix(in srgb, var(--phase-color, var(--c-primary)) 3%, transparent));
  font-family: var(--f-display);
  font-weight: 800;
  color: var(--c-text);
  padding-top: 14px;
  padding-bottom: 14px;
  font-size: var(--fs-sm);
  border-bottom: 2px solid color-mix(in srgb, var(--phase-color, var(--c-primary)) 30%, transparent);
  letter-spacing: 0.02em;
}
.score-rules-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-right: 8px;
  color: var(--phase-color, var(--c-primary));
}
.score-rules-section-label { vertical-align: middle; }
.score-rules-pts {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 136, 0, 0.10);
  color: var(--c-primary);
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--fs-sm);
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.score-rules-row:hover .score-rules-pts {
  background: var(--c-primary);
  color: #fff;
  transform: scale(1.05);
}

/* ============================================== */
/*  Tabela de regras — adapta para mobile (<640px) */
/*  Solução CSS-only: cada <tr> vira card flex.    */
/*  Headers de fase continuam destacados.          */
/* ============================================== */
@media (max-width: 639px) {
  .score-modal__body { padding: var(--s-3) var(--s-4); }
  .score-rules,
  .score-rules thead,
  .score-rules tbody,
  .score-rules tr,
  .score-rules td,
  .score-rules th { display: block; width: 100%; }
  /* esconde o cabeçalho (Tipo de acerto | Pontos) — redundante no formato card */
  .score-rules thead { position: absolute; left: -9999px; }
  /* row regra = card empilhado horizontal (label esq, pts dir) */
  .score-rules tbody tr.score-rules-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    padding: 10px var(--s-3);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }
  .score-rules tbody tr.score-rules-row td {
    padding: 0;
    border: 0;
    background: transparent !important;
  }
  .score-rules tbody tr.score-rules-row td:first-child {
    flex: 1; min-width: 0;
    font-size: var(--fs-sm);
    line-height: 1.35;
  }
  .score-rules tbody tr.score-rules-row td.num { flex-shrink: 0; min-width: auto; }
  /* Headers de fase — full-width banner, mantém o destaque visual */
  .score-rules tr.score-rules-section td {
    padding: 12px var(--s-3);
    border-radius: var(--r-sm);
    margin-top: var(--s-3);
  }
  .score-rules tr.score-rules-section:first-child td { margin-top: 0; }
}

/* ============================================== */
/*  RESPONSIVE TWEAKS                              */
/* ============================================== */
@media (max-width: 560px) {
  .score-rankbar {
    padding: var(--s-3) var(--s-4);
  }
  .score-rankbar__pill { padding: 8px 14px; }
  .score-rankbar__pill-value { font-size: var(--fs-lg); }
}

@media (prefers-reduced-motion: reduce) {
  .score-phase__bar-fill { transition: none !important; }
  .score-modal__backdrop,
  .score-modal__panel { animation: none !important; opacity: 1 !important; transform: none !important; }
  /* Desliga o pulse da pílula — comportamento opt-in p/ acessibilidade */
  .score-rankbar__pill { animation: none !important; }
}


/* ============================================================
   user/dashboard.php — minha-área (página inicial logada)
   ============================================================ */

/* ====== Dashboard CTA (countdown card) — gradient suave ====== */
.dashboard-cta {
  background: linear-gradient(135deg, #FFF8EC 0%, #FFE4BC 100%);
  border-color: #FFD89A;
  position: relative;
  overflow: hidden;
}
.dashboard-cta::before {
  content: '';
  position: absolute;
  top: -50%; right: -10%;
  width: 50%; height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.45), transparent 65%);
  pointer-events: none;
}
.dashboard-cta-icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.6);
  color: var(--c-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(255, 136, 0, 0.18);
  position: relative;
  z-index: 1;
}

/* Section icon helpers (h3 com SVG na frente) */
.dashboard-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 8px;
  background: rgba(255, 136, 0, 0.10);
  color: var(--c-primary);
}

/* NOTA: o bloco .breakdown-* foi migrado para public/assets/css/app.css
   (seção "BREAKDOWN CARDS (dashboard + score)"). Não duplicar aqui. */

/* Atalhos com hover lifting + ícones SVG suaves */
.dashboard-shortcut {
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.dashboard-shortcut:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-lg);
}
.dashboard-shortcut .card-icon { color: var(--c-primary); }
.dashboard-shortcut .card-icon--gold svg { color: var(--c-final); }
.dashboard-shortcut .card-icon--field svg { color: var(--c-field-2); }

/* ====== Cupom expandido (bloco grande no dashboard) ====== */
.dashboard-coupon-block {
  background: linear-gradient(135deg, #FFF8EC 0%, #FFE4BC 100%);
  border: 1px solid #FFD89A;
  border-radius: var(--r-lg, 12px);
  padding: var(--s-5);
  position: relative;
  overflow: hidden;
}
/* Variantes premium movidas para public/assets/css/app.css (marketing polish v2) */
.dashboard-coupon-block__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-4);
  align-items: center;
}
.dashboard-coupon-block__eyebrow {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-primary-2, #E05300);
  font-weight: 800;
}
.dashboard-coupon-block__h3 { margin: 6px 0 8px; font-size: var(--fs-lg); }
.dashboard-coupon-block__lead { margin: 0; font-size: var(--fs-sm); color: var(--c-text); line-height: 1.4; }
.dashboard-coupon-block__lead strong { color: var(--c-primary, #FF8800); font-weight: 800; }
.dashboard-coupon-block__bonus { margin: 8px 0 0; font-size: var(--fs-sm); color: var(--c-field, #2A8C45); }
.dashboard-coupon-block__bonus strong { font-weight: 800; }
.dashboard-coupon-block__code {
  display: block;
  font-family: var(--f-mono, monospace);
  font-weight: 800;
  font-size: clamp(20px, 4vw, 28px);
  letter-spacing: 0.08em;
  color: var(--c-primary, #FF8800);
  background: #fff;
  border: 2px dashed var(--c-primary, #FF8800);
  border-radius: var(--r-md, 8px);
  padding: 10px 18px;
  margin-bottom: 8px;
  text-align: center;
  cursor: pointer;
}
.dashboard-coupon-block__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.dashboard-coupon-block__actions .btn { flex: 1; min-width: 120px; justify-content: center; }
@media (max-width: 600px) {
  .dashboard-coupon-block__inner { grid-template-columns: 1fr; }
}

/* ====== Recomendados ====== */
.dashboard-reco__card {
  position: relative;
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.dashboard-reco__card:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); }
.dashboard-reco__tag {
  display: inline-block;
  font-size: var(--fs-xs);
  background: rgba(255, 136, 0, 0.12);
  color: var(--c-primary-2, #E05300);
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 700;
  margin-bottom: 4px;
}
.dashboard-reco__name strong { font-size: var(--fs-base); line-height: 1.25; display: block; }
.dashboard-reco__price { font-size: var(--fs-base); color: var(--c-text); margin-top: 4px; }
.dashboard-reco__price strong { font-size: var(--fs-lg); color: var(--c-primary, #FF8800); font-weight: 800; }
.dashboard-reco__price-was {
  text-decoration: line-through;
  color: var(--c-muted);
  font-size: var(--fs-sm);
  margin-right: 6px;
}
.dashboard-reco__cta {
  font-size: var(--fs-sm);
  color: var(--c-primary, #FF8800);
  font-weight: 700;
  margin-top: auto;
}
/* Fallback elegante quando preço não foi scrapeado ainda */
.dashboard-reco__price-fallback {
  font-size: var(--fs-sm);
  color: var(--c-muted);
  font-style: italic;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.dashboard-reco__card--no-price .dashboard-reco__thumb {
  background: linear-gradient(135deg, #f8f9fb 0%, #eef1f5 100%);
}
@media (max-width: 700px) {
  .dashboard-reco__grid { grid-template-columns: 1fr; }
}


/* ============================================================
   user/predictions_v2.php — palpites (grupos + bracket + pódio)
   ============================================================ */

.preds-header-row {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  flex-direction: row;
}
@media (max-width: 600px) {
  .preds-header-row { flex-direction: column-reverse; gap: var(--s-3); }
  .preds-header-row > div:first-child { width: 100%; }
}
.preds-toolbar {
  display: flex; gap: var(--s-3); margin-top: var(--s-3);
  flex-wrap: wrap; align-items: center; justify-content: space-between;
  padding-top: var(--s-3); border-top: 1px solid var(--c-line);
}
@media (min-width: 700px) { .preds-toolbar { margin-top: var(--s-4); } }

/* ====== Widget voador de progresso (sticky on scroll) — PREMIUM ======
   Vidro premium (backdrop-blur), gradient no ring, ripple no click, pulse no update.
   Estado inicial: oculto. Quando #preds-header sai do viewport, JS aplica .is-visible.
   Animação de entrada: translateY(8px → 0) + opacity 0 → 1 em 280ms. */
.preds-floating {
  position: fixed;
  top: 72px;
  right: 14px;
  z-index: 950;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 8px;
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border: 1.5px solid rgba(255, 136, 0, 0.50);
  border-radius: 999px;
  box-shadow:
    0 8px 24px rgba(255, 136, 0, 0.25),
    0 2px 6px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  cursor: pointer;
  font-family: var(--f-display);
  color: var(--c-text);
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  transition: opacity .28s var(--ease), transform .28s var(--ease), box-shadow .25s var(--ease), background .2s var(--ease);
  pointer-events: none;
  min-height: 44px;
  overflow: hidden; /* ripple */
  -webkit-tap-highlight-color: transparent;
}
.preds-floating.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.preds-floating[hidden] { display: none; }
.preds-floating:hover {
  background: rgba(255, 255, 255, 0.92);
  transform: translateY(0) scale(1.04);
  box-shadow:
    0 12px 32px rgba(255, 136, 0, 0.32),
    0 3px 8px rgba(0, 0, 0, 0.08);
  border-color: var(--c-primary);
}
.preds-floating:active { transform: translateY(0) scale(0.98); }
.preds-floating:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 4px rgba(255, 136, 0, 0.30),
    0 8px 24px rgba(255, 136, 0, 0.25);
}
/* Pulse quando o progresso muda (JS aplica .is-pulsing por 800ms) */
.preds-floating.is-pulsing .preds-floating-ring::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--c-primary);
  animation: floating-pulse .8s var(--ease) forwards;
}
@keyframes floating-pulse {
  0%   { opacity: 0.7; transform: scale(0.7); }
  100% { opacity: 0;   transform: scale(1.6); }
}
.preds-floating-ring {
  position: relative; width: 34px; height: 34px;
  flex: 0 0 auto;
}
.preds-floating-ring svg { transform: rotate(-90deg); width: 100%; height: 100%; display: block; }
.preds-floating-ring path { fill: none; stroke-width: 4; }
.preds-floating-ring .ring-bg { stroke: rgba(15, 25, 45, 0.10); }
.preds-floating-ring .ring-fg {
  /* Gradient via URL não funciona direto em stroke (sem <defs/>). Usamos cor sólida + filtro */
  stroke: var(--c-primary);
  stroke-dasharray: calc(var(--pct, 0) * 1) 100;
  stroke-linecap: round;
  transition: stroke-dasharray .6s var(--ease), stroke .2s var(--ease);
  filter: drop-shadow(0 1px 2px rgba(255, 136, 0, 0.35));
}
.preds-floating-text {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.05;
  text-align: left;
  position: relative;
  z-index: 1;
}
.preds-floating-text strong {
  font-weight: 800;
  font-size: 13px;
  color: var(--c-text);
  letter-spacing: -0.01em;
}
.preds-floating-text small {
  font-size: 11px;
  color: var(--c-primary);
  font-weight: 700;
}
/* Ripple ao clicar */
.preds-floating .ripple-dot {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 136, 0, 0.28);
  transform: scale(0);
  animation: ripple .55s var(--ease-smooth);
  pointer-events: none;
}
@media (max-width: 600px) {
  .preds-floating {
    top: 64px;
    right: 10px;
    padding: 6px 14px 6px 6px;
    gap: 8px;
  }
  .preds-floating-ring { width: 30px; height: 30px; }
  .preds-floating-text strong { font-size: 12px; }
  .preds-floating-text small { font-size: 10px; }
}
/* Respeita usuários que preferem menos movimento */
@media (prefers-reduced-motion: reduce) {
  .preds-floating { transition: opacity .15s linear; transform: none; }
  .preds-floating.is-visible { transform: none; }
  .preds-floating:hover { transform: none; }
  .preds-floating.is-pulsing .preds-floating-ring::after { display: none; }
}

/* ====== Pódio premium — gradient + pedestal olímpico ====== */
.podium-section {
  margin-bottom: var(--s-6);
  padding: var(--s-3) 0 0;
}
.podium-header {
  text-align: center;
  margin-bottom: var(--s-4);
}
.podium-title {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: 800;
  letter-spacing: -0.015em;
}
.podium-hint {
  margin: 6px auto 0;
  color: var(--c-muted);
  font-size: var(--fs-sm);
  max-width: 540px;
}
.podium-hint a { color: var(--c-primary); font-weight: 700; text-decoration: none; border-bottom: 1px dashed transparent; transition: border-color .2s var(--ease); }
.podium-hint a:hover { border-bottom-color: var(--c-primary); }
.podium-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: var(--s-3);
  align-items: end;
  position: relative;
  padding: 0 var(--s-2);
}
@media (max-width: 600px) {
  .podium-grid { grid-template-columns: 1fr; gap: var(--s-3); padding: 0; }
}
.podium-card {
  background: #fff;
  border: 2px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-3) var(--s-3);
  text-align: center;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .25s var(--ease);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
  overflow: hidden;
}
/* Pedestal olímpico: pseudo-elemento na base do card cria o "degrau" visual */
.podium-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 70%;
  background: linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0.02));
  border-top: 1px solid rgba(0,0,0,0.08);
  border-radius: 6px 6px 0 0;
  pointer-events: none;
}
@media (min-width: 601px) {
  .podium-card.podium-1 { transform: translateY(-12px); }
  .podium-card.podium-1::after { height: 28px; }
  .podium-card.podium-2::after { height: 18px; }
  .podium-card.podium-3::after { height: 12px; }
}
.podium-card.podium-1::after { height: 24px; }
.podium-card.podium-2::after { height: 16px; }
.podium-card.podium-3::after { height: 12px; }

/* Estado vazio: neutro, opacity reduzida, sem brilho */
.podium-card.is-pending {
  opacity: 0.75;
  background: #FAFAFA;
  border-color: var(--c-line);
}
.podium-card.is-pending .podium-pos,
.podium-card.is-pending .podium-team { color: var(--c-muted); }
.podium-card.is-pending::after { background: linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.01)); }

/* Estado resolvido: gradients premium dourado/prata/bronze */
.podium-card.podium-1.is-resolved {
  background: var(--grad-champion);
  border-color: #E6A93C;
  box-shadow:
    0 12px 32px rgba(255, 180, 0, 0.32),
    0 2px 8px rgba(176, 120, 16, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.podium-card.podium-1.is-resolved::before {
  /* Brilho radial sutil no topo */
  content: '';
  position: absolute;
  top: -30%; left: 30%; width: 60%; height: 60%;
  background: radial-gradient(circle, rgba(255,255,255,0.55), transparent 70%);
  pointer-events: none;
}
.podium-card.podium-1.is-resolved::after {
  background: linear-gradient(180deg, rgba(176, 120, 16, 0.18), rgba(176, 120, 16, 0.05));
  border-top-color: rgba(176, 120, 16, 0.30);
}
.podium-card.podium-2.is-resolved {
  background: var(--grad-silver);
  border-color: #A3AAB5;
  box-shadow:
    0 10px 28px rgba(124, 128, 135, 0.28),
    0 2px 6px rgba(94, 100, 110, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.80);
}
.podium-card.podium-2.is-resolved::after {
  background: linear-gradient(180deg, rgba(94, 100, 110, 0.15), rgba(94, 100, 110, 0.03));
  border-top-color: rgba(94, 100, 110, 0.25);
}
.podium-card.podium-3.is-resolved {
  background: var(--grad-bronze);
  border-color: #B97A35;
  box-shadow:
    0 10px 28px rgba(201, 126, 43, 0.28),
    0 2px 6px rgba(114, 67, 17, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.podium-card.podium-3.is-resolved::after {
  background: linear-gradient(180deg, rgba(114, 67, 17, 0.15), rgba(114, 67, 17, 0.03));
  border-top-color: rgba(114, 67, 17, 0.30);
}

/* Slot do ícone — SVG bonito no topo, com bandeira ao lado quando preenchido */
.podium-icon-slot {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  position: relative;
  z-index: 1;
}
.podium-card.podium-1 .podium-icon-slot { height: 84px; }
.podium-icon-slot .podium-icon {
  display: block;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.18));
  animation: podiumBounceIn 0.65s var(--ease-bounce);
}
.podium-emoji-placeholder {
  font-size: 52px;
  line-height: 1;
  opacity: 0.40;
  filter: grayscale(0.7);
}
.podium-pos {
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--c-text);
  text-transform: uppercase;
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 1;
}
.podium-pos .podium-pts {
  display: inline-block;
  padding: 2px 8px;
  font-size: 10px;
  background: rgba(0, 0, 0, 0.10);
  color: var(--c-text);
  border-radius: 999px;
  letter-spacing: 0.04em;
  font-weight: 800;
}
.podium-card.podium-1.is-resolved .podium-pos .podium-pts {
  background: rgba(176, 120, 16, 0.85);
  color: #FFF6D6;
}
.podium-card.podium-2.is-resolved .podium-pos .podium-pts {
  background: rgba(94, 100, 110, 0.85);
  color: #fff;
}
.podium-card.podium-3.is-resolved .podium-pos .podium-pts {
  background: rgba(114, 67, 17, 0.85);
  color: #FFF1DF;
}

.podium-team {
  font-family: var(--f-display);
  font-size: var(--fs-base);
  font-weight: 800;
  color: var(--c-text);
  margin-top: 4px;
  letter-spacing: -0.01em;
  position: relative;
  z-index: 1;
  line-height: 1.3;
  /* Renderização nativa de emoji + bandeira maior */
  font-feature-settings: "ss01";
}
.podium-card.is-resolved .podium-team {
  font-size: 17px;
  /* Bandeira fica visualmente maior (emoji "scale") */
  font-variant-emoji: emoji;
}
.podium-card.podium-1.is-resolved .podium-team {
  font-size: 20px;
  color: #5A3E0F;
}
.podium-card.podium-2.is-resolved .podium-team { color: #3F454D; }
.podium-card.podium-3.is-resolved .podium-team { color: #5C3911; }
.podium-team-pending {
  font-size: var(--fs-sm);
  font-weight: 500;
  font-style: italic;
  color: var(--c-muted);
}

@keyframes podiumBounceIn {
  0%   { transform: scale(0.3); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  80%  { transform: scale(0.96); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .podium-icon-slot .podium-icon { animation: none; }
  .podium-card.podium-1 { transform: none !important; }
}

/* ====== Predictions v2 styles (mobile-first) ====== */
.preds-ring { position: relative; width: 56px; height: 56px; }
.preds-ring svg { transform: rotate(-90deg); }
.preds-ring path { fill: none; stroke-width: 3.6; }
.preds-ring .ring-bg { stroke: #F4F4F4; }
.preds-ring .ring-fg { stroke: var(--c-primary); stroke-dasharray: calc(var(--pct, 0) * 1) 100; stroke-linecap: round; transition: stroke-dasharray .6s var(--ease); }
.preds-ring span { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; font-size: 13px; color: var(--c-primary); }
@media (min-width: 700px) {
  .preds-ring { width: 64px; height: 64px; }
  .preds-ring span { font-size: 14px; }
}

#preds-stats { display: grid; grid-template-columns: 1fr auto; gap: var(--s-3); align-items: center; }
@media (min-width: 700px) { #preds-stats { grid-template-columns: repeat(2, auto); gap: var(--s-4); } }

.filter-toggle { display: inline-flex; background: var(--c-light); border-radius: var(--r-pill); padding: 4px; flex-wrap: wrap; }
.filter-btn { background: transparent; border: 0; padding: 10px 14px; font-size: var(--fs-sm); font-weight: 700; cursor: pointer; border-radius: var(--r-pill); color: var(--c-muted); min-height: 40px; }
.filter-btn.active { background: var(--c-primary); color: #fff; }
.phase-jump { display: flex; gap: 6px; flex-wrap: wrap; }
.phase-jump-link { font-size: var(--fs-sm); padding: 8px 14px; background: var(--c-light); border-radius: var(--r-pill); text-decoration: none; color: var(--c-text); font-weight: 600; min-height: 40px; display: inline-flex; align-items: center; }
.phase-jump-link:hover { background: var(--c-primary); color: #fff; }

/* Groups */
.groups-grid { display: grid; gap: var(--s-3); align-items: start; }
@media (min-width: 760px) {
  .groups-grid { grid-template-columns: repeat(2, 1fr); }
  /* Item 3 — grupo EXPANDIDO ocupa a largura toda (cabe o card de jogo sem cortar
     a bandeira); grupos COLAPSADOS seguem 2/3 por linha. `align-items: start`
     impede que os vizinhos colapsados estiquem em branco. */
  .groups-grid .group-card:not(.is-collapsed) { grid-column: 1 / -1; }
}
@media (min-width: 1200px) { .groups-grid { grid-template-columns: repeat(3, 1fr); } }

.group-card {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.group-card:hover { box-shadow: var(--sh-sm, 0 4px 14px rgba(15,25,45,.06)); }
/* Grupo completo: borda verde sutil + leve glow de conquista */
.group-card.is-complete {
  border-color: rgba(57, 157, 37, 0.45);
  box-shadow: 0 0 0 1px rgba(57, 157, 37, 0.12), 0 6px 18px rgba(57, 157, 37, 0.10);
}

/* ----- Header (summary) ----- */
.group-card-head {
  padding: var(--s-3) var(--s-4);
  display: block;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.group-card-head::-webkit-details-marker { display: none; }
.group-card-head:focus-visible { outline: 3px solid var(--c-accent); outline-offset: -3px; border-radius: var(--r-lg); }

.group-card-head-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
}
.group-letter { font-family: var(--f-display); font-weight: 800; font-size: var(--fs-lg); color: var(--c-primary); }
.group-progress {
  font-size: var(--fs-xs); color: var(--c-muted);
  padding: 3px 8px; background: var(--c-light); border-radius: 999px; font-weight: 700;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.group-card.is-complete .group-progress { background: rgba(57, 157, 37, 0.14); color: var(--c-field-2); }

/* Item 2 (owner) — total de pontos feitos no grupo (selo no header). */
.group-points {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-xs); font-weight: 700;
  padding: 3px 9px 3px 7px; border-radius: 999px;
  white-space: nowrap;
}
.group-points[hidden] { display: none; }
.group-points__ico { display: inline-flex; flex: 0 0 auto; }
.group-points strong { font-family: var(--f-display); font-weight: 800; }
.group-points.is-scored {
  color: #fff;
  background: linear-gradient(135deg, var(--c-field) 0%, var(--c-field-2) 100%);
  box-shadow: 0 2px 8px rgba(57, 157, 37, 0.28);
}
.group-points.is-zero { color: var(--c-muted); background: var(--c-light); border: 1px solid var(--c-line); }

/* Selo "grupo completo" — aparece só quando o grupo está 100% preenchido */
.group-complete-flag {
  display: none;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
  color: var(--c-field-2);
  background: rgba(57, 157, 37, 0.12);
  border: 1px solid rgba(57, 157, 37, 0.25);
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.group-complete-flag svg { flex-shrink: 0; }
.group-card.is-complete .group-complete-flag { display: inline-flex; animation: group-flag-pop .4s var(--ease-smooth) both; }
@keyframes group-flag-pop {
  from { opacity: 0; transform: scale(.7); }
  to   { opacity: 1; transform: scale(1); }
}

/* Chevron — auto-margin empurra pro fim da linha, rotaciona ao abrir */
.group-card-toggle {
  margin-left: auto;
  display: inline-flex;
  color: var(--c-muted);
  transition: transform .35s var(--ease-smooth), color .2s var(--ease);
  transform: rotate(-90deg); /* colapsado: aponta pra direita */
}
.group-card[open]:not(.is-collapsed) .group-card-toggle { transform: rotate(0deg); } /* aberto: aponta pra baixo */
.group-card-head:hover .group-card-toggle { color: var(--c-primary); }

/* ----- Standings ricos (todos os times do grupo) ----- */
.group-standings {
  list-style: none;
  margin: var(--s-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.group-standing-row {
  display: grid;
  grid-template-columns: 26px 22px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  background: var(--c-light);
  /* anima reordenação/realce */
  transition: background .3s var(--ease), border-color .3s var(--ease), opacity .3s var(--ease), transform .3s var(--ease-smooth);
}
.group-standing-pos {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--fs-sm);
  color: var(--c-muted);
  text-align: center;
}
.group-standing-flag { font-size: 18px; line-height: 1; }
.group-standing-name {
  font-weight: 700; color: var(--c-text); font-size: var(--fs-sm);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.group-standing-tag {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
}

/* Estado "ainda não dá pra saber": times em cinza neutro, sem destaque */
.group-card[data-standings-state="pending"] .group-standing-row { background: var(--c-light); opacity: .9; }
.group-card[data-standings-state="pending"] .group-standing-pos { color: var(--c-line-2); }
.group-card[data-standings-state="pending"] .group-standing-name { color: var(--c-muted); font-weight: 600; }

/* Classificado direto (1º/2º) — destaque verde */
.group-standing-row.is-qualified {
  background: rgba(57, 157, 37, 0.08);
  border-color: rgba(57, 157, 37, 0.35);
}
.group-standing-row.is-qualified .group-standing-pos { color: var(--c-field-2); }
.group-standing-row.is-qualified .group-standing-tag { color: var(--c-field-2); }
/* Melhor terceiro (pode avançar) — destaque âmbar mais suave */
.group-standing-row.is-thirdbest {
  background: rgba(232, 152, 24, 0.08);
  border-color: rgba(232, 152, 24, 0.32);
}
.group-standing-row.is-thirdbest .group-standing-pos { color: var(--c-final); }
.group-standing-row.is-thirdbest .group-standing-tag { color: #B57614; }
/* Eliminado — esmaecido */
.group-standing-row.is-eliminated { opacity: .5; }
.group-standing-row.is-eliminated .group-standing-name { color: var(--c-muted); font-weight: 600; }

/* Hint elegante (quando não dá pra determinar posições) */
.group-standings-hint {
  margin: 8px 0 0;
  font-size: var(--fs-xs);
  color: var(--c-muted);
  display: none;
  align-items: center;
  gap: 6px;
}
.group-card[data-standings-state="pending"] .group-standings-hint { display: flex; }

/* ----- Painel animado (grid-template-rows: 1fr→0fr) ----- */
.group-card-panel {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .38s var(--ease-smooth);
}
.group-card.is-collapsed .group-card-panel { grid-template-rows: 0fr; }
.group-card-panel > .group-card-body { overflow: hidden; min-height: 0; }
.group-card-body {
  padding: var(--s-3) var(--s-3) var(--s-4);
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--c-line);
  /* leve fade do conteúdo junto com o colapso */
  transition: opacity .28s var(--ease), padding .38s var(--ease-smooth);
}
.group-card.is-collapsed .group-card-body { opacity: 0; padding-top: 0; padding-bottom: 0; }
@media (min-width: 700px) { .group-card-body { padding: var(--s-3) var(--s-4) var(--s-4); } }
.group-card.is-collapsed .group-card-body { padding-left: var(--s-4); padding-right: var(--s-4); }

/* Reduced motion: sem animação de altura/rotação/realce */
@media (prefers-reduced-motion: reduce) {
  .group-card-panel,
  .group-card-body,
  .group-card-toggle,
  .group-standing-row,
  .group-complete-flag { transition: none !important; animation: none !important; }
}

/* Match row: mobile-first (stacked), expande para grid em >= 1000px */
.match-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-2);
  padding: var(--s-3);
  border-radius: var(--r-md);
  border: 1px solid var(--c-line);
  background: var(--c-white);
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.match-row:hover { background: var(--c-light); }
.match-row.is-filled { background: rgba(57, 157, 37, 0.04); border-color: rgba(57,157,37,0.30); }
.match-row.is-locked { opacity: .65; }
.match-row-meta { display: flex; flex-direction: row; gap: 8px; font-size: var(--fs-xs); color: var(--c-muted); flex-wrap: wrap; align-items: center; }
.match-row-venue { font-size: 11px; opacity: .85; }
.match-row-teams { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s-2); align-items: center; }
.m-team { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: var(--fs-sm); min-width: 0; }
.m-team-away { justify-content: flex-end; flex-direction: row-reverse; }
.m-flag { font-size: 22px; line-height: 1; flex: 0 0 auto; }
.m-name { color: var(--c-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.m-score { display: flex; gap: 6px; align-items: center; flex: 0 0 auto; }
.m-input {
  width: 48px; height: 48px;
  border: 2px solid var(--c-line-2); border-radius: 10px;
  font-size: 20px; font-weight: 800; text-align: center;
  -moz-appearance: textfield; color: var(--c-text); background: #fff;
  -webkit-appearance: none;
}
.m-input::-webkit-outer-spin-button, .m-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.m-input:focus { border-color: var(--c-primary); outline: none; box-shadow: 0 0 0 4px rgba(255,136,0,.15); }
.m-input:disabled { background: var(--c-light); color: var(--c-muted); }
.m-x { font-weight: 800; color: var(--c-muted); font-size: 18px; }
.match-row-odds { display: flex; flex-direction: column; gap: 4px; }
.odds-bar--match { display: flex; height: 6px; border-radius: 4px; overflow: hidden; background: var(--c-line); }
.odds-bar--match .odds-home { background: var(--c-accent); flex-grow: 0; flex-shrink: 0; }
.odds-bar--match .odds-draw { background: var(--c-muted); flex-grow: 0; flex-shrink: 0; opacity: .65; }
.odds-bar--match .odds-away { background: var(--c-fire); flex-grow: 0; flex-shrink: 0; }
.odds-legend-row { display: flex; align-items: stretch; gap: 0; font-size: 11px; font-weight: 700; color: var(--c-text); }
.odds-legend-cell { display: flex; flex-direction: column; line-height: 1.2; padding: 0 4px; min-width: 0; text-align: left; }
.odds-legend-cell--draw { align-items: center; text-align: center; color: var(--c-muted); }
.odds-legend-cell--away { align-items: flex-end; text-align: right; }
.odds-legend-team { font-size: 10px; opacity: .75; font-weight: 600; }
.odds-legend-cell strong { font-family: var(--f-display); }

/* Item 3 — footer de insight do jogo (favorito · jogo quente · % da galera concorda) */
.match-insight {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 14px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--c-line);
  font-size: 11px;
  color: var(--c-muted);
}
.match-insight__tags { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.match-insight__fav { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--c-text); }
.match-insight__fav-ico { display: inline-flex; color: var(--c-final, #E8981A); }
.match-insight__fav-team { color: var(--c-primary); white-space: nowrap; }
.match-insight__hot { display: inline-flex; align-items: center; gap: 3px; font-weight: 800; color: var(--c-fire, #E63946); }
.match-insight__hot-ico { display: inline-flex; }
.match-insight__right { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; }
.match-insight__agree { display: inline-flex; align-items: center; gap: 7px; }
.match-insight__agree-text strong { color: var(--c-field, #399D25); font-weight: 800; }
.match-insight__avatars { display: inline-flex; align-items: center; }
.match-insight__avatars i {
  display: inline-block;
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid var(--c-white, #fff); margin-right: -6px;
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
}
.match-insight__avatars i:nth-child(2) { background: linear-gradient(135deg, var(--c-field, #399D25), var(--c-primary)); }
.match-insight__avatars i:nth-child(3) { background: linear-gradient(135deg, var(--c-accent), var(--c-final, #E8981A)); }
.match-insight__avatars i:last-child { margin-right: 4px; }
.match-insight__count { color: var(--c-muted); white-space: nowrap; }
.odds-bar--demo { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--c-line); }
.odds-bar--demo .odds-home { background: var(--c-accent); }
.odds-bar--demo .odds-draw { background: var(--c-muted); opacity: .65; }
.odds-bar--demo .odds-away { background: var(--c-fire); }
.odds-legend--demo { display: flex; margin-top: 6px; font-size: 11px; color: var(--c-muted); font-weight: 600; }
.match-row-status { display: flex; flex-direction: row; gap: 6px; font-size: 11px; align-items: center; flex-wrap: wrap; }
.match-locked { color: var(--c-muted); font-weight: 700; }
[data-row-save-indicator] { display: inline-block; min-height: 14px; }
[data-row-save-indicator].saved::before { content: '✓ Salvo'; color: var(--c-field); font-weight: 700; }
[data-row-save-indicator].saving::before { content: '... salvando'; color: var(--c-muted); }
[data-row-save-indicator].error::before { content: '✗ erro'; color: var(--c-fire); }
[data-row-status].tag-fav::before { content: 'palpite popular'; background: rgba(15,62,153,.10); color: var(--c-accent); padding: 2px 6px; border-radius: 4px; font-weight: 700; }
[data-row-status].tag-zebra::before { content: 'zebra!'; background: rgba(230,57,70,.12); color: var(--c-fire); padding: 2px 6px; border-radius: 4px; font-weight: 700; }
[data-row-status].tag-balanced::before { content: 'equilibrado'; background: rgba(255,214,10,.20); color: #8A6A00; padding: 2px 6px; border-radius: 4px; font-weight: 700; }

/* Desktop: grid 4 colunas */
@media (min-width: 1000px) {
  .match-row {
    grid-template-columns: 180px 1fr 220px 90px;
    gap: var(--s-3);
    border: 0;
    background: transparent;
    align-items: center;
  }
  .match-row.is-filled { background: rgba(57, 157, 37, 0.04); border: 0; }
  .match-row-meta { flex-direction: column; gap: 2px; align-items: flex-start; }
  .match-row-status { align-items: flex-end; flex-direction: column; }
  /* Item 3 — o insight ocupa a largura toda do card (não fica espremido na coluna de odds) */
  .match-row .match-insight { grid-column: 1 / -1; }
}

/* ====== Bracket SINGLE-TRACK pirâmide perfeita ======
   Cada coluna tem altura total fixa (BRACKET_TOTAL_H).
   Cards posicionados absolutamente em coordenadas exatas via JS.
   Math: cada par de cards na fase X alimenta UM card na fase X+1, centrado entre eles.
   - R32 #i topo    = i * R
   - R16 #i topo    = (2i + 0.5) * R       (centro = (2i+0.5)R + H/2 = midpoint dos 2 pais)
   - QF  #i topo    = (4i + 1.5) * R
   - SF  #i topo    = (8i + 3.5) * R
   - Final topo     = 7.5 * R
   - 3º lugar topo  = 10 * R
*/
:root {
  --ko-card-h: 108px;
  --ko-card-gap: 6px;
  --ko-row-h: calc(var(--ko-card-h) + var(--ko-card-gap));
  --bracket-h: calc(16 * var(--ko-row-h));
}
.bracket-flat {
  position: relative;
  background: linear-gradient(180deg, #FFF8EC, #FFFFFF 60%);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--s-3);
}
.bracket-flat-inner {
  position: relative;
  isolation: isolate;
}

/* ===== Mobile (default): tabs com 1 coluna por vez, sem layout matemático absoluto ===== */
.bracket-tabs {
  display: flex; gap: 4px; padding: 4px;
  margin-bottom: var(--s-3);
  background: var(--c-light); border-radius: var(--r-pill);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.bracket-tabs::-webkit-scrollbar { display: none; }
.bracket-tab {
  flex: 0 0 auto;
  padding: 10px 16px;
  border: 0; background: transparent;
  font-size: var(--fs-sm); font-weight: 700;
  color: var(--c-muted);
  border-radius: var(--r-pill);
  cursor: pointer;
  white-space: nowrap;
  min-height: 40px;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.bracket-tab.is-active { background: var(--c-primary); color: #fff; }
.bracket-tab:not(.is-active):hover { background: #fff; color: var(--c-text); }

.bracket-flat-inner { display: block; }
/* Default no-JS / antes da JS rodar: mostra a primeira fase (R32). */
/* Quando JS aplica .has-mobile-tabs no inner, passa a usar .is-active-mobile pra controlar. */
.bracket-col {
  display: flex;
  flex-direction: column; gap: 10px;
  position: relative;
  padding-top: 28px; /* espaço pro título quando visível */
}
.bracket-flat-inner.has-mobile-tabs .bracket-col { display: none; }
.bracket-flat-inner.has-mobile-tabs .bracket-col.is-active-mobile { display: flex; }
.bracket-flat-inner:not(.has-mobile-tabs) .bracket-col:not([data-phase-panel="r32"]) { display: none; }
.bracket-col-title {
  font-size: 11px; color: var(--c-muted); text-transform: uppercase; letter-spacing: .12em; font-weight: 800;
  margin: 0; text-align: center;
  position: absolute; top: 4px; left: 0; right: 0;
}
/* Mobile/tabs: "3º lugar" entre o card da Final e o card #103, com gap visível */
.bracket-col-title--third {
  position: relative; top: auto;
  margin-top: var(--s-4); margin-bottom: 6px;
  text-align: center;
}
.bracket-col .ko-card {
  position: static;
  left: auto; right: auto;
  width: 100%;
  height: auto;
  min-height: 0;
}
/* No mobile, SVG escondido */
.bracket-lines { display: none; }

/* ===== Desktop ≥ 1100px: layout completo sem scroll horizontal ===== */
@media (min-width: 1100px) {
  .bracket-tabs { display: none; }
  .bracket-flat { padding: var(--s-4); padding-top: 36px; }
  .bracket-flat-inner,
  .bracket-flat-inner.has-mobile-tabs {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(140px, 1fr) minmax(140px, 1fr) minmax(140px, 1fr) minmax(180px, 1.2fr);
    gap: 18px;
    align-items: start;
    min-height: var(--bracket-h);
  }
  .bracket-col,
  .bracket-flat-inner.has-mobile-tabs .bracket-col,
  .bracket-flat-inner:not(.has-mobile-tabs) .bracket-col:not([data-phase-panel="r32"]) {
    display: block;
    position: relative;
    height: var(--bracket-h);
    padding-top: 0;
  }
  .bracket-col-title {
    position: absolute; top: -28px;
  }
  /* Desktop: o título "3º lugar" precisa ficar COLADO em cima do card #103.
     Posição via JS (style.top em px exatos) baseada na altura calculada do card #103.
     CSS apenas garante visual + remove top:-28px herdado. */
  .bracket-col-title--third {
    position: absolute;
    top: auto;          /* sobrescrito pelo JS via inline style */
    margin: 0;
    padding: 0;
    width: 100%;
    text-align: center;
  }
  .bracket-col .ko-card {
    position: absolute;
    left: 0; right: 0;
    width: auto;
    height: var(--ko-card-h);
    /* posicionamento via JS (style.top) */
  }
  .bracket-lines {
    display: block;
    position: absolute; inset: 0; pointer-events: none; z-index: 1;
    width: 100%; height: 100%;
  }
}

.ko-card {
  background: #fff;
  border: 1.5px solid var(--c-line);
  border-radius: 10px;
  padding: 6px 8px;
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px;
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease), background .2s var(--ease);
  z-index: 2;
  box-sizing: border-box;
  overflow: visible;
  /* Sombra premium sutil em todos os cards do bracket */
  box-shadow: 0 1px 3px rgba(15, 25, 45, 0.06), 0 6px 16px rgba(15, 25, 45, 0.04);
}
.ko-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(15, 25, 45, 0.08), 0 10px 22px rgba(15, 25, 45, 0.07);
  border-color: var(--c-primary-3);
}
.ko-card.is-filled {
  border-color: var(--c-primary);
  background: linear-gradient(180deg, #FFFCF5 0%, #FFFFFF 80%);
  /* Sombra laranja sutil quando preenchido */
  box-shadow: 0 1px 3px rgba(255, 136, 0, 0.10), 0 6px 18px rgba(255, 136, 0, 0.10);
}
.ko-card.is-pen-open { z-index: 8; }
.ko-card.is-locked { opacity: .65; }
.bracket-col--final .ko-card {
  border-width: 2px;
  border-color: var(--c-primary);
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF6E0 100%);
  box-shadow: 0 2px 6px rgba(255, 136, 0, 0.12), 0 10px 28px rgba(255, 136, 0, 0.16);
}

.ko-meta {
  font-size: 9px; color: var(--c-muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
  text-align: center;
  line-height: 1.1;
}
.ko-team {
  display: grid; grid-template-columns: 20px 1fr 36px;
  align-items: center; gap: 6px;
  padding: 3px 6px; border-radius: 6px;
  background: var(--c-light);
  position: relative;
  transition: background .2s, box-shadow .3s;
  min-height: 30px;
}
.ko-team[data-resolved="1"] { background: rgba(255,136,0,0.06); }
.ko-team.is-winner {
  background: linear-gradient(90deg, rgba(57,157,37,0.22) 0%, rgba(57,157,37,0.10) 60%, rgba(57,157,37,0.02) 100%);
  box-shadow: inset 3px 0 0 var(--c-field), inset 0 0 0 1px rgba(57, 157, 37, 0.10);
}
.ko-flag {
  font-size: 18px; line-height: 1;
  display: inline-block;
  transition: transform .4s var(--ease);
}
.ko-team.is-winner .ko-flag { transform: scale(1.15); }
.ko-name { font-weight: 700; color: var(--c-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.ko-name.placeholder { color: var(--c-muted); font-style: italic; font-weight: 600; opacity: .85; }
.ko-input {
  width: 36px; height: 28px;
  border: 1.5px solid var(--c-line-2); border-radius: 5px;
  text-align: center; font-weight: 800; font-size: 14px; background: #fff;
  -moz-appearance: textfield;
  -webkit-appearance: none;
}
.ko-input::-webkit-outer-spin-button, .ko-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ko-input:focus { border-color: var(--c-primary); outline: none; box-shadow: 0 0 0 3px rgba(255,136,0,0.15); }
.ko-input:disabled { background: var(--c-line); color: var(--c-muted); }
.ko-pen {
  font-size: 11px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0 0;
  border-top: 1px dashed var(--c-line);
  margin-top: 4px;
}
.ko-pen[hidden] { display: none !important; }
.ko-pen-title { color: var(--c-muted); font-weight: 600; }
.ko-pen-opt {
  display: grid;
  grid-template-columns: 16px 18px 1fr;
  gap: 6px;
  align-items: start;
  cursor: pointer;
  padding: 5px 6px;
  border-radius: 6px;
  min-height: 24px;
  transition: background .15s, box-shadow .15s, border-color .15s;
  border: 1px solid transparent;
}
.ko-pen-opt:hover { background: rgba(255,136,0,0.06); }
.ko-pen-opt input[type=radio] { margin: 2px 0 0; accent-color: var(--c-primary); }
.ko-pen-opt:has(input[type=radio]:checked),
.ko-pen-opt.is-selected {
  background: linear-gradient(90deg, rgba(57,157,37,0.16) 0%, rgba(57,157,37,0.08) 100%);
  border-color: rgba(57,157,37,0.28);
  box-shadow: inset 0 0 0 1px rgba(57,157,37,0.14);
}
.ko-pen-opt input[type=radio]:checked + .ko-pen-flag + .ko-pen-name,
.ko-pen-opt.is-selected .ko-pen-name { color: var(--c-field-2); font-weight: 800; }
.ko-pen-flag { font-size: 14px; line-height: 1; }
.ko-pen-name {
  font-weight: 600;
  color: var(--c-text);
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  line-height: 1.25;
  min-width: 0;
}
.ko-save {
  font-size: 10px; text-align: right;
  display: none; /* só aparece quando há atividade ('.saved', '.saving', '.error') */
  min-height: 0;
}
.ko-save.saved, .ko-save.saving, .ko-save.error { display: block; min-height: 12px; }

/* No mobile, ko-card respira mais: input maior, flag maior */
@media (max-width: 1099px) {
  .ko-card { padding: 10px 12px; gap: 6px; }
  .ko-team { min-height: 40px; padding: 6px 8px; grid-template-columns: 26px 1fr 48px; }
  .ko-flag { font-size: 22px; }
  .ko-name { font-size: 13px; }
  .ko-input { width: 48px; height: 40px; font-size: 16px; }
  .ko-meta { font-size: 11px; }
  .ko-pen { font-size: 13px; padding: 10px 0 0; }
  .ko-pen-opt { min-height: 36px; padding: 4px 6px; grid-template-columns: 20px 22px 1fr; }
  .ko-pen-flag { font-size: 18px; }
  .ko-pen-name { font-size: 14px; }
}

@media (min-width: 1100px) {
  .ko-card.is-pen-open .ko-pen {
    position: absolute;
    top: calc(100% - 2px);
    left: 8px;
    right: 8px;
    z-index: 9;
    padding: 10px;
    margin-top: 0;
    border: 1px solid rgba(255,136,0,0.18);
    border-top: 1px solid rgba(255,136,0,0.18);
    border-radius: 10px;
    background: rgba(255,255,255,0.98);
    box-shadow: 0 10px 28px rgba(15, 25, 45, 0.14), 0 4px 10px rgba(255, 136, 0, 0.08);
    backdrop-filter: blur(8px);
  }

  .ko-card.is-pen-open.is-pen-above .ko-pen {
    top: auto;
    bottom: calc(100% - 2px);
  }

  .ko-card.is-pen-open .ko-pen-title {
    font-size: 10px;
    letter-spacing: .01em;
  }
}

.bracket-lines path {
  fill: none;
  stroke: var(--c-line-2);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .3s var(--ease), stroke-width .3s var(--ease);
}
.bracket-lines path.has-winner {
  stroke: var(--c-primary);
  stroke-width: 2.5;
  filter: drop-shadow(0 1px 2px rgba(255, 136, 0, 0.20));
}
/* Animação stroke-dashoffset quando uma linha ganha winner: desenha do início → fim
   O JS aplica .is-drawing por 700ms e remove. */
.bracket-lines path.is-drawing {
  stroke-dasharray: var(--path-length, 800);
  stroke-dashoffset: var(--path-length, 800);
  animation: line-draw .6s var(--ease-smooth) forwards;
}
@keyframes line-draw {
  to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bracket-lines path.is-drawing { animation: none; stroke-dashoffset: 0; }
}

/* Animação: bandeira voa do card resolvido pra próximo card */
.flag-fly {
  position: fixed; z-index: 9999; pointer-events: none;
  font-size: 24px; line-height: 1;
  filter: drop-shadow(0 4px 12px rgba(255,136,0,0.50));
  transition: transform .8s cubic-bezier(0.22,1,0.36,1), opacity .8s;
}

/* (Estilos antigos do pódio foram migrados para o bloco do topo — pódio agora no topo da página) */

/* ============================================================
   Resultado: placar (palpite vs real) estilo bolão/casa de aposta
   ============================================================ */
/* Jogo finalizado: card ganha um leve tom "encerrado". */
.match-row.is-finalized,
.ko-card.is-finalized { opacity: 1; }
.match-row.is-finalized { border-color: rgba(15, 62, 153, 0.18); }

.match-result {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: var(--s-2);
  padding: 12px;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, #FBFCFE 0%, #FFFFFF 70%);
  border: 1px solid var(--c-line);
  font-size: var(--fs-sm);
}
/* Tom de acerto na borda esquerda — leitura instantânea (verde/âmbar/vermelho). */
.match-result--hit     { border-left: 3px solid var(--c-field);  }
.match-result--partial { border-left: 3px solid var(--c-final);  }
.match-result--miss    { border-left: 3px solid var(--c-fire);   }
.match-result--neutral { border-left: 3px solid var(--c-line-2); }

/* Dentro do grid desktop das match-rows, ocupa a linha inteira (todas as colunas). */
@media (min-width: 1000px) {
  .match-row.is-finalized { grid-template-columns: 180px 1fr 220px 90px; }
  .match-row .match-result { grid-column: 1 / -1; }
}

/* ----- Mini-placares lado a lado: SEU PALPITE | RESULTADO ----- */
.mr-boards {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 8px;
}
.mr-board {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 8px;
  border-radius: var(--r-sm);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  text-align: center;
  min-width: 0;
}
.mr-board__label {
  font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--c-muted);
}
.mr-board__line {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  line-height: 1; min-width: 0;
}
.mr-board__num {
  font-family: var(--f-display); font-weight: 800;
  font-size: 30px; line-height: 1; color: var(--c-text);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.mr-board__num--empty { color: var(--c-line-2); }
.mr-board__x { font-size: 16px; font-weight: 700; color: var(--c-line-2); }
.mr-board__flag { font-size: 22px; line-height: 1; flex: 0 0 auto; }
.mr-board__pen { font-size: 10px; font-weight: 700; color: var(--c-muted); }
.mr-board__nopred { font-size: 11px; font-weight: 600; font-style: italic; color: var(--c-muted); }

/* Estado "aguardando resultado" — hint discreto com bolinha pulsante. */
.mr-waiting {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 600; color: var(--c-muted);
}
.mr-waiting__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-final); flex: 0 0 auto;
  box-shadow: 0 0 0 0 rgba(232, 152, 24, 0.5);
  animation: mr-waiting-pulse 1.8s var(--ease-smooth) infinite;
}
@keyframes mr-waiting-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(232, 152, 24, 0.45); }
  70%  { box-shadow: 0 0 0 6px rgba(232, 152, 24, 0); }
  100% { box-shadow: 0 0 0 0 rgba(232, 152, 24, 0); }
}
@media (prefers-reduced-motion: reduce) { .mr-waiting__dot { animation: none; } }

/* Palpite: leve fundo neutro. Resultado real: tom azul (oficial). */
.mr-board--pred { background: var(--c-light); }
.mr-board--real { background: linear-gradient(180deg, #F4F8FF 0%, #FFFFFF 85%); border-color: rgba(15, 62, 153, 0.16); }
.mr-board--real .mr-board__num { color: var(--c-accent); }

/* Realce do placar do palpite conforme acerto (números coloridos). */
.match-result--hit     .mr-board--pred { background: rgba(57,157,37,0.10);  border-color: rgba(57,157,37,0.30); }
.match-result--hit     .mr-board--pred .mr-board__num { color: var(--c-field-2); }
.match-result--partial .mr-board--pred { background: rgba(232,152,24,0.10); border-color: rgba(232,152,24,0.30); }
.match-result--partial .mr-board--pred .mr-board__num { color: #B57614; }
.match-result--miss    .mr-board--pred { background: rgba(230,57,70,0.07);  border-color: rgba(230,57,70,0.22); }

/* Seta entre os dois placares */
.mr-vs {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-line-2); align-self: center;
}

/* ----- Linha de pontos: total em destaque + tag + regras (uma linha tidy) ----- */
.mr-points {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.mr-points__total {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--f-display); font-weight: 800;
  padding: 4px 12px 4px 9px; border-radius: 999px;
  line-height: 1;
}
.mr-points__ico { display: inline-flex; }
.mr-points__num { font-size: 17px; letter-spacing: -.01em; }
.mr-points__unit { font-size: 11px; font-weight: 700; opacity: .85; }
.mr-points__total--scored {
  color: #fff;
  background: linear-gradient(135deg, var(--c-field) 0%, var(--c-field-2) 100%);
  box-shadow: 0 3px 10px rgba(57, 157, 37, 0.28);
}
.mr-points__total--zero { color: var(--c-muted); background: var(--c-light); border: 1px solid var(--c-line); }

.mr-points__tag {
  font-size: 11px; font-weight: 800; letter-spacing: .02em;
  padding: 3px 9px; border-radius: 999px;
}
.mr-points__tag--hit     { color: var(--c-field-2); background: rgba(57,157,37,0.12);  border: 1px solid rgba(57,157,37,0.28); }
.mr-points__tag--partial { color: #B57614;          background: rgba(232,152,24,0.12); border: 1px solid rgba(232,152,24,0.30); }
.mr-points__tag--miss    { color: var(--c-fire-2);  background: rgba(230,57,70,0.09);  border: 1px solid rgba(230,57,70,0.22); }

/* Indicador discreto do classificado REAL (mata-mata). */
.mr-qualify {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 800;
  padding: 3px 9px; border-radius: 999px;
}
.mr-qualify svg { flex: 0 0 auto; }
.mr-qualify.is-hit  { color: var(--c-field-2); background: rgba(57, 157, 37, 0.12); border: 1px solid rgba(57, 157, 37, 0.25); }
.mr-qualify.is-miss { color: var(--c-fire);    background: rgba(230, 57, 70, 0.10); border: 1px solid rgba(230, 57, 70, 0.22); }
.mr-qualify__real { color: var(--c-text); font-weight: 700; }

/* Regras do breakdown — chips compactos numa linha (wrap). Separador visual antes. */
.mr-rules {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px;
  margin-left: 2px; padding-left: 8px;
  border-left: 1px solid var(--c-line);
}
.mr-rule {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; line-height: 1.2;
  padding: 2px 7px; border-radius: 6px;
  border: 1px solid transparent;
  color: var(--c-muted);
}
.mr-rule__ico { display: inline-flex; flex: 0 0 auto; }
.mr-rule__pts { font-family: var(--f-display); font-weight: 800; opacity: .95; }
.mr-rule--won     { color: var(--c-field-2); background: rgba(57, 157, 37, 0.10);  border-color: rgba(57, 157, 37, 0.24); }
.mr-rule--partial { color: #B57614;          background: rgba(232, 152, 24, 0.10); border-color: rgba(232, 152, 24, 0.26); }
.mr-rule--missed  { color: var(--c-fire-2);  background: rgba(230, 57, 70, 0.07);  border-color: rgba(230, 57, 70, 0.18); }
.mr-rule--pending { color: var(--c-accent);  background: rgba(15, 62, 153, 0.06);  border-color: rgba(15, 62, 153, 0.16); }
.mr-rule--no_prediction,
.mr-rule--na      { color: var(--c-muted); background: var(--c-light); border-color: var(--c-line); opacity: .7; }

/* ----- KO card finalizado: bloco compacto (cards do bracket são apertados) ----- */
.ko-card .match-result {
  margin-top: 4px; padding: 8px; gap: 7px;
}
.ko-card .mr-board { padding: 6px 4px; gap: 2px; }
.ko-card .mr-board__num { font-size: 22px; }
.ko-card .mr-board__flag { font-size: 16px; }
.ko-card .mr-board__label { font-size: 9px; }
.ko-card .mr-boards { gap: 5px; }
/* No DESKTOP do bracket (≥1100px) os cards têm ALTURA FIXA (--ko-card-h) e são
   posicionados via JS com matemática de pirâmide. Crescer o card quebraria o
   layout — então ali mostramos só o selo de pts + classificado no canto,
   posicionados ABSOLUTAMENTE. No mobile/tabs os cards fluem e exibem tudo. */
@media (min-width: 1100px) {
  .ko-card.is-finalized .match-result {
    margin-top: 0; padding: 0; gap: 4px;
    position: absolute; top: 4px; right: 4px; left: auto;
    background: none; border: 0; border-left: 0; z-index: 4;
    flex-direction: column; align-items: flex-end;
  }
  .ko-card.is-finalized .mr-boards,
  .ko-card.is-finalized .mr-rules { display: none; }
  .ko-card.is-finalized .mr-points { flex-direction: column; align-items: flex-end; gap: 3px; }
  .ko-card.is-finalized .mr-points__total { padding: 2px 9px 2px 7px; }
  .ko-card.is-finalized .mr-points__num { font-size: 13px; }
  .ko-card.is-finalized .mr-points__tag { display: none; }
  .ko-card.is-finalized .mr-qualify { font-size: 10px; padding: 2px 7px; }
  .ko-card.is-finalized .mr-qualify__real { display: none; }
  /* KO trancado SEM resultado (não finalizado): a altura do card é fixa pela
     matemática da pirâmide — esconde o board "aguardando" no desktop (o placar
     read-only dentro do card já mostra o palpite; o lock styling já comunica). */
  .ko-card.is-locked:not(.is-finalized) .match-result { display: none; }
}

/* ============================================================
   Placar READ-ONLY (jogo locked/finalizado): texto, não input
   ============================================================ */
/* Grupo — substitui os dois .m-input por números grandes read-only. */
.m-score-ro {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-display); font-weight: 800;
  line-height: 1;
}
.m-score-ro__num {
  min-width: 32px; text-align: center;
  font-size: 26px; color: var(--c-text);
  font-variant-numeric: tabular-nums;
}
.m-score-ro__num.is-empty { color: var(--c-line-2); }
.m-score-ro__x { font-size: 16px; font-weight: 700; color: var(--c-line-2); }

/* KO — número read-only ocupa a mesma célula de grid do input (3ª coluna). */
.ko-score-ro {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-weight: 800;
  font-size: 18px; color: var(--c-text);
  font-variant-numeric: tabular-nums;
  min-height: 30px;
}
.ko-score-ro .is-empty { color: var(--c-line-2); }
/* Vencedor real (server-side) num KO locked: número em verde p/ reforçar. */
.ko-team.is-winner .ko-score-ro { color: var(--c-field-2); }

/* ----- Telas estreitas: encolhe os mini-placares pra caber sempre ----- */
@media (max-width: 480px) {
  .match-result { padding: 10px; }
  .mr-boards { gap: 6px; }
  .mr-board { padding: 8px 4px; }
  .mr-board__line { gap: 5px; }
  .mr-board__num { font-size: 25px; }
  .mr-board__flag { font-size: 18px; }
  .mr-board__label { font-size: 9px; letter-spacing: .05em; }
  .mr-points { gap: 5px; }
  .m-score-ro__num { font-size: 24px; min-width: 28px; }
}

/* Filter states */
.match-row.hidden, .ko-card.hidden { display: none !important; }

/* Mobile: ajustes header */
@media (max-width: 700px) {
  #preds-header { padding: var(--s-4) !important; margin-bottom: var(--s-4) !important; }
  #preds-header h1 { font-size: var(--fs-xl) !important; }
  #preds-header .eyebrow { font-size: 11px; }
}

/* ============================================================
   public/home.php — migração de CSS inline (2026-05-27)
   Mantém o visual idêntico, mas centralizado aqui pra coerência
   com as demais views.
   ============================================================ */

/* Eyebrow "pill" do hero (logged in / logged out) — fundo translúcido sobre o gradiente laranja */
.hero-eyebrow-pill {
  color: #fff;
  background: rgba(0, 0, 0, 0.20);
  padding: 6px 14px;
  border-radius: var(--r-pill);
  display: inline-block;
  letter-spacing: 0.10em;
}

/* H1 do hero — ajusta o espaçamento sobre o eyebrow */
.hero-h1 {
  color: #fff;
  margin-top: var(--s-4);
}

/* Lead do hero — largura controlada, alto contraste */
.hero-lead {
  color: rgba(255, 255, 255, 0.92);
  max-width: 680px;
  margin: 0 auto var(--s-6);
}

/* Botões do hero — primário (branco sobre laranja) */
.btn-hero-primary {
  background: #fff;
  color: var(--c-primary);
}

/* Bloco "Brasil já sai ganhando" — fundo creme com bordas suaves */
.brazil-block {
  background: linear-gradient(135deg, #FFF8EC 0%, #FFEAC8 100%);
  border-top: 1px solid #FFD89A;
  border-bottom: 1px solid #FFD89A;
}
.brazil-block .grid { align-items: center; }
.brazil-block .eyebrow { color: #009C3B; }
.brazil-block .btn { margin-top: var(--s-3); }

/* Card de cupom da home (centralizado dentro do brazil-block) */
.home-coupon-card {
  background: #fff;
  border: 2px dashed var(--c-primary);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  max-width: 380px;
  margin: 0 auto;
  box-shadow: var(--sh-md);
  position: relative;
}
.home-coupon-card__center { text-align: center; }
.home-coupon-card__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #009C3B;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.home-coupon-card__label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-muted);
  font-weight: 700;
  margin-bottom: 8px;
  margin-top: 6px;
}
.home-coupon-card__code {
  font-family: var(--f-mono);
  font-weight: 800;
  font-size: clamp(26px, 6vw, 36px);
  color: var(--c-primary);
  letter-spacing: 0.10em;
  margin-bottom: 12px;
  word-break: break-all;
}
.home-coupon-card__sub {
  font-size: var(--fs-sm);
  color: var(--c-muted);
  margin-bottom: var(--s-3);
}
.home-coupon-card__locked {
  position: relative;
  margin-bottom: 12px;
}
.home-coupon-card__code--blurred {
  filter: blur(10px);
  user-select: none;
  pointer-events: none;
}
.home-coupon-card__lock-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--c-text);
  font-size: var(--fs-sm);
  font-weight: 700;
}

/* Bloco "Telão no bolso" — escuro, com mockups de phones */
.big-screen-block {
  background: linear-gradient(135deg, #0F1419 0%, #1F2937 100%);
  color: #fff;
}
.big-screen-block .grid { align-items: center; gap: var(--s-6); }
.big-screen-block h2 { color: #fff; }
.big-screen-block .eyebrow { color: var(--c-primary); }
.big-screen-block .lead { color: rgba(255, 255, 255, 0.85); }
.big-screen-block .btn--telao {
  background: var(--c-primary);
  color: #fff;
  margin-top: var(--s-3);
}
.big-screen-block__visual {
  text-align: center;
  position: relative;
}
.big-screen-block__phones {
  font-size: clamp(80px, 18vw, 120px);
  line-height: 1;
  position: relative;
}
.big-screen-block__phones span {
  display: inline-block;
}
.big-screen-block__phones .phone-left  { position: absolute; top: 0; left: 20%;  transform: rotate(-15deg); opacity: 0.95; }
.big-screen-block__phones .phone-mid   { position: relative; z-index: 1; }
.big-screen-block__phones .phone-right { position: absolute; top: 0; right: 20%; transform: rotate(15deg);  opacity: 0.95; }
.big-screen-block__ball {
  margin-top: var(--s-3);
  font-size: 0.5em;
}
.big-screen-block__pills {
  margin-top: var(--s-4);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.big-screen-block__pill {
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 700;
}
.big-screen-block__pill--primary {
  background: var(--c-primary);
  color: #fff;
}

/* Probabilidades — bullets premium com bola */
.home-probabilities__list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-top: var(--s-4);
}
.home-probabilities__cta { margin-top: var(--s-5); }
.home-probabilities .grid { align-items: center; }

/* Tags do card de probabilidade (favorito + popular + fire) */
.home-probabilities__tags {
  margin-top: var(--s-3);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.home-probabilities__fire {
  display: inline-flex;
  color: var(--c-fire);
  margin-left: auto;
}

/* Final CTA — botão primário com fundo laranja */
.btn-final-cta {
  background: var(--c-primary);
  color: #fff;
}
.final-cta__lead { color: rgba(255, 255, 255, 0.85); }
.final-cta__h2 { color: var(--c-white); }
.final-cta__action { margin-top: var(--s-5); }

/* Hero header / prizes / textos centralizados — utilitários reutilizados */
.home-section-head {
  margin-bottom: var(--s-6);
  text-align: center;
}
.home-prizes__footnote {
  margin-top: var(--s-5);
  font-size: var(--fs-sm);
  text-align: center;
  color: var(--c-muted);
}
.home-howit__cta { margin-top: var(--s-6); text-align: center; }
.home-ranking__cta { margin-top: var(--s-5); text-align: center; }

/* ============================================================
   public/contato.php — alinhamento com .ranking-hero
   ============================================================ */
.contato-card {
  margin-top: var(--s-5);
  text-align: left;
}
.contato-card__email { font-size: var(--fs-lg); }
.contato-card__meta {
  font-size: var(--fs-sm);
  color: var(--c-muted);
}
.contato-card__footnote {
  font-size: var(--fs-sm);
  color: var(--c-muted);
  margin-top: var(--s-3);
}

/* ============================================================
   public/jogos.php — calendário de jogos da Copa
   ============================================================ */
.jogos-day-h3 {
  margin-top: var(--s-6);
  font-family: var(--f-display);
  letter-spacing: -0.01em;
}
.jogos-vs {
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--c-muted);
}

/* ============================================================
   partials/footer.php — pequenas migrações inline (2026-05-27)
   ============================================================ */
.footer-brand-logo {
  height: 32px;
  filter: brightness(0) invert(1);
  margin-bottom: var(--s-3);
}
.footer-brand-h5 { margin-top: 0; }
.footer-brand-tagline { font-size: var(--fs-sm); }
.footer-nav-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: var(--fs-sm);
}
.footer-card-blurb {
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--r-md);
  padding: var(--s-4);
  margin-top: var(--s-6);
}
.footer-card-blurb p {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}
.footer-card-blurb strong { color: var(--c-primary-3); }
.footer-h5--gap { margin-top: var(--s-4); }

/* ============================================================
   SIGNUP STEP 1 — Success State (e-mail de confirmação enviado)
   ------------------------------------------------------------
   Substitui o form quando o controller seta a flash
   'signup_step1_success_email'. Tela inteira virou comemoração:
   confetti CSS, envelope animado em "voo", staggered fade-up,
   chip do e-mail destacado e dois CTAs claros.
   Respeita prefers-reduced-motion no final do bloco.
   ============================================================ */
.signup-success {
  position: relative;
  text-align: center;
  padding: var(--s-3) var(--s-2) var(--s-2);
  overflow: hidden;          /* clip do confetti dentro do auth-card */
  isolation: isolate;
}

/* ---------- Confetti (CSS-based, 24 partículas) ---------- */
.signup-success__confetti {
  position: absolute;
  inset: -16px -16px auto -16px;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.signup-success__confetti-piece {
  position: absolute;
  top: -24px;
  opacity: 0;
  transform: translate3d(0, -24px, 0) rotate(0deg);
  animation-name: signup-confetti-fall;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  will-change: transform, opacity;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
}
.signup-success__confetti-piece--sq { border-radius: 2px; }
.signup-success__confetti-piece--cr { border-radius: 50%; }
.signup-success__confetti-piece--rc { border-radius: 1px; }
@keyframes signup-confetti-fall {
  0%   { transform: translate3d(0, -24px, 0) rotate(0deg);   opacity: 0; }
  8%   { opacity: 1; }
  100% { transform: translate3d(var(--signup-confetti-x, 0), 480px, 0) rotate(960deg); opacity: 0; }
}

/* ---------- Envelope + halo + checkmark ---------- */
.signup-success__icon {
  position: relative;
  width: 128px;
  height: 128px;
  margin: var(--s-3) auto var(--s-5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.signup-success__icon-ring {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 136, 0, 0.18) 0%, rgba(255, 136, 0, 0) 70%);
  animation: signup-success-halo 2.6s ease-in-out infinite;
}
.signup-success__icon-ring--two {
  inset: -4px;
  background: radial-gradient(circle at 50% 50%, rgba(15, 62, 153, 0.10) 0%, rgba(15, 62, 153, 0) 70%);
  animation-delay: 0.6s;
  animation-duration: 3.2s;
}
@keyframes signup-success-halo {
  0%, 100% { transform: scale(0.92); opacity: 0.6; }
  50%      { transform: scale(1.08); opacity: 1; }
}
.signup-success__icon-svg {
  position: relative;
  width: 88px;
  height: 88px;
  z-index: 2;
  filter: drop-shadow(0 8px 20px rgba(255, 136, 0, 0.30));
  animation: signup-success-envelope-in 700ms cubic-bezier(0.34, 1.56, 0.64, 1) both,
             signup-success-envelope-float 3.4s ease-in-out 700ms infinite;
}
@keyframes signup-success-envelope-in {
  0%   { transform: translateY(48px) scale(0.5); opacity: 0; }
  60%  { transform: translateY(-6px) scale(1.06); opacity: 1; }
  100% { transform: translateY(0) scale(1);       opacity: 1; }
}
@keyframes signup-success-envelope-float {
  0%, 100% { transform: translateY(0)    rotate(0deg);   }
  50%      { transform: translateY(-6px) rotate(-1.5deg); }
}
.signup-success__icon-check-bg,
.signup-success__icon-check {
  opacity: 0;
  transform-origin: 48px 46px;          /* centro do círculo verde */
  transform-box: fill-box;
}
.signup-success__icon-check-bg {
  animation: signup-success-check-bg 420ms cubic-bezier(0.34, 1.56, 0.64, 1) 800ms both;
}
.signup-success__icon-check {
  animation: signup-success-check-draw 360ms cubic-bezier(0.22, 1, 0.36, 1) 1100ms both;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
}
@keyframes signup-success-check-bg {
  0%   { opacity: 0; transform: scale(0.2); }
  60%  { opacity: 1; transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes signup-success-check-draw {
  0%   { opacity: 0; stroke-dashoffset: 24; }
  20%  { opacity: 1; }
  100% { opacity: 1; stroke-dashoffset: 0; }
}

/* Trail (3 pontos) atrás do envelope — sensação de "voou pra você" */
.signup-success__icon-trail {
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  z-index: 1;
  opacity: 0;
  animation: signup-success-trail-in 600ms ease 1200ms forwards;
}
.signup-success__icon-trail span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-primary);
  opacity: 0.4;
  animation: signup-success-trail-pulse 1.6s ease-in-out infinite;
}
.signup-success__icon-trail span:nth-child(2) { animation-delay: 0.15s; background: var(--c-primary-3); }
.signup-success__icon-trail span:nth-child(3) { animation-delay: 0.30s; background: #FFD089; }
@keyframes signup-success-trail-in {
  to { opacity: 1; }
}
@keyframes signup-success-trail-pulse {
  0%, 100% { transform: scale(0.7); opacity: 0.3; }
  50%      { transform: scale(1.2); opacity: 1; }
}

/* ---------- Eyebrow / Title / Lead — stagger fade-up ---------- */
.signup-success__eyebrow,
.signup-success__title,
.signup-success__lead,
.signup-success__email-chip,
.signup-success__hints,
.signup-success__actions,
.signup-success__sticky-foot,
.signup-success__foot {
  position: relative;
  z-index: 1;
  opacity: 0;
  transform: translateY(12px);
  animation: signup-success-fade-up 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.signup-success__eyebrow     { animation-delay: 280ms; }
.signup-success__title       { animation-delay: 380ms; }
.signup-success__lead        { animation-delay: 480ms; }
.signup-success__email-chip  { animation-delay: 580ms; }
.signup-success__hints       { animation-delay: 700ms; }
.signup-success__actions     { animation-delay: 820ms; }
.signup-success__sticky-foot { animation-delay: 940ms; }
.signup-success__foot        { animation-delay: 1080ms; }
@keyframes signup-success-fade-up {
  to { opacity: 1; transform: translateY(0); }
}

.signup-success__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--c-field-2);
  background: #E8F5EC;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  margin-bottom: var(--s-3);
  line-height: 1.2;
}
.signup-success__eyebrow::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c-field);
  box-shadow: 0 0 0 0 rgba(57, 157, 37, 0.55);
  animation: signup-success-dot 1.8s ease-in-out infinite;
}
@keyframes signup-success-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(57, 157, 37, 0.55); }
  50%      { box-shadow: 0 0 0 6px rgba(57, 157, 37, 0); }
}

.signup-success__title {
  font-size: clamp(1.5rem, 5vw + 0.4rem, 2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: var(--c-text);
  margin: 0 0 var(--s-3);
}
.signup-success__title strong {
  color: var(--c-primary);
  font-weight: 800;
  display: inline-block;
  background: linear-gradient(90deg, var(--c-primary) 0%, #FF6A00 50%, var(--c-primary) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: signup-success-shine 3.2s ease-in-out 1s infinite;
}
@keyframes signup-success-shine {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.signup-success__lead {
  font-size: var(--fs-base);
  color: var(--c-muted);
  line-height: 1.55;
  margin: 0 auto var(--s-4);
  max-width: 38ch;
}
.signup-success__lead strong { color: var(--c-text); font-weight: 700; }

/* ---------- Email chip (highlight do endereço enviado) ---------- */
.signup-success__email-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  margin: 0 auto var(--s-5);
  padding: 10px 16px;
  background: linear-gradient(180deg, #FFF4E0 0%, #FFE6BD 100%);
  border: 1.5px solid #FFC47A;
  border-radius: var(--r-pill);
  color: #6B4500;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: -0.005em;
  box-shadow: 0 4px 14px rgba(255, 136, 0, 0.18),
              inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.signup-success__email-chip svg {
  flex-shrink: 0;
  color: var(--c-primary);
}
.signup-success__email-chip-addr {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 240px;
  font-family: var(--f-sans);
}
@media (min-width: 480px) {
  .signup-success__email-chip-addr { max-width: 320px; }
}

/* ---------- Hints (caixa de spam / até 1 minuto) ---------- */
.signup-success__hints {
  list-style: none;
  margin: 0 auto var(--s-5);
  padding: var(--s-3) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  background: #F7F8FB;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  max-width: 380px;
}
.signup-success__hint {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-sm);
  color: var(--c-text);
  line-height: 1.45;
}
.signup-success__hint strong { font-weight: 700; color: var(--c-text); }
.signup-success__hint-ico {
  flex-shrink: 0;
  width: 26px; height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  color: var(--c-primary);
}

/* ---------- Actions (CTA principal + reenviar) ---------- */
.signup-success__actions {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
@media (min-width: 520px) {
  .signup-success__actions {
    flex-direction: row;
    justify-content: center;
    gap: var(--s-3);
  }
}
.signup-success__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  font-weight: 700;
  letter-spacing: -0.005em;
  min-height: 52px;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--c-primary) 0%, var(--c-primary-2) 100%);
  box-shadow: 0 8px 22px rgba(255, 136, 0, 0.36),
              inset 0 1px 0 rgba(255, 255, 255, 0.20);
  position: relative;
  overflow: hidden;
}
.signup-success__cta::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  animation: signup-success-cta-shine 3.8s ease-in-out 1.4s infinite;
}
@keyframes signup-success-cta-shine {
  0%   { left: -100%; }
  60%  { left: 140%; }
  100% { left: 140%; }
}
.signup-success__cta:hover {
  box-shadow: 0 12px 28px rgba(255, 136, 0, 0.46);
  transform: translateY(-1px);
}
.signup-success__cta:active { transform: translateY(0); }
.signup-success__cta svg { width: 18px; height: 18px; }

.signup-success__resend {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  background: transparent;
  border: 1.5px solid var(--c-line-2);
  color: var(--c-muted);
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: var(--fs-sm);
  min-height: 48px;
  transition: border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.signup-success__resend:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
  background: rgba(255, 136, 0, 0.04);
}
.signup-success__resend svg { width: 16px; height: 16px; }

/* ---------- Sticky foot (instrução final) ---------- */
.signup-success__sticky-foot {
  padding: var(--s-3) var(--s-4);
  background: linear-gradient(135deg, #FFF8EC 0%, #FFE9C4 100%);
  border: 1px solid #FFC47A;
  border-radius: var(--r-md);
  color: #6B4500;
  font-size: var(--fs-sm);
  line-height: 1.5;
  margin: 0 0 var(--s-4);
  text-align: center;
}
.signup-success__sticky-foot strong { color: #4A3000; font-weight: 800; }

/* ---------- Foot (errou o e-mail / começar de novo) ---------- */
.signup-success__foot {
  text-align: center;
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-sm);
  color: var(--c-muted);
}
.signup-success__foot a {
  font-weight: 700;
  color: var(--c-primary);
  text-decoration: none;
}
.signup-success__foot a:hover { color: var(--c-primary-2); text-decoration: underline; }

/* ---------- Mobile fine-tune ---------- */
@media (max-width: 480px) {
  .signup-success__icon { width: 112px; height: 112px; margin-bottom: var(--s-4); }
  .signup-success__icon-svg { width: 76px; height: 76px; }
  .signup-success__lead { font-size: var(--fs-sm); }
  .signup-success__hints { padding: var(--s-3); }
  .signup-success__email-chip-addr { max-width: 200px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .signup-success__confetti-piece,
  .signup-success__icon-ring,
  .signup-success__icon-svg,
  .signup-success__icon-check-bg,
  .signup-success__icon-check,
  .signup-success__icon-trail,
  .signup-success__icon-trail span,
  .signup-success__eyebrow::before,
  .signup-success__title strong,
  .signup-success__cta::after,
  .signup-success__eyebrow,
  .signup-success__title,
  .signup-success__lead,
  .signup-success__email-chip,
  .signup-success__hints,
  .signup-success__actions,
  .signup-success__sticky-foot,
  .signup-success__foot {
    animation: none !important;
    transition: none !important;
  }
  .signup-success__eyebrow,
  .signup-success__title,
  .signup-success__lead,
  .signup-success__email-chip,
  .signup-success__hints,
  .signup-success__actions,
  .signup-success__sticky-foot,
  .signup-success__foot,
  .signup-success__icon-svg,
  .signup-success__icon-check-bg,
  .signup-success__icon-check,
  .signup-success__icon-trail {
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
  .signup-success__confetti { display: none; }
  .signup-success__title strong {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    color: var(--c-primary);
    -webkit-text-fill-color: var(--c-primary);
  }
}

/* ============================================================
   ===== COMO FUNCIONA — redesign v2 =====
   public/como_funciona.php — seções respiráveis, stepper, cards
   de bracket, termômetro (feature grid), pódio de prêmios, trust.
   Mobile-first. Entrada fade-up reaproveita [data-reveal-on-scroll]
   + [data-reveal-stagger="80"] (JS já existente). Reduced-motion no fim.
   ============================================================ */

.cf-page { padding-top: var(--s-6); }
@media (min-width: 900px) { .cf-page { padding-top: var(--s-7); } }

/* ---- Helpers de texto ---- */
.cf-hl { color: var(--c-primary); font-weight: 800; }

/* ---- HERO ---- */
.cf-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  align-items: center;
  margin-bottom: var(--s-7);
}
@media (min-width: 860px) {
  .cf-hero {
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--s-7);
    margin-bottom: var(--s-8);
  }
}
.cf-hero__h1 {
  font-size: clamp(1.7rem, 4.2vw + 0.6rem, 2.7rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: var(--s-2) 0 var(--s-3);
  font-family: var(--f-display);
  font-weight: 800;
}
.cf-hero__h1 strong { color: var(--c-primary); }
.cf-hero__lead {
  font-size: var(--fs-base);
  color: var(--c-muted);
  line-height: 1.6;
  margin-bottom: var(--s-4);
  max-width: 52ch;
}
@media (min-width: 700px) { .cf-hero__lead { font-size: var(--fs-lg); } }
.cf-hero__lead strong { color: var(--c-text); font-weight: 700; }
.cf-hero__chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; }
.cf-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm); font-weight: 700; color: var(--c-text);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  padding: 7px 14px;
  box-shadow: var(--sh-sm);
}
.cf-chip svg { color: var(--c-field-2); flex-shrink: 0; }

/* ---- Slots de imagem Gemini + fallback SVG ---- */
.cf-illustration {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  line-height: 0;
  box-shadow: var(--sh-lg);
  border: 1px solid rgba(17, 17, 17, 0.06);
}
.cf-illustration svg,
.cf-illustration img { display: block; width: 100%; height: auto; }
.cf-illustration--hero { max-width: 460px; margin-inline: auto; width: 100%; }
.cf-illustration--thermo,
.cf-illustration--prizes { box-shadow: var(--sh-md); }

/* ---- Seção genérica (respiro generoso) ---- */
.cf-section { padding: var(--s-7) 0; border-top: 1px solid var(--c-line); }
@media (min-width: 900px) { .cf-section { padding: var(--s-8) 0; } }
.cf-section:first-of-type { border-top: 0; }
.cf-section--tinted {
  position: relative;
  border-top: 0;
  background: linear-gradient(180deg, #FFFBF4 0%, #FFF6EA 100%);
  border-radius: var(--r-xl);
  padding: var(--s-7) var(--s-5);
  margin: var(--s-6) 0;
}
@media (min-width: 700px) { .cf-section--tinted { padding: var(--s-7) var(--s-6); } }

.cf-section__head { text-align: center; max-width: 56ch; margin: 0 auto var(--s-6); }
.cf-kicker {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-primary);
  background: rgba(255, 136, 0, 0.10);
  border-radius: var(--r-pill);
  padding: 6px 13px;
  margin-bottom: var(--s-3);
}
.cf-kicker svg { flex-shrink: 0; }
.cf-section__title {
  font-size: clamp(1.4rem, 2.6vw + 0.7rem, 2.1rem);
  line-height: 1.18;
  letter-spacing: -0.015em;
  margin-bottom: var(--s-2);
  font-family: var(--f-display); font-weight: 800;
}
.cf-section__sub { color: var(--c-muted); font-size: var(--fs-base); line-height: 1.55; margin: 0; }
.cf-section__sub--left { text-align: left; margin-bottom: var(--s-4); }

/* ---- STEPPER (passo a passo) ---- */
.cf-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--s-4);
  counter-reset: cfstep;
}
@media (min-width: 760px) { .cf-steps { grid-template-columns: 1fr 1fr; gap: var(--s-5); } }
.cf-step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4);
  align-items: start;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.cf-step:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: rgba(255,136,0,0.35); }
.cf-step__num {
  position: absolute; top: var(--s-4); right: var(--s-4);
  font-family: var(--f-display); font-weight: 800;
  font-size: 2.2rem; line-height: 1;
  color: var(--c-line-2);
  opacity: 0.7;
  pointer-events: none;
}
.cf-step__icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cf-step__icon--primary { background: rgba(255,136,0,0.12); color: var(--c-primary); }
.cf-step__icon--accent  { background: rgba(15,62,153,0.10);  color: var(--c-accent); }
.cf-step__icon--field   { background: rgba(57,157,37,0.12);  color: var(--c-field-2); }
.cf-step__icon--fire    { background: rgba(230,57,70,0.10);  color: var(--c-fire); }
.cf-step__body { min-width: 0; }
.cf-step__title { font-size: var(--fs-lg); font-weight: 700; color: var(--c-text); margin: 2px 0 6px; line-height: 1.25; padding-right: 38px; }
.cf-step__body p { color: var(--c-muted); font-size: var(--fs-sm); line-height: 1.55; margin: 0 0 var(--s-3); }
.cf-step__body p strong { color: var(--c-text); font-weight: 700; }
.cf-step__tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); font-weight: 700; color: var(--c-field-2);
  background: #EAF6E6; border-radius: var(--r-pill);
  padding: 5px 11px;
}
.cf-step__tag svg { flex-shrink: 0; }

/* ---- CALLOUT (cupom) ---- */
.cf-callout {
  display: flex; gap: var(--s-4); align-items: flex-start;
  background: linear-gradient(135deg, #FFFBF2 0%, #FFEFD4 100%);
  border: 1px solid rgba(255,136,0,0.20);
  border-left: 4px solid var(--c-primary);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5);
  margin-top: var(--s-5);
  box-shadow: 0 2px 10px rgba(255,136,0,0.08);
}
.cf-callout__icon {
  flex-shrink: 0; width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--c-primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.cf-callout__body { min-width: 0; }
.cf-callout__title { display: block; font-size: var(--fs-base); color: var(--c-text); margin-bottom: 4px; font-weight: 800; }
.cf-callout__body p { margin: 0; color: var(--c-text); font-size: var(--fs-sm); line-height: 1.55; }

/* ---- TABELA de pontuação (estende .ranking-table) ---- */
.cf-table-wrap { margin: 0 0 var(--s-6); box-shadow: var(--sh-md); }
.cf-table tbody tr:first-child td { background: rgba(255,136,0,0.05); }
.cf-table tbody tr:first-child td strong { color: var(--c-primary); }

/* Subtítulo de seção (bracket) */
.cf-subhead {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-xl); font-weight: 800; color: var(--c-text);
  margin: 0 0 var(--s-2); line-height: 1.25;
}
.cf-subhead svg { color: var(--c-primary); flex-shrink: 0; }

/* ---- BRACKET cards ---- */
.cf-bracket-grid {
  display: grid; gap: var(--s-3);
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: var(--s-6);
}
@media (min-width: 620px) { .cf-bracket-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-4); } }
@media (min-width: 880px) { .cf-bracket-grid { grid-template-columns: repeat(5, 1fr); } }
.cf-bracket {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 4px;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-3);
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.cf-bracket:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.cf-bracket__icon {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-light); color: var(--c-muted);
  margin-bottom: 4px;
}
.cf-bracket__pts { font-family: var(--f-display); font-weight: 800; font-size: 1.75rem; line-height: 1; color: var(--c-text); }
.cf-bracket__pts::after { content: " pts"; font-size: var(--fs-xs); font-weight: 700; color: var(--c-muted); }
.cf-bracket__label { font-size: var(--fs-sm); color: var(--c-muted); font-weight: 600; line-height: 1.25; }
.cf-bracket--champ {
  background: var(--grad-champion);
  border-color: #F0C25A;
  grid-column: span 2;
}
@media (min-width: 620px) { .cf-bracket--champ { grid-column: auto; } }
.cf-bracket--champ .cf-bracket__icon { background: rgba(255,255,255,0.55); color: #8A5A0A; }
.cf-bracket--champ .cf-bracket__pts { color: #6E4708; }
.cf-bracket--champ .cf-bracket__pts::after { color: #8A5A0A; }
.cf-bracket--champ .cf-bracket__label { color: #6E4708; font-weight: 700; }

/* ---- INDICAÇÃO (bloco destacado) ---- */
.cf-referral {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  align-items: center;
  background: var(--grad-trust);
  color: #fff;
  border-radius: var(--r-xl);
  padding: var(--s-5);
  box-shadow: var(--sh-md);
}
@media (min-width: 720px) {
  .cf-referral { grid-template-columns: auto 1fr auto; gap: var(--s-5); padding: var(--s-6); }
}
.cf-referral__icon {
  width: 60px; height: 60px; border-radius: 16px;
  background: rgba(255,255,255,0.16);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0;
}
.cf-referral__body { min-width: 0; }
.cf-referral__title { font-size: var(--fs-xl); font-weight: 800; color: #fff; margin: 0 0 6px; line-height: 1.2; }
.cf-referral__body p { color: rgba(255,255,255,0.92); font-size: var(--fs-sm); line-height: 1.55; margin: 0; }
.cf-referral__body p .cf-hl { color: #FFD56B; }
.cf-referral__link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--s-3);
  font-weight: 700; color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.4);
  padding-bottom: 1px;
  transition: border-color var(--dur-fast) var(--ease);
}
.cf-referral__link:hover { color: #fff; border-bottom-color: #fff; }
.cf-referral__pills { display: flex; gap: var(--s-3); }
@media (min-width: 720px) { .cf-referral__pills { flex-direction: column; gap: var(--s-2); } }
.cf-referral__pill {
  display: flex; flex-direction: column; align-items: center;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: var(--r-md);
  padding: 8px 16px; min-width: 84px;
}
.cf-referral__pill strong { font-family: var(--f-display); font-size: 1.5rem; line-height: 1; color: #fff; font-weight: 800; }
.cf-referral__pill small { font-size: var(--fs-xs); color: rgba(255,255,255,0.85); margin-top: 2px; }
.cf-referral__pill--bonus { background: var(--c-primary); border-color: var(--c-primary-3); }

/* ---- DESEMPATE ---- */
.cf-tiebreak {
  list-style: none; margin: 0 auto; padding: 0;
  max-width: 620px;
  display: grid; gap: var(--s-3);
}
.cf-tiebreak__item {
  display: flex; align-items: center; gap: var(--s-4);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5);
  box-shadow: var(--sh-sm);
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.cf-tiebreak__item:hover { transform: translateX(3px); box-shadow: var(--sh-md); }
.cf-tiebreak__rank {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  background: var(--grad-hero); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-weight: 800; font-size: var(--fs-base);
}
.cf-tiebreak__icon { flex-shrink: 0; color: var(--c-accent); display: inline-flex; }
.cf-tiebreak__item p { margin: 0; font-size: var(--fs-base); color: var(--c-text); line-height: 1.4; }
.cf-tiebreak__item p strong { color: var(--c-text); font-weight: 800; }

/* ---- TERMÔMETRO da torcida ---- */
.cf-thermo-wrap { display: grid; grid-template-columns: 1fr; gap: var(--s-5); align-items: center; }
@media (min-width: 880px) { .cf-thermo-wrap { grid-template-columns: 1.3fr 0.7fr; gap: var(--s-6); } }
.cf-feature-grid { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 560px) { .cf-feature-grid { grid-template-columns: 1fr 1fr; } }
.cf-feature {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.cf-feature:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.cf-feature__icon {
  width: 50px; height: 50px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: var(--s-3);
}
.cf-feature__icon--accent  { background: rgba(15,62,153,0.10);  color: var(--c-accent); }
.cf-feature__icon--primary { background: rgba(255,136,0,0.12);  color: var(--c-primary); }
.cf-feature__icon--fire    { background: rgba(230,57,70,0.10);  color: var(--c-fire); }
.cf-feature__icon--field   { background: rgba(57,157,37,0.12);  color: var(--c-field-2); }
.cf-feature__title { font-size: var(--fs-lg); font-weight: 700; color: var(--c-text); margin: 0 0 6px; }
.cf-feature p { font-size: var(--fs-sm); color: var(--c-muted); line-height: 1.55; margin: 0; }
.cf-illustration--thermo { max-width: 360px; margin-inline: auto; width: 100%; }

/* Disclaimer (zero aposta) */
.cf-disclaimer {
  display: flex; gap: var(--s-3); align-items: flex-start;
  margin: var(--s-5) 0 0;
  background: #F7F8FA;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  font-size: var(--fs-sm); color: var(--c-muted); line-height: 1.55;
}
.cf-disclaimer__icon { flex-shrink: 0; color: var(--c-muted); display: inline-flex; margin-top: 1px; }
.cf-disclaimer strong { color: var(--c-text); }

/* ---- PRÊMIOS (pódio) ---- */
.cf-podium {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  align-items: stretch;
  margin-bottom: var(--s-5);
}
@media (min-width: 720px) {
  .cf-podium {
    grid-template-columns: 1fr 1fr 1fr;
    align-items: end;
    gap: var(--s-4);
  }
}
.cf-prize {
  position: relative;
  text-align: center;
  background: var(--c-white);
  border: 1.5px solid var(--c-line);
  border-radius: var(--r-xl);
  padding: var(--s-6) var(--s-5) var(--s-5);
  display: flex; flex-direction: column; align-items: center;
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.cf-prize:hover { transform: translateY(-6px); box-shadow: var(--sh-xl); }
.cf-prize__rank {
  font-family: var(--f-display); font-weight: 800; font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  padding: 3px 12px; border-radius: var(--r-pill);
  margin-bottom: var(--s-3);
}
.cf-prize__medal { display: inline-flex; margin-bottom: var(--s-2); }
.cf-prize__device { display: inline-flex; margin-bottom: var(--s-3); color: var(--c-text); }
.cf-prize__name { font-family: var(--f-display); font-weight: 800; font-size: var(--fs-xl); margin: 0 0 4px; line-height: 1.15; }
.cf-prize__desc { font-size: var(--fs-sm); color: var(--c-muted); margin: 0; }
.cf-prize__star { color: var(--c-primary); font-weight: 800; }
.cf-prize__crown {
  position: absolute; top: 12px; right: 14px;
  color: #E89818;
}
/* Ouro — destaque */
.cf-prize--gold {
  background: var(--grad-champion);
  border-color: #F0C25A;
}
@media (min-width: 720px) {
  .cf-prize--gold { transform: translateY(-16px); box-shadow: var(--sh-lg); padding-top: var(--s-7); }
  .cf-prize--gold:hover { transform: translateY(-22px); }
}
.cf-prize--gold .cf-prize__rank { background: rgba(255,255,255,0.6); color: #6E4708; }
.cf-prize--gold .cf-prize__name { color: #5C3C06; }
.cf-prize--gold .cf-prize__medal { color: #B07810; }
.cf-prize--gold .cf-prize__device { color: #6E4708; }
.cf-prize--gold .cf-prize__desc { color: #7A5414; }
/* Prata */
.cf-prize--silver .cf-prize__rank { background: #ECEEF3; color: #5C636E; }
.cf-prize--silver .cf-prize__medal { color: #8E96A2; }
/* Bronze */
.cf-prize--bronze .cf-prize__rank { background: #F7E6D2; color: #8C5419; }
.cf-prize--bronze .cf-prize__medal { color: #B97A35; }

/* Slot de imagem dos prêmios — ocupa a largura toda abaixo do pódio em telas largas */
.cf-illustration--prizes {
  max-width: 420px; margin: var(--s-2) auto 0; width: 100%;
}
@media (min-width: 720px) {
  .cf-illustration--prizes { grid-column: 1 / -1; max-width: 560px; margin-top: var(--s-4); }
}

/* Nota dos prêmios (seminovos + frete) */
.cf-prize-note { display: grid; gap: var(--s-2); margin: var(--s-6) auto 0; max-width: 640px; padding-top: var(--s-5); border-top: 1px solid var(--c-line); }
.cf-prize-note__row {
  display: flex; gap: var(--s-3); align-items: flex-start;
  font-size: var(--fs-sm); color: var(--c-muted); line-height: 1.5;
}
.cf-prize-note__row svg { flex-shrink: 0; color: var(--c-primary); margin-top: 1px; }
.cf-prize-note strong { color: var(--c-text); }
.cf-prize-note a { color: var(--c-primary); font-weight: 700; display: inline-flex; align-items: center; gap: 3px; }
.cf-prize-note a:hover { text-decoration: underline; }

/* ---- TRUST (concurso cultural + LGPD) ---- */
.cf-trust-grid { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 760px) { .cf-trust-grid { grid-template-columns: 1fr 1fr; gap: var(--s-5); } }
.cf-trust-block {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--sh-sm);
}
@media (min-width: 700px) { .cf-trust-block { padding: var(--s-6); } }
.cf-trust-block__icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: rgba(15,62,153,0.10); color: var(--c-accent);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: var(--s-3);
}
.cf-trust-block__icon--lock { background: rgba(57,157,37,0.12); color: var(--c-field-2); }
.cf-trust-block__title { font-size: var(--fs-lg); font-weight: 700; color: var(--c-text); margin: 0 0 var(--s-2); line-height: 1.25; }
.cf-trust-block p { color: var(--c-muted); font-size: var(--fs-sm); line-height: 1.6; margin: 0; }
.cf-trust-block p strong { color: var(--c-text); }
.cf-trust-block a { color: var(--c-primary); font-weight: 700; display: inline-flex; align-items: center; gap: 3px; }
.cf-trust-block a:hover { text-decoration: underline; }
.cf-trust-block code {
  font-family: var(--f-mono); font-size: 0.92em;
  background: var(--c-light); padding: 1px 6px; border-radius: 5px; color: var(--c-text);
}

/* ---- CTA final ---- */
.cf-cta {
  text-align: center;
  background: var(--grad-hero);
  color: #fff;
  border-radius: var(--r-xl);
  padding: var(--s-7) var(--s-5);
  margin-top: var(--s-7);
  box-shadow: var(--sh-lg);
}
@media (min-width: 700px) { .cf-cta { padding: var(--s-8) var(--s-6); } }
.cf-cta__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(255,255,255,0.18); color: #fff;
  margin-bottom: var(--s-4);
}
.cf-cta__title { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.4rem, 3vw + 0.6rem, 2rem); color: #fff; margin: 0 0 var(--s-2); line-height: 1.2; }
.cf-cta__sub { color: rgba(255,255,255,0.92); font-size: var(--fs-base); margin: 0 0 var(--s-5); }
.cf-cta .btn--primary {
  background: #fff; color: var(--c-primary-2);
}
.cf-cta .btn--primary:hover {
  background: var(--c-ink); color: #fff;
  box-shadow: 0 12px 32px rgba(0,0,0,0.25);
}
.cf-cta .btn svg { flex-shrink: 0; }

/* ---- Reduced motion (extra do bloco genérico [data-reveal*]) ---- */
@media (prefers-reduced-motion: reduce) {
  .cf-step, .cf-bracket, .cf-feature, .cf-prize, .cf-tiebreak__item,
  .cf-trust-block, .cf-prize--gold {
    transition: none !important;
  }
  .cf-step:hover, .cf-bracket:hover, .cf-feature:hover, .cf-prize:hover,
  .cf-tiebreak__item:hover, .cf-trust-block:hover {
    transform: none !important;
  }
  .cf-prize--gold { transform: none !important; }
}

/* ============================================================
   PREMIAÇÃO TOP-10 (2026) — agente Copy/Prêmios
   Estrutura nova: 1º–5º em cards + bloco "6º–10º", e indicador de
   prêmio na tabela de ranking. Reaproveita .prize-card / .ranking-pos /
   .ranking-table já definidos acima; aqui só o que é novo.
   ============================================================ */

/* --- Grade de prêmios 1º–10º (home + /premios) ---
   6 cards numa grade 2 linhas × 3 colunas no desktop. A grade carrega a
   hierarquia descendente: LINHA 1 = pódio 1º/2º/3º (tier 1, o sonho) ≫
   LINHA 2 = 4º, 5º (tier 2) + bloco 6º–10º (tier 3, o mais discreto).
   1 col mobile, 2 col tablet, 3 col desktop. */
.prize-grid { display: grid; gap: var(--s-5); grid-template-columns: 1fr; }
@media (min-width: 600px) { .prize-grid--top5 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 920px) {
  .prize-grid--top5 { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
  /* No desktop o pódio (linha 1) ganha respiro extra e fica levemente elevado */
  .prize-grid--top5 .prize-card[data-rank="1"],
  .prize-grid--top5 .prize-card[data-rank="2"],
  .prize-grid--top5 .prize-card[data-rank="3"] { transform: translateY(-8px); }
  .prize-grid--top5 .prize-card[data-rank="1"]:hover,
  .prize-grid--top5 .prize-card[data-rank="2"]:hover,
  .prize-grid--top5 .prize-card[data-rank="3"]:hover { transform: translateY(-14px); }
}

/* --- Tier 2: 4º e 5º — mais sóbrios que o pódio ---
   Surface neutra e plana (sem elevação de base), emoji e título menores, e
   selo de posição neutro (cinza), nunca o laranja/azul vivo, pra não disputar
   atenção com as medalhas. */
.prize-card[data-rank="4"],
.prize-card[data-rank="5"] {
  background: var(--c-white);
  border-color: var(--c-line);
  box-shadow: none;
}
.prize-card[data-rank="4"] .rank,
.prize-card[data-rank="5"] .rank {
  background: var(--c-light);
  border: 1px solid var(--c-line);
  color: var(--c-muted);
}
.prize-card[data-rank="4"] .prize-emoji,
.prize-card[data-rank="5"] .prize-emoji { font-size: 52px; }
@media (min-width: 700px) {
  .prize-card[data-rank="4"] .prize-emoji,
  .prize-card[data-rank="5"] .prize-emoji { font-size: 60px; }
}
.prize-card[data-rank="4"] .prize-name,
.prize-card[data-rank="5"] .prize-name { font-size: var(--fs-lg); color: var(--c-text); }

/* --- Tier 3: bloco 6º–10º (todos ganham o mesmo modelo) ---
   O card MAIS discreto da grade: surface clara, borda sutil, compacto. Ocupa
   uma célula igual às demais. Um selo "5 ganham" comunica que são 5 premiados
   sem recorrer a banner/gradiente chamativo. */
.prize-card--group {
  background: var(--c-light);
  border-color: var(--c-line);
  border-style: dashed;
  box-shadow: none;
}
.prize-card--group .prize-emoji { font-size: 46px; opacity: 0.85; }
@media (min-width: 700px) { .prize-card--group .prize-emoji { font-size: 54px; } }
.prize-card--group .prize-name { font-size: var(--fs-lg); color: var(--c-text); }
.prize-card--group .prize-desc { color: var(--c-muted); }
.prize-card--group .prize-desc strong { color: var(--c-text); }
.prize-card--group .rank.rank--range {
  position: static;
  display: inline-flex; align-items: center; gap: 5px;
  width: auto; height: auto;
  border-radius: var(--r-pill);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  color: var(--c-muted);
  font-family: var(--f-display); font-weight: 700;
  font-size: var(--fs-xs); letter-spacing: 0.02em;
  padding: 5px 14px;
  margin-bottom: var(--s-2);
}
/* Pílula "5 ganham" — comunica os cinco premiados de forma discreta */
.prize-card--group .prize-winners {
  display: inline-block;
  margin: var(--s-3) auto 0;
  font-size: var(--fs-xs); font-weight: 700;
  color: var(--c-muted);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  padding: 4px 12px;
}

/* --- /como-funciona: lista 4º–10º abaixo do pódio --- */
.cf-prize-rest {
  list-style: none; margin: var(--s-5) auto 0; padding: 0;
  max-width: 640px; display: grid; gap: var(--s-2);
}
.cf-prize-rest__item {
  display: flex; align-items: center; gap: var(--s-3);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: 12px var(--s-4);
}
/* 6º–10º = a linha mais discreta do conjunto (tier 3): surface neutra clara,
   borda tracejada sutil — coerente com o card "6º–10º" da home/premios.
   Nunca mais chamativa que 4º/5º. */
.cf-prize-rest__item--group {
  background: var(--c-light);
  border-style: dashed;
  border-color: var(--c-line);
}
.cf-prize-rest__rank {
  font-family: var(--f-display); font-weight: 800; color: var(--c-primary);
  min-width: 56px; font-size: var(--fs-base);
}
.cf-prize-rest__item--group .cf-prize-rest__rank { color: var(--c-muted); }
.cf-prize-rest__name { font-weight: 700; color: var(--c-text); }
.cf-prize-rest__item--group .cf-prize-rest__name { font-weight: 600; }
.cf-prize-rest__tag { margin-left: auto; font-size: var(--fs-xs); color: var(--c-muted); }

/* --- Ranking: banner da zona de premiação --- */
.ranking-prizezone-banner {
  display: flex; gap: var(--s-3); align-items: flex-start;
  background: rgba(255,136,0,0.07);
  border: 1px solid var(--c-primary-3);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  margin-top: var(--s-4);
}
.ranking-prizezone-banner__icon { color: var(--c-primary); flex-shrink: 0; margin-top: 1px; }
.ranking-prizezone-banner__txt { margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--c-text); }
.ranking-prizezone-banner__txt strong { color: var(--c-primary); }
.ranking-prizezone-banner__txt a { font-weight: 700; }

/* --- Ranking: coluna/indicador de prêmio (top 10) --- */
.ranking-row--prize { background: rgba(255,136,0,0.04); }
.ranking-row--prize:hover { background: rgba(255,136,0,0.08); }
.ranking-prize-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); font-weight: 700; color: var(--c-primary);
  background: rgba(255,136,0,0.10);
  border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}
.ranking-prize-chip__medal { font-size: var(--fs-sm); }
.ranking-prize-chip--none { color: var(--c-line-2); background: transparent; padding-left: 0; font-weight: 400; }
/* Divisória após o 10º colocado */
.ranking-prizezone-divider td {
  padding: 8px var(--s-4) !important;
  text-align: center;
  border-top: 2px dashed var(--c-primary-3) !important;
}
.ranking-prizezone-divider span { font-size: var(--fs-xs); color: var(--c-muted); font-style: italic; }
/* Esconde coluna "Prêmio" em telas pequenas pra não apertar a tabela */
@media (max-width: 560px) {
  .ranking-table--prizes .ranking-col-prize { display: none; }
}