/* ============================================================
   DBSteel (fábrica) — camada sobre o design system compartilhado.
   Carregue DEPOIS de style.css. Só o que é exclusivo daqui.

   O logo é o oficial da identidade, sem a palavra "DESIGN":
     logo.svg       marca horizontal (medalhão + DBSTEEL)
     logo-mark.svg  medalhão DB/STEEL (hero)
   Ambos gerados a partir de docs/dbsteel-design-identidade-completa.zip.
   ============================================================ */

/* O logo da fábrica é mais largo (sem a linha "DESIGN"): dá um respiro a mais. */
.brand img{height:56px}
.site-header.scrolled .brand img{height:46px}
@media (max-width:520px){.brand img{height:42px}}

/* ---------- DESTAQUES DO HERO ----------
   No site da fábrica os destaques são frases ("Projeto → montagem"),
   não números curtos — fonte menor e base alinhada entre as colunas. */
.hero__stats{align-items:start}
.hero__stats .stat__num{
  font-size:clamp(1.02rem,1.5vw,1.22rem);line-height:1.3;letter-spacing:0;
  min-height:2.6em;display:flex;align-items:flex-end;
}
@media (max-width:720px){
  .hero__stats{grid-template-columns:1fr;gap:1rem}
  .hero__stats .stat__num{min-height:0}
  .hero__stats .stat{display:grid;grid-template-columns:auto 1fr;gap:.2rem .7rem;align-items:baseline}
  .hero__stats .stat__label{margin-top:0}
}

/* ---------- FICHA DE CAPACIDADES ---------- */
.specs{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;
}
.spec{background:var(--panel);padding:1.4rem 1.5rem}
.spec dt{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0}
.spec dd{margin:.5rem 0 0;font-size:1.02rem;font-weight:600;color:var(--ink);line-height:1.45}

/* ---------- POR DENTRO DA FÁBRICA (vídeo + fotos) ---------- */
.media-grid{
  display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:195px;gap:14px;
  margin-top:2.6rem;
}
.media{
  position:relative;margin:0;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--hair);background:var(--panel-2);
}
.media img,.media video{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--ease);
}
.media:hover img,.media:hover video{transform:scale(1.05)}
.media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(8,9,11,.62));
}
.media figcaption{position:absolute;left:.75rem;bottom:.65rem;z-index:1}
.media__tag{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gold-1);background:rgba(11,13,16,.74);
  border:1px solid var(--hair);border-radius:999px;padding:.32rem .7rem;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.media--video{grid-column:span 2;grid-row:span 2}
.media--tall{grid-row:span 2}
.media--wide{grid-column:span 2}
@media (max-width:940px){
  .media-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:160px;gap:10px}
  .media--video{grid-column:span 2}
}

/* ---------- FAIXA DA VERTICAL DE DESIGN ---------- */
.vertical{
  display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;align-items:center;
}
.vertical__mark{
  justify-self:center;width:min(320px,80%);padding:2.2rem 1.6rem;border-radius:20px;
  background:var(--bg-brand);border:1px solid rgba(212,171,90,.4);
  box-shadow:0 0 0 8px rgba(212,171,90,.05),0 40px 90px -30px rgba(0,0,0,.85);
}
.vertical__mark img{width:100%;height:auto;display:block;
  filter:brightness(1.12) contrast(1.05) saturate(1.05)}

/* (seção da vertical de design removida do site por enquanto — os estilos
   .vertical acima ficam para quando ela voltar) */
@media (max-width:940px){
  .vertical{grid-template-columns:1fr;gap:2.2rem}
  .vertical__mark{order:-1}
}