/* ===========================================================
   TravaJogo — estilos do site
   Convertido do Claude design para HTML/CSS/JS estático.
   =========================================================== */

/* ---------- Reset / base ---------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;background:var(--bg);}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Plus Jakarta Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-variant-ligatures:none;}

/* ---------- Tema (variáveis) ----------
   Padrão = escuro. data-theme="light" sobrescreve. */
:root{
  --bg:#0D1B2A; --bg2:#0A1521; --surface:#16273A; --surface2:#1B2E44;
  --line:#2A3D52; --ink:#FAF7F2; --inkSoft:#D8E2EC; --muted:#8FA6BE;
  --gold:#F6C98D; --gold2:#E9A76F; --green:#8DA387; --onGold:#0D1B2A; --logoBg:#0E1B2B;
}
:root[data-theme="light"]{
  --bg:#FAF7F2; --bg2:#F4ECDD; --surface:#FFFFFF; --surface2:#FBF6EC;
  --line:#E7DEC9; --ink:#0D1B2A; --inkSoft:#1E2D3D; --muted:#4A6A8A;
  --gold:#C2862F; --gold2:#A96A22; --green:#6E8366; --onGold:#FFFFFF; --logoBg:#F3ECDB;
}

/* ---------- Animações ---------- */
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes glowpulse{0%,100%{box-shadow:0 0 0 0 rgba(246,201,141,.30)}50%{box-shadow:0 0 0 12px rgba(246,201,141,0)}}

/* ---------- Slider (calculadora) ---------- */
input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:rgba(143,166,190,.30);}
input[type=range]::-moz-range-track{height:6px;border-radius:999px;background:rgba(143,166,190,.30);}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:#F6C98D;border:3px solid #0D1B2A;margin-top:-8px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.3);}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#F6C98D;border:3px solid #0D1B2A;cursor:pointer;}

/* ---------- Offset de âncora (header fixo) ---------- */
#problema,#beneficios,#como,#preco,#faq{scroll-margin-top:84px;}

/* ---------- Troca de tema: ícones e logos ---------- */
.icon-when-light{display:none;}
[data-theme="light"] .icon-when-dark{display:none;}
[data-theme="light"] .icon-when-light{display:inline;}

.logo-light{display:none !important;}
[data-theme="light"] .logo-dark{display:none !important;}
[data-theme="light"] .logo-light{display:block !important;}

/* ---------- Navegação ---------- */
.nav-toggle{display:none;}
.mobile-nav{display:none;}
.mobile-nav.is-open{display:flex;}

/* ---------- FAQ (acordeão) ---------- */
/* abertura/fechamento suave (box-sizing:border-box garante o clipe do padding) */
.faq-a{max-height:0;overflow:hidden;opacity:0;transition:max-height .35s ease,opacity .3s ease;}
.faq-item.is-open .faq-a{max-height:340px;opacity:1;}
/* sinal +/- desenhado com barras: sempre centralizado e animado */
.faq-sign{position:relative;font-size:0 !important;line-height:0;}
.faq-sign::before,.faq-sign::after{content:"";position:absolute;top:50%;left:50%;width:11px;height:2.5px;border-radius:2px;background:currentColor;transform:translate(-50%,-50%);transition:opacity .3s ease,transform .3s ease;}
.faq-sign::after{transform:translate(-50%,-50%) rotate(90deg);}            /* barra vertical -> vira "+" */
.faq-item.is-open .faq-sign::after{opacity:0;transform:translate(-50%,-50%) rotate(45deg);} /* some ao abrir -> "-" */

/* ---------- Revelar ao rolar (cards surgindo) ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease-out,transform .8s ease-out;}
.reveal.is-visible{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1 !important;transform:none !important;transition:none;}
}

/* ---------- Tracker "30 dias sem bet" ---------- */
.tj-day{aspect-ratio:1;border-radius:7px;border:1px solid #2A3D52;background:#102234;color:transparent;font-size:11px;font-weight:800;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:transform .12s ease,background .2s ease,border-color .2s ease;}
.tj-day.done{background:linear-gradient(135deg,#F6C98D,#E9A76F);border-color:transparent;color:#0D1B2A;}
.tj-day.current{box-shadow:0 0 0 2px #F6C98D,0 0 12px -2px rgba(246,201,141,.7);}
.tj-day:hover{transform:scale(1.12);}

/* ===========================================================
   Responsivo  (mantém o comportamento do design original:
   grids que colapsam e linhas de cards que viram carrossel)
   =========================================================== */
@media (max-width: 920px){
  .tj-split{grid-template-columns:1fr !important;}
  .tj-cards{grid-template-columns:repeat(2,1fr) !important;}
}
@media (max-width: 720px){
  .tj-foot{grid-template-columns:1fr !important;}
}
@media (max-width: 640px){
  h1{font-size:34px !important;}
  /* linhas de cards -> carrossel deslizável, com barra de rolagem visível */
  .tj-cards{
    display:flex !important;
    grid-template-columns:none !important;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:14px !important;
    margin-left:-24px !important;margin-right:-24px !important;
    padding:4px 24px 14px !important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    scrollbar-color:var(--gold) color-mix(in srgb,var(--muted) 22%,transparent);
  }
  .tj-cards::-webkit-scrollbar{height:8px;}
  .tj-cards::-webkit-scrollbar-thumb{background:var(--gold);border-radius:999px;}
  .tj-cards::-webkit-scrollbar-track{background:color-mix(in srgb,var(--muted) 18%,transparent);border-radius:999px;margin:0 24px;}
  .tj-cards>*{flex:0 0 82% !important;scroll-snap-align:start;}
  /* nav: esconde menu desktop + cta, mostra hambúrguer */
  .nav-desktop{display:none !important;}
  .nav-cta{display:none !important;}
  .nav-toggle{display:flex !important;}
  /* card de preço mais compacto no celular */
  .tj-price{padding:26px 22px !important;}
  .tj-price-value{font-size:46px !important;}
  /* linha de números empilhada (um abaixo do outro) */
  .tj-stack{grid-template-columns:1fr !important;}
}