/* Spin Club — página inicial. Usa as cores e a fonte de torneios.css (preto, laranja, Poppins). */
.patrocinio{display:flex; align-items:center; justify-content:center; gap:12px; padding:8px 20px; background:var(--card); border-bottom:1px solid var(--line); color:var(--text-2); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;}
.patrocinio img{width:auto; height:16px; filter:brightness(0);}   /* logo branco da Dunlop fica preto no fundo claro */

/* ---------- Topo da página ---------- */
/* O topo e o quadro do ranking são escuros nos dois temas: cores fixas, sem as variáveis do tema */
.home-hero{position:relative; overflow:hidden; padding:64px 0 60px; color:#FFFFFF; border-bottom:4px solid #FF6A00;
  background:linear-gradient(90deg, rgba(14, 13, 12, .62) 0%, rgba(14, 13, 12, .28) 50%, rgba(14, 13, 12, 0) 100%),
    url('../img/home-quadra.webp') center bottom / cover no-repeat, #0E0D0C;}   /* quadra escura com névoa laranja; véu à esquerda para o texto */
.hero-grade{display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr); gap:56px; align-items:center;}
.home-pilula{display:inline-flex; align-items:center; padding:5px 14px; margin-bottom:18px; border:1.5px solid #FF6A00; border-radius:100px; color:#FF8A1F; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;}
.home-pilula.clara{border-color:rgba(255,255,255,.28); color:#FFFFFF;}
.home-hero h1{font-size:clamp(40px, 6vw, 72px); line-height:.95; margin-bottom:22px; color:#FFFFFF;}
.home-hero h1 .laranja{color:#FF6A00;}
.home-hero .h1-apoio{color:#8F8984;}
.hero-lede{color:#CFCFCF; font-size:18px; max-width:540px; margin-bottom:26px;}
.hero-trio{display:flex; flex-wrap:wrap; gap:10px; list-style:none;}
.hero-trio a{display:inline-flex; align-items:center; gap:10px; min-height:46px; padding:0 18px 0 8px; border-radius:100px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); color:#FFFFFF; font-weight:700; font-style:italic; text-transform:uppercase; text-decoration:none;}
.hero-trio a:hover{border-color:#FF6A00;}
.hero-trio b{display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--grad); color:#fff; font-style:normal; font-size:14px;}
.hero-cta{display:flex; flex-wrap:wrap; gap:10px; margin-top:28px;}
.hero-cta .btn{font-style:italic; text-transform:uppercase; font-weight:700; box-shadow:0 12px 30px rgba(255,106,0,.35);}
.hero-cta .btn-contorno{box-shadow:none; color:#FFFFFF; border-color:rgba(255,255,255,.35);}
.hero-cta .btn-contorno:hover{border-color:#FF6A00;}
.hero-cta .so-cel{display:none;}

.login-home, .painel-home{background:var(--card); border:2px solid #FF6A00; border-radius:24px; padding:30px; color:var(--text); box-shadow:0 30px 70px rgba(0,0,0,.5), 0 0 0 6px rgba(255,106,0,.12);}
.login-home .enviar{font-style:italic; text-transform:uppercase; font-weight:700;}
.login-home h2{font-size:26px; margin-bottom:6px;}
.login-home > p{color:var(--text-2); font-size:14.5px; margin-bottom:18px;}
.login-home .enviar{width:100%;}

.painel-oi{color:var(--text-2); margin-bottom:12px;}
.painel-oi strong{color:var(--text);}
.painel-saldo{display:block; padding:18px; border-radius:18px; background:linear-gradient(135deg, rgba(255,106,0,.25), rgba(178, 59, 9,.06)); border:1px solid rgba(255,106,0,.45); color:var(--text); text-decoration:none; margin-bottom:12px;}
.painel-saldo span, .painel-ranking span{display:block; font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--text-2);}
.painel-saldo strong{display:block; font-size:40px; font-style:italic; line-height:1.1;}
.painel-saldo small, .painel-ranking small{color:var(--text-2); font-size:13.5px;}
.painel-ranking{padding:14px 18px; border-radius:18px; background:var(--card-2); margin-bottom:16px;}
.painel-ranking strong{display:block; font-size:22px; font-style:italic; text-transform:uppercase;}
.painel-jogar{width:100%; font-style:italic; text-transform:uppercase; font-weight:700;}
.painel-atalhos{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px;}
.painel-atalhos a{display:flex; align-items:center; justify-content:center; min-height:44px; border-radius:100px; background:#FFF1E6; border:1.5px solid #FFD2B0; color:var(--text); font-weight:600; font-size:14px; text-decoration:none; text-align:center;}
.painel-atalhos a:hover{border-color:var(--orange);}

/* ---------- Seus primeiros passos (logado) ---------- */
.primeiros-cabeca{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:20px;}
.primeiros-cabeca .home-texto{margin-bottom:0;}
.primeiros-progresso{flex:none; min-width:220px; text-align:right;}
.primeiros-progresso strong{display:block; font-size:28px; font-style:italic; line-height:1.1; margin-bottom:8px;}
.barra{-webkit-appearance:none; appearance:none; display:block; width:100%; height:10px; border:0; border-radius:100px; background:var(--card-2); overflow:hidden;}
.barra::-webkit-progress-bar{background:var(--card-2); border-radius:100px;}
.barra::-webkit-progress-value{background:var(--grad); border-radius:100px;}
.barra::-moz-progress-bar{background:var(--grad); border-radius:100px;}
.primeiros-lista{list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.primeiros-lista li{display:flex; align-items:center; gap:14px; padding:14px 18px; background:var(--card); border:1px solid var(--line); border-radius:16px;}
.primeiros-marca{flex:none; display:grid; place-items:center; width:36px; height:36px; border-radius:50%; border:2px solid var(--orange); color:var(--orange-2); font-weight:700; font-style:italic;}
.primeiros-texto{flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.35;}
.primeiros-texto small{color:var(--text-2); font-size:13.5px;}
.primeiros-lista li.feito{background:var(--card-2);}
.primeiros-lista li.feito .primeiros-marca{background:var(--grad); border-color:transparent; color:#fff; font-style:normal;}
.primeiros-lista li.feito strong{text-decoration:line-through; text-decoration-color:rgba(255,106,0,.6);}
.primeiros-ok{flex:none; color:var(--ok); font-weight:700; font-size:14px;}
.primeiros-btn{flex:none; min-height:40px; padding:0 16px; font-size:14px;}

/* ---------- Como funciona: pontos + ranking ---------- */
.guia-cabeca{max-width:760px; margin-bottom:24px;}
.guia-cabeca .home-texto{max-width:none; margin-bottom:0;}
.guia-cabeca strong{color:var(--text);}
#como-funciona, #ranking-xp, #pontos, #troque{scroll-margin-top:120px;}
.guia-dois{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.guia-pilar{position:relative; background:var(--card); border:1px solid var(--line); border-radius:22px; padding:26px 26px 22px; box-shadow:0 14px 34px rgba(0,0,0,.06);}
.guia-pilar-num{position:absolute; top:10px; right:20px; font-size:72px; font-weight:700; font-style:italic; line-height:1; color:transparent; -webkit-text-stroke:2px rgba(255,106,0,.35);}
.guia-pilar h3{font-size:28px; margin-bottom:6px; color:var(--orange-2);}
.guia-pilar-lede{font-size:17px; font-weight:600; margin-bottom:14px; padding-right:50px;}
.guia-pilar ul{list-style:none; display:grid; gap:10px;}
.guia-pilar li{position:relative; padding-left:22px; color:var(--text-2);}
.guia-pilar li::before{content:""; position:absolute; left:0; top:.6em; width:9px; height:9px; border-radius:50%; background:var(--grad);}
.guia-pilar li strong{color:var(--text);}
.guia-link{display:inline-flex; align-items:center; min-height:40px; color:var(--orange-2); font-weight:700; text-decoration:none;}
.guia-link:hover{text-decoration:underline;}
.guia-final{margin-top:24px;}

.xp-lista{list-style:none; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px;}
.xp-lista li{display:flex; flex-direction:column; align-items:flex-start; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:20px;}
.xp-valor{display:inline-flex; padding:4px 12px; margin-bottom:10px; border-radius:100px; background:var(--grad); color:#fff; font-size:13px; font-weight:700; font-style:italic; white-space:nowrap;}
.xp-lista h3{font-size:19px; margin-bottom:6px;}
.xp-lista p{color:var(--text-2); font-size:14.5px; margin-bottom:4px;}
.xp-lista p strong{color:var(--text);}
.xp-lista .guia-link{margin-top:auto;}
.xp-rodape{margin-top:16px; color:var(--text-2);}

/* ---------- Perguntas frequentes ---------- */
.faq-grade{display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); gap:40px; align-items:start;}
.faq-lista details{background:var(--card); border:1px solid var(--line); border-radius:16px; margin-bottom:10px;}
.faq-lista details[open]{border-color:var(--orange);}
.faq-lista summary{position:relative; display:block; padding:16px 52px 16px 20px; font-weight:700; cursor:pointer; list-style:none;}
.faq-lista summary::-webkit-details-marker{display:none;}
.faq-lista summary::after{content:"+"; position:absolute; right:20px; top:50%; transform:translateY(-50%); color:var(--orange-2); font-size:24px; font-weight:400; line-height:1;}
.faq-lista details[open] summary::after{content:"−";}
.faq-lista details p{padding:0 20px 18px; color:var(--text-2);}

.pilar-acoes{display:flex; flex-wrap:wrap; gap:10px;}

/* ---------- Seções ---------- */
.home-secao h2{font-size:clamp(28px, 4vw, 40px); margin-bottom:12px;}
.home-texto{color:var(--text-2); font-size:17px; max-width:560px; margin-bottom:22px;}
.secao-cabeca{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:18px;}
.secao-cabeca a{font-weight:600;}
.ver-mais{color:var(--text); font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; text-decoration:none;}
.ver-mais span{color:var(--orange); margin-left:4px;}
.ver-mais:hover{color:var(--orange-2);}

.ranking-home{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:44px; align-items:center; border-radius:28px; padding:40px; color:#FFFFFF;
  background:radial-gradient(520px 320px at 100% 100%, rgba(255,106,0,.2), transparent 70%), linear-gradient(160deg, #1C1917, #0E0D0C); box-shadow:0 30px 60px rgba(0,0,0,.25);}
.ranking-home h2{color:#FFFFFF;}
.ranking-home h2 .laranja{color:#FF6A00;}
.ranking-home .home-texto{color:#CFCFCF;}
.ranking-home .premio-convite.so-valor{padding:18px 22px;}
.ranking-home .premio-convite.so-valor .pc-valor{padding:0; border-bottom:0;}
.ranking-home .pilar-acoes .btn{font-style:italic; text-transform:uppercase; font-weight:700;}
.ranking-home .btn-contorno{color:#FFFFFF; border-color:rgba(255,255,255,.35);}
.ranking-home .btn-contorno:hover{border-color:#FF6A00;}
.top-home{list-style:none; display:grid; gap:8px;}
.premio-home{display:flex; align-items:center; gap:12px; margin:0 0 22px; padding:10px 14px; border-radius:16px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); max-width:420px;}
.premio-home img{flex:none; width:56px; height:56px; object-fit:contain; padding:4px; border-radius:10px; background:#FFFFFF;}
.premio-home span{display:flex; flex-direction:column; font-weight:700; line-height:1.3; color:#FFFFFF;}
.premio-home small{font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#FF8A1F;}
.top-home li{display:grid; grid-template-columns:36px minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); align-items:center; gap:10px; padding:13px 18px; border-radius:14px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);}
.top-home li:first-child, .top-home li.top-cabeca + li{background:rgba(255,106,0,.14); border:1.5px solid #FF6A00;}
.top-home li.top-cabeca + li .top-leva, .top-home li.top-cabeca + li em{color:#FF8A1F;}
.top-home li.eu{outline:2px solid #FF8A1F;}
.top-home b{font-style:italic; font-size:20px; color:#FF6A00;}
.top-home span{font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.top-home .jogador, .top-home .jogador-nome{color:#FFFFFF; text-decoration:none;}
.top-home .avatar-letra{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2); color:#FF8A1F;}
.top-home em{font-style:normal; font-weight:700; color:#CFCFCF; font-size:14px; text-align:center;}
.top-leva{display:flex; flex-direction:column; align-items:flex-end; text-align:right; color:#FFFFFF; font-size:15px; font-weight:700; line-height:1.25;}
.top-leva small{color:#FF8A1F; font-size:11.5px; font-weight:600; line-height:1.2;}
.top-home li.top-cabeca{padding:0 18px 2px; background:none; border:0; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#A8A8A8;}
.top-cabeca span:nth-child(3){text-align:center;}
.top-cabeca span:last-child{text-align:right;}
.top-home .top-vazio{display:block; color:#CFCFCF;}

.itens-home{padding-bottom:0;}

.destaques{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.destaques.um{grid-template-columns:1fr;}
.destaque{background:var(--card); border:1px solid var(--line); border-radius:24px; padding:30px;}
.destaque p{color:var(--text-2); margin-bottom:20px;}
.tag{display:inline-block; padding:4px 12px; border-radius:100px; background:rgba(255,106,0,.16); color:var(--orange-2); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom:12px;}

.parceiro-grade{display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr); gap:40px; align-items:start;}
.parceiro-lista{list-style:none; display:grid; gap:12px;}
.parceiro-lista li{background:var(--card); border:1px solid var(--line); border-left:3px solid var(--orange); border-radius:14px; padding:16px 18px; color:var(--text-2); font-size:15px;}
.parceiro-lista strong{display:block; color:var(--text); margin-bottom:2px;}
.patrocinio-home{display:flex; align-items:center; justify-content:space-between; gap:24px; padding:32px 28px; border:1.5px solid var(--orange); border-radius:24px; background:linear-gradient(135deg, rgba(255,106,0,.16), rgba(255,106,0,.03));}
.patrocinio-home h2{margin:10px 0 8px;}
.patrocinio-home .home-texto{margin:0; max-width:62ch;}
.patrocinio-home .btn{flex:none;}

.home-final{padding:56px 0 72px; text-align:center;}
.home-final h2{font-size:clamp(30px, 5vw, 48px); margin-bottom:22px;}
.home-final .pilar-acoes{justify-content:center;}
.grupo-oficial{display:inline-flex; align-items:center; min-height:44px; margin-top:16px; color:#128C4A; font-weight:600;}

.whats-flutuante{position:fixed; right:18px; bottom:18px; z-index:30; display:grid; place-items:center; width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff; box-shadow:0 10px 24px rgba(0,0,0,.4);}
.whats-flutuante svg{width:30px; height:30px;}
.whats-flutuante{transition:opacity .2s ease, transform .2s ease;}

.home-secao .icard h2{font-size:17px; line-height:1.2; margin:0;}

@media (max-width:960px){
  .hero-grade, .ranking-home, .parceiro-grade{grid-template-columns:1fr;}
  .hero-grade{gap:28px;}
  .guia-dois, .faq-grade, .primeiros-lista{grid-template-columns:1fr;}
  .xp-lista{grid-template-columns:1fr 1fr;}
  .faq-grade{gap:20px;}
  .destaques{grid-template-columns:1fr;}
  .patrocinio-home{flex-direction:column; align-items:flex-start; padding:24px 20px;}
  .patrocinio-home .btn{width:100%;}
  .ranking-home{padding:26px 20px; gap:24px;}
}
@media (max-width:960px){
  .whats-flutuante{width:50px; height:50px; right:12px; bottom:12px;}
  .whats-flutuante:not(.rolou){opacity:0; transform:translateY(12px); pointer-events:none;}
  .whats-flutuante svg{width:26px; height:26px;}
  body{padding-bottom:64px;}
}
@media (prefers-reduced-motion:reduce){ .whats-flutuante{transition:none;} }
@media (max-width:620px){
  .home-hero{padding:28px 0 30px;}
  .hero-cta{flex-direction:column; margin-top:22px;}
  .hero-cta .btn{width:100%;}
  .hero-cta .so-cel{display:inline-flex;}
  .login-home{display:none;}
  .itens-home .icard:nth-child(n+3){display:none;}
  .home-hero h1{font-size:34px; margin-bottom:14px;}
  .home-pilula{margin-bottom:12px;}
  .hero-lede{font-size:15.5px; margin-bottom:18px;}
  .hero-trio{gap:8px; flex-wrap:nowrap;}
  .hero-trio a{min-height:40px; padding:0 12px 0 6px; gap:6px; font-size:13.5px;}
  .hero-trio b{width:26px; height:26px; font-size:12.5px;}
  .painel-saldo strong{font-size:34px;}
  .login-home, .painel-home{padding:22px 18px;}
  .xp-lista{grid-template-columns:1fr;}
  .xp-lista li{padding:16px 18px;}
  .guia-pilar{padding:22px 18px 18px;}
  .guia-pilar h3{font-size:24px;}
  .primeiros-cabeca{flex-direction:column; align-items:stretch;}
  .primeiros-progresso{text-align:left;}
  .primeiros-lista li{flex-wrap:wrap; padding:14px;}
  .primeiros-texto{flex:1 1 calc(100% - 50px);}
  .primeiros-btn, .primeiros-ok{margin-left:50px;}
  .destaque{padding:24px 18px;}
  .pilar-acoes .btn{flex:1 1 auto;}
  .top-home li{grid-template-columns:24px minmax(0, 1fr) 72px 96px; gap:6px; padding:12px 12px;}
  .top-home li.top-cabeca{padding:0 12px 2px; letter-spacing:.06em; font-size:10.5px;}
  .top-home .avatar{width:24px !important; height:24px !important; font-size:11px !important;}
  .top-home b{font-size:17px;}
  .top-home em{font-size:12.5px;}
  .top-leva{font-size:13.5px;}
  .top-leva small{font-size:10.5px;}
}