/* =========================================================
   soseletronica.com — identidade "bancada de técnico"
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --graphite:#14181C;
  --surface:#1C2226;
  --surface-2:#242B30;
  --border:#323B42;
  --trace:#3FB68A;      /* verde trilha PCB - primaria */
  --trace-dark:#2E8F6C;
  --copper:#C9835A;     /* cobre - secundaria */
  --amber:#E8A33D;      /* display LCD - preco/aviso */
  --text:#E7ECEF;
  --text-dim:#9BA7AF;
  --ml-yellow:#FFE600;
  --shopee-orange:#EE4D2D;
  --radius:8px;
  --font-display:'JetBrains Mono', monospace;
  --font-body:'Inter', sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--graphite); color:var(--text);
  font-family:var(--font-body); line-height:1.6;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
h1,h2,h3,h4{font-family:var(--font-display); letter-spacing:-.01em; line-height:1.25; margin:0 0 .5em}
.container{max-width:1180px; margin:0 auto; padding:0 20px}

/* ---------- header ---------- */
.site-header{background:var(--surface); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:50}
.site-header__top{display:flex; align-items:center; gap:24px; padding:16px 0}
.site-logo{font-family:var(--font-display); font-weight:700; font-size:1.4rem; color:var(--text); display:flex; align-items:center; gap:8px}
.site-logo__mark{color:var(--trace)}
.site-logo__slogan{display:block; font-family:var(--font-body); font-size:.72rem; color:var(--text-dim); font-weight:400}

.search-form{flex:1; max-width:420px; margin-left:auto; display:flex}
.search-form input{
  flex:1; background:var(--graphite); border:1px solid var(--border); border-right:none;
  color:var(--text); padding:10px 14px; border-radius:6px 0 0 6px; font-family:var(--font-body);
}
.search-form input:focus{outline:none; border-color:var(--trace)}
.search-form button{
  background:var(--trace); border:none; color:var(--graphite); padding:0 16px; border-radius:0 6px 6px 0;
  cursor:pointer; font-weight:700;
}

.site-nav{border-top:1px solid var(--border)}
.site-nav ul{display:flex; gap:4px; list-style:none; margin:0; padding:0; overflow-x:auto}
.site-nav a{
  display:block; padding:12px 16px; font-size:.92rem; font-weight:500; color:var(--text-dim);
  border-bottom:2px solid transparent; white-space:nowrap;
}
.site-nav a:hover{color:var(--trace); border-bottom-color:var(--trace)}

/* ---------- trilha divisora (assinatura visual) ---------- */
.trace-divider{
  height:2px; margin:48px 0; position:relative;
  background:linear-gradient(90deg, var(--trace) 0%, var(--border) 40%, var(--border) 60%, var(--copper) 100%);
}
.trace-divider::before, .trace-divider::after{
  content:''; position:absolute; top:50%; width:8px; height:8px; border-radius:50%;
  transform:translateY(-50%); background:var(--trace);
}
.trace-divider::before{left:0}
.trace-divider::after{right:0; background:var(--copper)}

/* ---------- cards de artigo ---------- */
.article-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:24px; margin:32px 0}
.article-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:border-color .2s}
.article-card:hover{border-color:var(--trace)}
.article-card__img{aspect-ratio:16/9; overflow:hidden; background:var(--surface-2)}
.article-card__img img{width:100%; height:100%; object-fit:cover}
.article-card__body{padding:16px}
.article-card__cat{font-family:var(--font-display); font-size:.7rem; color:var(--trace); text-transform:uppercase; letter-spacing:.05em}
.article-card__title{font-size:1.05rem; margin:8px 0}
.article-card__resumo{color:var(--text-dim); font-size:.9rem; margin:0}

/* ---------- card de produto (com botao duplo) ---------- */
.prod-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  display:flex; gap:16px; padding:16px; margin:24px 0; align-items:flex-start;
}
.prod-card--vitrine{flex-direction:column; text-align:center; align-items:center; height:100%}
.prod-card__img{flex:0 0 120px; background:var(--surface-2); border-radius:6px; overflow:hidden}
.prod-card--vitrine .prod-card__img{flex:none; width:100%}
.prod-card__img img{width:120px; height:120px; object-fit:contain; padding:8px}
.prod-card--vitrine .prod-card__img img{width:100%; height:180px}
.prod-card__body{flex:1}
.prod-card__title{font-family:var(--font-body); font-weight:600; font-size:1rem; margin:0 0 4px}
.prod-card__modelo{color:var(--text-dim); font-size:.82rem; margin:0 0 4px}
.prod-card__preco{font-family:var(--font-display); color:var(--amber); font-size:1.1rem; font-weight:700; margin:4px 0}
.prod-card__ctas{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.btn-cta{padding:9px 14px; border-radius:6px; font-size:.85rem; font-weight:700}
.btn-cta--ml{background:var(--ml-yellow); color:#1a1a1a}
.btn-cta--shopee{background:var(--shopee-orange); color:#fff}
.btn-cta:hover{filter:brightness(1.08)}

/* ---------- vitrine (loja) ---------- */
.vitrine-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:20px; margin:32px 0}

/* ---------- banco de arquivos ---------- */
.file-list{display:flex; flex-direction:column; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; margin:24px 0}
.file-item{background:var(--surface); padding:14px 18px; display:flex; align-items:center; justify-content:space-between; gap:16px}
.file-item__tag{font-family:var(--font-display); font-size:.68rem; background:var(--surface-2); color:var(--trace); padding:3px 8px; border-radius:4px; text-transform:uppercase}
.file-item__title{font-weight:600; margin:0 0 2px}
.file-item__meta{color:var(--text-dim); font-size:.82rem}
.btn-download{background:var(--copper); color:var(--graphite); padding:8px 16px; border-radius:6px; font-weight:700; font-size:.85rem; white-space:nowrap}

/* ---------- artigo ---------- */
.article-content{max-width:760px; margin:0 auto; font-size:1.03rem}
.article-content h2{margin-top:2em; color:var(--trace)}
.article-content h3{margin-top:1.5em; color:var(--copper)}
.article-content p{margin:1em 0}
.article-content img{border-radius:var(--radius); margin:1.2em 0}
.article-content pre, .article-content code{font-family:var(--font-display); background:var(--surface-2); border-radius:4px}
.article-content pre{padding:14px; overflow-x:auto}
.article-content code{padding:2px 6px}

/* ---------- footer ---------- */
.site-footer{background:var(--surface); border-top:1px solid var(--border); margin-top:64px; padding:32px 0; color:var(--text-dim); font-size:.88rem}

/* ---------- utilitarios ---------- */
.eyebrow{font-family:var(--font-display); font-size:.72rem; color:var(--trace); text-transform:uppercase; letter-spacing:.08em}
.btn{display:inline-block; background:var(--trace); color:var(--graphite); padding:10px 20px; border-radius:6px; font-weight:700}

@media (max-width:640px){
  .site-header__top{flex-wrap:wrap}
  .search-form{max-width:100%; order:3; width:100%}
  .prod-card{flex-direction:column; align-items:center; text-align:center}
}