/* Uncle Predictor — estilos das páginas públicas
   Cores alinhadas com a app (index.html). Não usado pela app, só pelas páginas estáticas. */

:root{
  --bg:#0d1b2a; --bg2:#1a2d42; --card:#162032;
  --gold:#f5c518; --green:#27ae60; --red:#e74c3c; --orange:#e67e22;
  --cyan:#00bcd4; --purple:#9b59b6; --amber:#f39c12;
  --text:#e8e8e8; --sub:#7a9bb5; --border:#253a50;
  --maxw:820px;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:14px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* ── Cabeçalho ───────────────────────────────── */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(13,27,42,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.site-header-inner{
  max-width:var(--maxw); margin:0 auto; padding:10px 18px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.site-logo{display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--text)}
.site-logo img{height:34px; width:auto; display:block}
.site-logo span{
  font-family:Rajdhani,Inter,sans-serif; font-weight:700; font-size:1.15rem;
  letter-spacing:.5px; color:var(--gold);
}
.site-nav{display:flex; gap:4px; flex-wrap:wrap; margin-left:auto}
.site-nav a{
  color:var(--sub); text-decoration:none; font-size:.82rem; font-weight:500;
  padding:5px 9px; border-radius:7px;
}
.site-nav a:hover{color:var(--text); background:var(--bg2)}
.site-nav a.cta{background:var(--gold); color:#12202f; font-weight:700}
.site-nav a.cta:hover{background:#ffd633; color:#12202f}

/* ── Corpo ───────────────────────────────────── */
main{max-width:var(--maxw); margin:0 auto; padding:26px 18px 60px}

h1{
  font-family:Rajdhani,Inter,sans-serif; font-weight:700;
  font-size:1.66rem; line-height:1.2; margin:.2em 0 .5em; color:#fff;
}
h2{
  font-family:Rajdhani,Inter,sans-serif; font-weight:700;
  font-size:1.12rem; line-height:1.3; margin:1.8em 0 .5em; color:var(--gold);
  border-bottom:1px solid var(--border); padding-bottom:6px;
}
h3{font-size:.93rem; font-weight:700; margin:1.5em 0 .4em; color:#fff}
p{margin:.75em 0}
a{color:var(--gold)}
a:hover{color:#ffd633}
strong{color:#fff}
hr{border:0; border-top:1px solid var(--border); margin:2.4em 0}

.lead{font-size:.95rem; color:var(--sub); line-height:1.75; margin-bottom:1.4em}
.muted{color:var(--sub)}
.small{font-size:.82rem}

ul,ol{padding-left:1.35em; margin:.75em 0}
li{margin:.35em 0}

/* ── Cartões e caixas ────────────────────────── */
.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:12px; padding:16px 18px; margin:1.1em 0;
}
.card h3{margin-top:0}

.note{
  background:rgba(245,197,24,.07); border-left:3px solid var(--gold);
  border-radius:8px; padding:12px 15px; margin:1.2em 0; font-size:.85rem;
}
.warn{
  background:rgba(231,76,60,.07); border-left:3px solid var(--red);
  border-radius:8px; padding:12px 15px; margin:1.2em 0; font-size:.85rem;
}

/* ── Grelha de pontuação ─────────────────────── */
.pts-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px; margin:1.1em 0;
}
.pts-cell{
  background:var(--bg2); border:1px solid var(--border);
  border-radius:10px; padding:13px 12px; text-align:center;
}
.pts-num{
  font-family:Rajdhani,Inter,sans-serif; font-size:1.9rem; font-weight:700;
  line-height:1; color:var(--gold);
}
.pts-label{font-size:.81rem; font-weight:700; margin:5px 0 3px}
.pts-sub{font-size:.74rem; color:var(--sub); line-height:1.45}

.c-cyan{color:var(--cyan)!important}
.c-amber{color:var(--amber)!important}
.c-purple{color:var(--purple)!important}
.c-green{color:var(--green)!important}
.c-gold{color:var(--gold)!important}

/* ── Tabelas ─────────────────────────────────── */
table{width:100%; border-collapse:collapse; margin:1.1em 0; font-size:.82rem}
th,td{text-align:left; padding:9px 11px; border-bottom:1px solid var(--border)}
th{color:var(--gold); font-size:.76rem; text-transform:uppercase; letter-spacing:.4px}
td.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}

/* ── FAQ ─────────────────────────────────────── */
details{
  background:var(--card); border:1px solid var(--border);
  border-radius:10px; padding:0 15px; margin:9px 0;
}
details summary{
  cursor:pointer; padding:12px 0; font-weight:600; font-size:.88rem;
  list-style:none;
}
details summary::-webkit-details-marker{display:none}
details summary::before{content:'+ '; color:var(--gold); font-weight:700}
details[open] summary::before{content:'\2212  '}
details[open] summary{border-bottom:1px solid var(--border)}
details .body{padding:4px 0 13px; font-size:.85rem; color:var(--text)}

/* ── Botões ──────────────────────────────────── */
.btn{
  display:inline-block; background:var(--gold); color:#12202f;
  font-weight:700; font-size:.85rem; text-decoration:none;
  padding:10px 20px; border-radius:9px; margin:.4em .4em .4em 0;
}
.btn:hover{background:#ffd633; color:#12202f}
.btn-outline{
  background:transparent; color:var(--gold);
  border:1px solid var(--border);
}
.btn-outline:hover{background:var(--bg2); color:var(--gold)}

/* ── Lista de artigos ────────────────────────── */
.guide-list{list-style:none; padding:0}
.guide-list li{
  background:var(--card); border:1px solid var(--border);
  border-radius:10px; margin:10px 0;
}
.guide-list a{
  display:block; padding:15px 17px; text-decoration:none; color:var(--text);
}
.guide-list a:hover{background:var(--bg2)}
.guide-list .t{font-weight:700; color:var(--gold); font-size:.95rem; margin-bottom:3px}
.guide-list .d{font-size:.83rem; color:var(--sub); line-height:1.55}

/* ── Rodapé ──────────────────────────────────── */
.site-footer{
  border-top:1px solid var(--border); background:#0a1520;
  padding:26px 18px 34px; margin-top:40px;
}
.site-footer-inner{max-width:var(--maxw); margin:0 auto}
.site-footer .cols{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:22px;
}
.site-footer h4{
  font-size:.78rem; text-transform:uppercase; letter-spacing:.6px;
  color:var(--gold); margin:0 0 9px;
}
.site-footer ul{list-style:none; padding:0; margin:0}
.site-footer li{margin:5px 0}
.site-footer a{color:var(--sub); text-decoration:none; font-size:.83rem}
.site-footer a:hover{color:var(--text)}
.site-footer .legal{
  margin-top:24px; padding-top:16px; border-top:1px solid var(--border);
  font-size:.76rem; color:var(--sub); line-height:1.6;
}

/* ── Breadcrumb ──────────────────────────────── */
.crumb{font-size:.79rem; color:var(--sub); margin-bottom:.5em}
.crumb a{color:var(--sub); text-decoration:none}
.crumb a:hover{color:var(--gold)}

@media(max-width:560px){
  h1{font-size:1.36rem}
  h2{font-size:1.04rem}
  body{font-size:13.5px}
  .site-nav a{font-size:.78rem; padding:4px 7px}
}