/* ============================================================
   EU MELHOR — pele compartilhada das ferramentas (apps/)
   Paleta e fontes do site do livro (css/book.css):
   grafite #121719, teal #7fd9c4, Fraunces + Poppins.
   Mantém os nomes de variáveis/classes que os apps já usam.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..600;1,9..144,400..500&family=Poppins:wght@400;500;600;700&display=swap');

:root{
  --bg:#121719;
  --bg-2:#161d20;
  --panel:#1b2327;
  --panel-2:#20292e;
  --line:rgba(255,255,255,.08);
  --gold:#7fd9c4;        /* acento principal do site (teal) */
  --gold-2:#a8e9d9;
  --gold-deep:#4fae99;
  --cream:#eef2f1;
  --muted:#9fb0ad;
  --red:#e06a55;
  --font-display:"Fraunces", Georgia, serif;
  --font-body:"Poppins", system-ui, sans-serif;
  --font-logo:"Fraunces", Georgia, serif;
}

*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none !important}

body{
  font-family:var(--font-body);color:var(--cream);
  background:
    radial-gradient(1100px 560px at 85% -10%, rgba(127,217,196,.08), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(216,185,119,.05), transparent 60%),
    var(--bg);
  min-height:100vh;
}

/* ---------- topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:14px 28px;background:rgba(14,18,20,.92);border-bottom:1px solid var(--line);
  backdrop-filter:blur(6px);
}
.brand{display:flex;align-items:center;gap:12px}
.brand .emblem{height:40px;width:auto;display:block}
.wordmark{
  font-family:var(--font-logo);font-weight:600;font-style:italic;line-height:1;
  color:#fff;white-space:nowrap;
}
.wordmark b{color:var(--gold);font-weight:600}
.topbar nav{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.topbar nav a{
  font-family:var(--font-body);font-weight:600;font-size:.82rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);text-decoration:none;
  padding:9px 16px;border:1.5px solid transparent;border-radius:999px;transition:.15s;
}
.topbar nav a:hover{color:#fff;border-color:var(--gold)}

/* ---------- títulos e textos ---------- */
.sec-title{
  font-family:var(--font-display);font-weight:600;font-size:1.7rem;color:#fff;margin-bottom:6px;
}
.sec-title em{font-style:italic;color:var(--gold)}
.sec-sub{color:var(--muted);font-weight:400;margin-bottom:26px}
.hint{color:var(--muted);font-size:.8rem}
.goldlink{color:var(--gold);font-weight:600;text-decoration:none}
.goldlink:hover{text-decoration:underline}

/* ---------- botões (pílula, como no site) ---------- */
.btn{
  font-family:var(--font-body);font-weight:600;font-size:.9rem;letter-spacing:.04em;
  padding:13px 26px;border-radius:999px;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;gap:9px;transition:.15s;border:1.5px solid transparent;
}
.btn--gold{background:var(--gold);color:#0d1416}
.btn--gold:hover{background:#fff;color:#0d1416;transform:translateY(-2px)}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)}
.btn--ghost:hover{border-color:var(--gold)}

/* ---------- cards de ferramenta (hub) ---------- */
.tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px}
.tool{
  background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px;
  text-decoration:none;color:var(--cream);transition:.18s;display:flex;flex-direction:column;gap:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
a.tool:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 18px 44px rgba(0,0,0,.5)}
.tool .ic{font-size:1.9rem}
.tool h3{font-family:var(--font-display);font-weight:600;font-size:1.25rem;color:#fff}
.tool p{color:var(--muted);font-weight:400;font-size:.92rem;line-height:1.55}
.tool .go{margin-top:auto;font-weight:600;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}

@media (max-width:760px){
  .topbar{padding:12px 16px}
  .topbar nav{margin-left:0;width:100%;justify-content:center}
}