/* ============================================================================
   JM ELETRO MOTORES · DESIGN SYSTEM · 04 SEÇÕES
   Só composição/layout de cada bloco da página. Toda cor, fonte e espaço vem
   dos tokens; toda peça reutilizável vem de components.css.
   ========================================================================= */

/* ----------------------------------------------------------------------------
   TOPO · sticky com barra de progresso de leitura
   -------------------------------------------------------------------------- */
.topo{
  position:sticky; top:0; z-index:var(--z-topo);
  background:rgba(238, 243, 248, .92);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-bottom:var(--traco) solid var(--linha-c);
}
.topo__in{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-4);
  padding-block:var(--s-3);
}
.topo__marca{ display:block; line-height:0; }
.topo__marca svg{ height:34px; width:auto; }

.topo__nav{ display:none; }
@media (min-width:980px){
  .topo__nav{
    display:flex; align-items:center; gap:var(--s-6);
    font-family:var(--f-mono); font-size:var(--t-dado-p);
    letter-spacing:.08em; text-transform:uppercase;
  }
  .topo__nav a{
    color:var(--ink-c-corpo); text-decoration:none;
    padding-block:var(--s-1);
    border-bottom:var(--traco) solid transparent;
    transition:color var(--dur-1) var(--ease-ui),
               border-color var(--dur-1) var(--ease-ui);
  }
  .topo__nav a:hover,
  .topo__nav a[aria-current="true"]{
    color:var(--ink-c-forte);
    border-bottom-color:var(--brand-cobre);
  }
}
.topo__acoes{ display:flex; align-items:center; gap:var(--s-5); }
.topo__tel{
  display:none;
  font-family:var(--f-mono); font-size:var(--t-dado-p);
  color:var(--ink-c-corpo); text-decoration:none;
}
@media (min-width:760px){ .topo__tel{ display:block; } }
.topo__tel:hover{ color:var(--ink-c-forte); }

/* progresso de leitura · hairline de cobre, coerente com a cota */
.topo__progresso{
  position:absolute; left:0; right:0; bottom:-1px;
  height:2px; background:var(--brand-cobre);
  transform:scaleX(0); transform-origin:left;
}

/* ----------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.hero{
  padding-block:calc(var(--secao-y) * .95) var(--secao-y);
  position:relative; overflow:hidden;
}
.hero__grid{ display:grid; gap:var(--s-7); }
@media (min-width:920px){
  .hero{ padding-block:var(--s-11) var(--s-10); }
  .hero__grid{ grid-template-columns:1.25fr .75fr; gap:var(--s-9); align-items:start; }
}
.hero__reg{
  font-family:var(--f-mono);
  font-size:var(--t-dado);
  letter-spacing:var(--ls-mono);
  color:var(--ink-c-corpo);
  margin-bottom:var(--s-5);
}
.hero__reg b{ color:var(--ink-acento); font-weight:400; }
.hero h1{ max-width:16ch; margin-bottom:var(--s-5); }
.hero__sub{
  font-size:var(--t-corpo-g);
  font-weight:300;
  color:var(--ink-c-corpo);
  max-width:56ch;
  margin-bottom:var(--s-6);
}
.hero__ctas{ display:flex; flex-wrap:wrap; gap:var(--s-3); margin-bottom:var(--s-4); }
.hero__obs{
  font-family:var(--f-mono);
  font-size:var(--t-dado-p);
  color:var(--ink-c-fraco);
  letter-spacing:.04em;
}
.hero .ficha{ margin-top:var(--s-7); }
@media (min-width:920px){
  .hero__placa{ margin-top:var(--s-1); }
}

/* ----------------------------------------------------------------------------
   03 · COM QUEM TRABALHAMOS
   Painel de clientes em texto, não em logotipo: a marca é sóbria e não temos
   direito de uso das marcas de terceiros. Cada nome é uma cela de desenho.
   -------------------------------------------------------------------------- */
.marcas{
  margin-top:var(--s-7);
  list-style:none; padding:0;
  display:grid; gap:var(--traco);
  /* minmax(0,…) para o nome mais longo não roubar largura da outra coluna */
  grid-template-columns:repeat(2, minmax(0, 1fr));
  background:var(--linha-c);              /* o gap vira a malha de hairlines */
  border:var(--traco) solid var(--linha-c);
}
.marcas li{
  background:var(--sf-base);
  padding:var(--s-5) var(--s-4);
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  font-family:var(--f-tit);
  font-size:var(--t-corpo-p);
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-c-forte);
}
/* três colunas fecham as nove celas sem sobra de fileira */
@media (min-width:48rem){
  .marcas{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}

.obra{
  margin-top:var(--s-7);
  border-left:2px solid var(--brand-cobre);
  padding-left:var(--s-5);
  max-width:52ch;
}
.obra__tag{
  font-family:var(--f-mono);
  font-size:var(--t-dado-p);
  letter-spacing:var(--ls-mono);
  text-transform:uppercase;
  color:var(--ink-acento);
  margin-bottom:var(--s-2);
}
.obra__txt{
  font-size:var(--t-corpo);
  font-weight:300;
  line-height:var(--lh-corpo);
  color:var(--ink-c-corpo);
}
.obra__txt strong{ font-weight:400; color:var(--ink-c-forte); }

/* ----------------------------------------------------------------------------
   01 · EQUIPAMENTOS
   -------------------------------------------------------------------------- */
/* linha de serviços executados · fecha a lista de equipamentos */
.equip__servicos{ margin-top:var(--s-7); }

.equip__obs{
  margin-top:var(--s-5);
  font-size:var(--t-corpo-p);
  font-weight:300;
  color:var(--ink-c-corpo);
}
.equip__obs a{
  color:var(--ink-c-forte); font-weight:400;
  text-underline-offset:3px;
  transition:color var(--dur-1) var(--ease-ui);
}
.equip__obs a:hover{ color:var(--ink-acento); }

/* ----------------------------------------------------------------------------
   02 · POR QUE A JM (bloco azul) · registro fotográfico
   -------------------------------------------------------------------------- */
.registro{ margin-top:var(--s-8); }
.registro__tag{
  font-family:var(--f-mono); font-size:var(--t-dado-p);
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-e-fraco); margin-bottom:var(--s-3);
}

/* ----------------------------------------------------------------------------
   CHAMADA FINAL (bloco azul)
   -------------------------------------------------------------------------- */
.chamada__grid{ display:grid; gap:var(--s-6); }
@media (min-width:920px){
  .chamada__grid{ grid-template-columns:1fr auto; align-items:center; gap:var(--s-9); }
}
.chamada h2{ max-width:20ch; margin-bottom:var(--s-4); }
.chamada p{
  font-weight:300; color:var(--ink-e-corpo);
  max-width:46ch; margin-bottom:var(--s-6);
}
.chamada__tel{
  display:block; margin-top:var(--s-4);
  font-family:var(--f-mono); font-size:var(--t-dado); letter-spacing:.08em;
  color:var(--ink-e-fraco);
}
.chamada__tel a{ color:var(--ink-e-corpo); text-decoration:none; }
.chamada__tel a:hover{ color:var(--ink-e-forte); }
.chamada__marca{ width:150px; height:auto; display:none; }
@media (min-width:920px){ .chamada__marca{ display:block; } }

/* ----------------------------------------------------------------------------
   RODAPÉ
   -------------------------------------------------------------------------- */
.rodape{
  border-top:var(--traco) solid var(--linha-c);
  padding-block:var(--s-7) 9rem;   /* respiro para a pilha flutuante (2 botões) */
  background:var(--sf-base);
}
@media (min-width:920px){ .rodape{ padding-bottom:var(--s-7); } }
.rodape__grid{ display:grid; gap:var(--s-6); }
@media (min-width:760px){
  .rodape__grid{ grid-template-columns:auto 1fr; align-items:start; gap:var(--s-8); }
}
.rodape__marca svg{ height:38px; width:auto; }
.rodape__dados{
  font-family:var(--f-mono);
  font-size:.8rem; line-height:2.1; color:var(--ink-c-corpo);
}
.rodape__dados a{ color:var(--ink-c-corpo); text-decoration:none; }
.rodape__dados a:hover{ color:var(--ink-c-forte); }
.rodape__dados .k{ display:inline-block; width:8.5ch; color:var(--ink-c-fraco); }
.rodape__legal{
  margin-top:var(--s-6); padding-top:var(--s-5);
  border-top:var(--traco) solid var(--linha-c);
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.05em;
  color:var(--ink-c-fraco);
}

/* ----------------------------------------------------------------------------
   PÁGINA 404
   -------------------------------------------------------------------------- */
.erro{
  min-height:70vh;
  display:grid; align-content:center; gap:var(--s-5);
  padding-block:var(--s-10);
}
.erro__cod{
  font-family:var(--f-mono); font-size:var(--t-dado);
  letter-spacing:var(--ls-mono); color:var(--ink-acento);
}
.erro p{ color:var(--ink-c-corpo); font-weight:300; max-width:48ch; }
.erro__acoes{ display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-2); }