:root{
  --bg:#070b12; --panel:#0e1520; --muted:#9aa6b2; --text:#e9eef5;
  --brand:#7ae582; --brand-2:#58a6ff; --border:#1b2432;
}
*{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial}
a{color:var(--brand-2);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}

.bg{
  position:fixed; inset:0; background:url("/img/fundo.png") center/cover no-repeat;
  opacity:.18; filter:contrast(110%) brightness(110%); z-index:-1;
}

/* Header */
.topbar{
  position:sticky; top:0; z-index:10; backdrop-filter: blur(8px);
  background:linear-gradient(180deg, rgba(7,11,18,.8), rgba(7,11,18,.4));
  border-bottom:1px solid var(--border); padding:12px 18px; display:flex; align-items:center; gap:16px
}
.brand{display:flex; align-items:center; gap:10px; font-weight:800}
.brand-name{letter-spacing:.3px}
.logo{width:28px;height:28px;border-radius:7px}
.brand-link{color:var(--text); text-decoration:none}
.brand-link:hover .brand-name{color:#fff}

.nav{margin-left:auto; display:flex; gap:14px}
.nav a{padding:6px 10px;border-radius:10px}
.nav a:hover{background:#0f1824}

.lang{display:flex; align-items:center; gap:8px; margin-left:8px}
.lang .divider{opacity:.5}
.lang-btn{background:#121a27;border:1px solid var(--border);color:var(--text);padding:6px 10px;border-radius:10px;cursor:pointer}
.lang-btn.active{border-color:var(--brand);box-shadow:0 0 0 2px rgba(122,229,130,.15)}

/* Layout */
.container{max-width:960px;margin:28px auto;padding:0 16px}
.center{display:flex; flex-direction:column; align-items:center}
.hero-logo{width: clamp(196px, 8vw, 224px);height: clamp(196px, 8vw, 224px);border-radius: 16px; margin: clamp(10px, 3vh, 18px) auto clamp(2px, 0.8vh, 6px); filter: none;}
.hero.card{padding: clamp(14px, 3.2vw, 20px);border:1px solid var(--border);background:rgba(12,18,28,.65);border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.22);text-align:center}
.hero.card.compact{max-width:700px}
.title{font-size: clamp(22px, 3.2vw, 28px);line-height: 1.15; margin: 0; letter-spacing: .2px; font-weight: 800;}
.muted{color:var(--muted)}
.small{font-size:.95rem}

.cta{display:flex; gap:12px; justify-content:center; margin-top:16px}
.btn{display:inline-block;background:var(--brand);color:#0b111a;padding:10px 14px;border-radius:12px;font-weight:700}
.btn.ghost{background:transparent;border:1px solid var(--border);color:var(--text)}

.footer{display:flex;gap:8px;justify-content:center;align-items:center;border-top:1px solid var(--border);padding:18px;margin-top:36px}
.footer .dot{opacity:.5}
.logo.tiny{width:18px;height:18px;border-radius:4px;display:inline-block;vertical-align:-3px}
.brand-link.tiny{display:flex;align-items:center;gap:6px;color:var(--muted)}

/* Cabeçalho da página */
.page-head{margin:8px 0 18px}

/* Cartões da página de ferramentas */
.card{border:1px solid var(--border); background:rgba(12,18,28,.65); border-radius:14px; box-shadow:0 8px 24px rgba(0,0,0,.22)}
.tools-grid{display:grid; grid-template-columns:1fr; gap:14px}
@media (min-width: 820px){ .tools-grid{grid-template-columns:1fr 1fr} }

.tool-card{padding: 22px 22px 18px; border-radius: 16px}
.tool-head{display:flex; gap:14px; align-items:flex-start}
.tool-icon{width:44px;height:44px;border-radius:10px; overflow:hidden; background:#0f1824; flex:0 0 44px; display:flex;align-items:center;justify-content:center}
.tool-icon img{width:100%;height:100%;object-fit:cover}
.tool-meta{min-width:0}
.tool-title{margin:2px 0 6px; font-size:18px}
.tool-desc{margin:0}

/* How-to (details/summary) */
.tool-how{margin-top:10px}

/* botão summary */
.how-btn{
  list-style:none; cursor:pointer; user-select:none;
  display:inline-flex; align-items:center; gap:8px;
  margin:8px 0 0; padding:8px 10px; border-radius:10px;
  background:transparent; border:1px solid var(--border); color:var(--text); font-weight:700;
  position: relative; transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.how-btn:hover{ background:#132033; border-color:#233049 }
.how-btn::after{ content:"▾"; margin-left:8px; opacity:.8; transition: transform .25s ease }
.tool-how[open] .how-btn::after{ transform: rotate(180deg) }

/* conteúdo */
.how-body{ padding:12px 2px 2px }

/* animação suave para <details> usando grid 0fr → 1fr  */
.tool-how .how-body{
  overflow: hidden;
  height: 0;
  opacity: 0;
  transition: height .35s ease, opacity .25s ease;
}
.tool-how.opening .how-body,
.tool-how.closing .how-body{
  display: block;
}
.tool-how.show .how-body{
  opacity: 1;
}


@media (prefers-reduced-motion: reduce){
  .tool-how .how-body, .how-btn::after{ transition: none }
}