/* ==========================================================================
   Stahltek · Seções
   Layout de cada bloco da página, na ordem em que aparecem no index.html.
   ========================================================================== */

/* --- Hero ------------------------------------------------------------------
   Três camadas empilhadas dentro de #hero: a animação de linha de produção
   (.hero-bg, absolute), um véu de degradê (.hero-veil) e o conteúdo
   (.hero-content, relative). As variáveis --lp-* são o controle de tema da
   ilustração e ficam escopadas em #hero; elas clareiam no tema escuro para a
   máquina não sumir sobre o fundo. */
#hero{
  --lp-aco:#52709f;
  --lp-aco-2:#6f8cba;
  --lp-estrutura:#9fb3d4;
  --lp-esteira:#3c4f74;
  --lp-vidro:#b7c8e4;
  --lp-rotulo:#2E4C9B;
  --lp-liquido:#e0972b;
  --lp-liquido-2:#f2b654;
  --lp-opacidade:.62;

  position:relative;overflow:hidden;background:var(--bg);
  min-height:82vh;display:flex;align-items:flex-start;
  padding-block:56px 0;
}

/* Camada 1 — animação, atrás de tudo, ocupando o hero inteiro. */
.hero-bg{position:absolute;inset:auto 0 0 0;height:52%;z-index:0;pointer-events:none;line-height:0;opacity:var(--lp-opacidade);}
.hero-bg svg{width:100%;height:100%;display:block;}

/* Camada 2 — véu que garante a leitura do texto. Construído sobre var(--bg)
   (via color-mix) para acompanhar o tema: no escuro não vira mancha branca. */
.hero-veil{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(to bottom,
    var(--bg) 2%,
    color-mix(in srgb, var(--bg) 85%, transparent) 22%,
    color-mix(in srgb, var(--bg) 35%, transparent) 55%,
    transparent 100%);
}

/* Camada 3 — conteúdo, coluna única alinhada à esquerda com max-width para
   não encostar na animação. */
.hero-content{position:relative;z-index:2;}
.hero-copy{max-width:640px;}
.hero-copy h1{font-size:var(--text-3xl);font-weight:700;margin-top:var(--space-5);}
.hero-copy h1 .thin{color:var(--muted);font-weight:500;}
.hero-copy .lead{font-size:var(--text-lg);color:var(--ink-2);max-width:52ch;margin-top:var(--space-5);}
.hero-actions{display:flex;gap:var(--space-3);margin-top:var(--space-6);flex-wrap:wrap;}

/* Tema escuro: clareia o aço e a estrutura da máquina (e a esteira, que é bem
   escura) para a animação não desaparecer sobre o fundo escuro. */
:root[data-theme="dark"] #hero{
  --lp-aco:#8aa4cf;
  --lp-aco-2:#a7bcdd;
  --lp-estrutura:#c3d2ec;
  --lp-esteira:#5f78a5;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) #hero{
    --lp-aco:#8aa4cf;
    --lp-aco-2:#a7bcdd;
    --lp-estrutura:#c3d2ec;
    --lp-esteira:#5f78a5;
  }
}

/* Responsivo: abaixo de 820px a animação vira uma faixa ancorada no rodapé do
   hero. O enquadramento fica por conta do preserveAspectRatio="xMidYMax slice"
   do próprio SVG, que amplia a máquina e corta as laterais — largura em % não
   resolve aqui porque `img,svg,iframe{max-width:100%}` (base.css) trunca
   qualquer valor acima de 100%. A faixa tem altura fixa e o hero reserva esse
   espaço no padding-bottom para o texto nunca cair por cima da ilustração. */
@media (max-width:820px){
  #hero{
    min-height:0;
    padding-block:var(--space-7) 180px;
    --lp-opacidade:.55;
  }
  .hero-bg{top:auto;bottom:0;height:180px;}
  .hero-bg svg{width:100%;height:100%;margin-left:0;}
  .hero-veil{
    background:linear-gradient(to bottom,
      var(--bg) 40%,
      color-mix(in srgb, var(--bg) 55%, transparent) 72%,
      transparent 92%);
  }
}

/* Telas estreitas: faixa um pouco mais baixa para o hero não ficar comprido. */
@media (max-width:480px){
  #hero{padding-block:var(--space-6) 150px;}
  .hero-bg{height:150px;}
}

/* --- Sobre ----------------------------------------------------------------- */
#sobre .wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--space-8);align-items:start;}
@media (max-width:880px){#sobre .wrap{grid-template-columns:1fr;gap:var(--space-6);}}
#sobre-title{font-size:var(--text-2xl);font-weight:700;margin-top:var(--space-3);}
#sobre .body p{color:var(--ink-2);}
.sobre-intro > p{color:var(--ink-2);margin-top:var(--space-4);}

/* Setores atendidos, realocados da antiga faixa do topo para o rodapé da
   seção. Ocupam a largura toda da grade. */
.sobre-setores{
  grid-column:1 / -1;margin-top:var(--space-7);
  display:flex;align-items:center;gap:var(--space-6);flex-wrap:wrap;
}
.sobre-setores .lead{
  font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);
}
.sobre-setores ul{display:flex;gap:var(--space-4);flex-wrap:wrap;}
.sobre-setores li{font-size:var(--text-sm);font-weight:600;color:var(--ink-2);}
.sobre-setores li + li{position:relative;padding-left:var(--space-4);}
.sobre-setores li + li::before{
  content:"";position:absolute;left:0;top:50%;
  width:4px;height:4px;border-radius:50%;background:var(--line-strong);transform:translateY(-50%);
}

/* Faixa de números consolidados (hero + coluna esquerda) no rodapé da seção:
   largura toda, borda fina no topo e na base, quatro colunas iguais. Reaproveita
   o par valor/rótulo (.v/.l) que era usado na barra do hero. */
.sobre-numeros{
  grid-column:1 / -1;margin-top:var(--space-8);
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6);
  border-block:1px solid var(--line);
}
.sobre-numeros > div{padding-block:var(--space-5);display:grid;grid-template-rows:auto auto;}
.sobre-numeros dd{margin:0;}
.sobre-numeros .v{grid-row:1;font-family:var(--font-display);font-weight:700;font-size:1.75rem;}
.sobre-numeros .l{
  grid-row:2;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--muted);
  text-transform:uppercase;letter-spacing:0.05em;margin-top:5px;
}
@media (max-width:880px){.sobre-numeros{grid-template-columns:repeat(2,1fr);gap:var(--space-4) var(--space-6);}}
@media (max-width:480px){.sobre-numeros{grid-template-columns:1fr;}}

.feature-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--line);border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;margin-top:var(--space-5);
}
@media (max-width:880px){.feature-grid{grid-template-columns:1fr;}}
.feature{background:var(--surface);padding:var(--space-5);}
.feature-ico{color:var(--brand);line-height:0;display:block;}
.feature-ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.feature h3{font-size:var(--text-lg);font-weight:600;margin-top:var(--space-3);}
.feature p{font-size:var(--text-sm);color:var(--ink-2);margin-top:var(--space-2);}

/* --- Formatos (seletor interativo) ----------------------------------------
   Escopo isolado em #equipamentos. As variáveis --fmt-* do componente original
   foram remapeadas para os tokens do projeto, então o componente — inclusive
   as cores dentro do SVG — acompanha o tema claro/escuro do site. */
#equipamentos{
  --fmt-marinho:var(--brand);
  --fmt-azul:var(--brand);
  --fmt-tinta:var(--ink);
  --fmt-tinta-2:var(--ink-2);
  --fmt-tinta-3:var(--muted);
  --fmt-linha:var(--line);
  --fmt-papel:var(--surface);
  --fmt-fundo:var(--bg-soft);
  --fmt-aco:var(--brand-deep);
  --fmt-aco-2:var(--brand);
  --fmt-rotulo:var(--brand);
  color:var(--ink);
}

#equipamentos .formatos-abas{display:flex;gap:var(--space-2);margin-bottom:var(--space-5);flex-wrap:wrap;}
#equipamentos .formatos-aba{
  font:inherit;font-size:15px;font-weight:600;padding:10px 20px;cursor:pointer;
  background:var(--surface);color:var(--ink-2);
  border:1px solid var(--line);border-radius:var(--radius-full);
  transition:all var(--dur-fast) var(--ease);
}
#equipamentos .formatos-aba:hover{border-color:var(--line-strong);color:var(--ink);}
#equipamentos .formatos-aba[aria-selected="true"]{background:var(--brand);border-color:var(--brand);color:var(--brand-on);}
#equipamentos .formatos-aba:focus-visible{outline:3px solid color-mix(in srgb, var(--brand) 35%, transparent);outline-offset:2px;}

#equipamentos .formatos-painel{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:var(--space-6);align-items:stretch;}
#equipamentos .formatos-palco{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-2);position:relative;}
#equipamentos .formatos-palco svg{width:100%;height:auto;display:block;}
#equipamentos .formatos-legenda{position:absolute;top:14px;left:16px;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}

#equipamentos .formatos-ficha{display:flex;flex-direction:column;}
#equipamentos .formatos-explica{font-size:15px;line-height:1.65;color:var(--ink-2);margin:0 0 18px;}
#equipamentos .formatos-explica b{color:var(--ink);font-weight:600;}
#equipamentos .formatos-specs{border-top:1px solid var(--line);margin:0;}
#equipamentos .formatos-spec{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);}
#equipamentos .formatos-spec dt{font-size:13px;color:var(--muted);margin:0;}
#equipamentos .formatos-spec dd{font-size:14px;font-weight:600;margin:0;text-align:right;}
#equipamentos .formatos-corte{margin-top:18px;display:flex;align-items:center;gap:14px;}
#equipamentos .formatos-corte svg{flex:none;}
#equipamentos .formatos-corte p{font-size:13px;line-height:1.5;color:var(--ink-2);margin:0;}

/* Responsivo: abaixo de 880px, coluna única com a mídia acima da ficha. */
@media (max-width:880px){
  #equipamentos .formatos-painel{grid-template-columns:1fr;gap:var(--space-5);}
}
@media (prefers-reduced-motion:reduce){
  #equipamentos .formatos-aba{transition:none;}
}

/* Mídia por aba: área de vídeo (facade) e palco da animação SVG ocupam o mesmo
   quadro. Só uma fica visível por vez; a outra recebe [hidden]. */
#equipamentos .formatos-media{position:relative;}
#equipamentos .formatos-video{
  position:relative;aspect-ratio:16/10;overflow:hidden;
  background:#0E1116;border:1px solid var(--line);border-radius:var(--radius-lg);
}
#equipamentos .formatos-video iframe{width:100%;height:100%;border:0;}
#equipamentos .formatos-video[hidden],
#equipamentos .formatos-palco[hidden]{display:none;}

/* Modelos que atendem o formato (compactos) + CTA da aba. */
#equipamentos .formatos-modelos{margin-top:var(--space-5);display:grid;gap:var(--space-3);}
#equipamentos .formatos-modelo{
  border:1px solid var(--line);border-radius:var(--radius-lg);
  background:var(--surface);padding:var(--space-4);
}
#equipamentos .formatos-modelo-top{display:flex;align-items:baseline;gap:var(--space-3);flex-wrap:wrap;}
#equipamentos .formatos-modelo-top h4{font-size:var(--text-base);font-weight:600;margin:0;}
#equipamentos .formatos-modelo-desc{font-size:var(--text-sm);color:var(--ink-2);margin:var(--space-2) 0 0;}
#equipamentos .formatos-modelo-specs{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);margin:var(--space-3) 0 0;}
#equipamentos .formatos-modelo-specs > div{display:flex;align-items:baseline;gap:6px;}
#equipamentos .formatos-modelo-specs dt{
  font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;
  letter-spacing:0.03em;color:var(--muted);margin:0;
}
#equipamentos .formatos-modelo-specs dd{font-size:var(--text-sm);font-weight:600;margin:0;}
#equipamentos .formatos-modelo--vazio{border-style:dashed;background:var(--bg-soft);}

#equipamentos .formatos-cta{margin-top:var(--space-5);align-self:flex-start;}
@media (max-width:880px){#equipamentos .formatos-cta{align-self:stretch;}}

/* --- Manutenção ------------------------------------------------------------ */
#manutencao .wrap{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);align-items:start;}
@media (max-width:880px){#manutencao .wrap{grid-template-columns:1fr;gap:var(--space-6);}}
#manutencao-title{font-size:var(--text-2xl);font-weight:700;margin-top:var(--space-3);}
#manutencao .lead{color:var(--ink-2);margin-top:var(--space-4);max-width:48ch;}

.chips-title{
  font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;
  text-transform:uppercase;letter-spacing:0.1em;color:var(--muted);
  margin:var(--space-7) 0 var(--space-3);
}
.svc-col{padding-top:var(--space-2);}
.svc{margin-top:0;}
/* Dois blocos de três itens, cada um com divisórias finas entre as linhas. */
.svc-2col{
  display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:column;
  grid-template-rows:repeat(3,auto);column-gap:var(--space-6);
}
.svc li{
  display:flex;gap:var(--space-3);align-items:center;
  padding:14px 0;border-top:1px solid var(--line);
  font-size:var(--text-sm);color:var(--ink-2);
}
.svc-2col li:nth-child(3),.svc-2col li:nth-child(6){border-bottom:1px solid var(--line);}
.svc .chk{
  flex:none;width:22px;height:22px;border-radius:50%;
  background:var(--brand-soft);display:grid;place-items:center;
}
.svc .chk svg{width:12px;height:12px;stroke:var(--brand);fill:none;}
@media (max-width:880px){
  .svc-2col{grid-template-columns:1fr;grid-auto-flow:row;grid-template-rows:none;}
  .svc-2col li:nth-child(3){border-bottom:0;}
  .svc-2col li:last-child{border-bottom:1px solid var(--line);}
}

.figure-card{
  border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;background:var(--surface);
}
.figure-card img{width:100%;height:340px;object-fit:cover;}
.figure-card figcaption{
  padding:var(--space-4) var(--space-5);
  font-family:var(--font-mono);font-size:var(--text-xs);color:var(--muted);
  border-top:1px solid var(--line);
}

/* --- Rodapé da manutenção (absorve a antiga faixa de conversão) -------------
   Faixa no azul da marca (--brand), mais claro que o marinho. Duas colunas
   separadas por uma linha vertical sutil. */
.maint-cta-band{
  grid-column:1 / -1;margin-top:var(--space-8);
  background:var(--brand);border-radius:var(--radius-lg);
  display:grid;grid-template-columns:1fr 1fr;
}
.maint-cta-col{padding:var(--space-6) var(--space-7);}
.maint-cta-col + .maint-cta-col{border-left:1px solid rgba(255,255,255,.15);}
.maint-cta-band .eyebrow{color:var(--silver);}
.maint-cta-band p{
  color:#F8FAFC;font-weight:700;font-size:var(--text-xl);
  margin-top:var(--space-3);max-width:22ch;
}
/* Os dois botões são brancos com texto azul — qualquer fundo azul aqui se
   dissolveria na faixa. No hover a peça inteira escurece para o marinho e o
   texto vira branco junto, senão ficaria marinho sobre marinho. */
.maint-cta-band .btn{margin-top:var(--space-5);}
.maint-cta-band .btn-primary,
.maint-cta-band .btn-light{background:#fff;color:var(--brand);}
.maint-cta-band .btn-primary:hover,
.maint-cta-band .btn-light:hover{background:var(--brand-deep);color:#fff;}
@media (max-width:880px){
  .maint-cta-band{grid-template-columns:1fr;}
  .maint-cta-col + .maint-cta-col{border-left:0;border-top:1px solid rgba(255,255,255,.15);}
}

/* --- Contato --------------------------------------------------------------- */
#contato{padding-block:48px;}
#contato .contact-head{max-width:520px;}
#contato-title{font-size:clamp(26px,3.2vw,34px);font-weight:700;margin-top:var(--space-2);margin-bottom:10px;}
#contato .contact-head p{font-size:15px;color:var(--ink-2);max-width:520px;margin-bottom:24px;}

/* Divisor antes das colunas + grade das duas colunas. */
.contact-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;
  border-top:1px solid var(--line);padding-top:24px;
}
@media (max-width:880px){.contact-grid{grid-template-columns:1fr;gap:var(--space-6);}}

.contact-list{margin:0;}
.contact-list dd{margin:0;}
.contact-item{display:flex;gap:var(--space-3);align-items:flex-start;margin-bottom:16px;}
.contact-ico{flex:none;color:var(--line-strong);line-height:0;margin-top:3px;}
.contact-ico svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.contact-item .v{font-size:var(--text-lg);font-weight:500;}
.contact-item a.v{color:var(--brand);text-decoration:none;}
.contact-item a.v:hover{text-decoration:underline;}
.contact-cap{display:block;font-size:12px;color:var(--muted);margin-top:2px;}

.contact-media{
  position:relative;margin-top:var(--space-2);
  border:1px solid var(--line);border-radius:10px;overflow:hidden;
}
.contact-media iframe{display:block;width:100%;height:180px;border:0;}
.map-pill{
  position:absolute;right:var(--space-3);bottom:var(--space-3);
  display:inline-flex;align-items:center;
  padding:6px 12px;border-radius:var(--radius-full);
  background:var(--surface);border:1px solid var(--line-2);
  font-size:var(--text-xs);font-weight:600;color:var(--ink);
  text-decoration:none;box-shadow:var(--shadow-sm);
}
.map-pill:hover{border-color:var(--brand);color:var(--brand);}

/* Formulário compacto dentro do Contato. */
#contato .form{padding:20px;border-radius:12px;}
#contato .field{margin-bottom:14px;}
#contato .field label{font-size:13px;}
#contato .field label .opt{font-weight:400;color:var(--muted);}
#contato .field input,#contato .field select,#contato .field textarea{
  font-size:14px;min-height:0;padding:9px 12px;
}
#contato .field select{padding-right:40px;}
#contato .field textarea{min-height:70px;}
#contato .btn-block{padding:12px;font-size:15px;}
#contato .form-note{font-size:12px;}

/* --- Rodapé ---------------------------------------------------------------- */
.site-footer{background:var(--bg-soft);border-top:1px solid var(--line);padding-block:var(--space-7) var(--space-5);}
.footer-grid{
  display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:var(--space-6);
  padding-bottom:var(--space-6);border-bottom:1px solid var(--line);
}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr;gap:var(--space-5);}}
.footer-grid h2{
  font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;
  text-transform:uppercase;letter-spacing:0.1em;color:var(--muted);margin-bottom:var(--space-3);
}
.footer-grid p{font-size:var(--text-sm);color:var(--ink-2);max-width:36ch;}
.footer-grid li{margin-bottom:var(--space-2);}
.footer-grid a{
  font-size:var(--text-sm);color:var(--ink-2);text-decoration:none;
  display:inline-flex;align-items:center;min-height:28px;
}
.footer-grid a:hover{color:var(--brand);}
.footer-brand .brand-logo-img{margin-bottom:var(--space-4);}

.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:var(--space-2);padding-top:var(--space-5);
  font-family:var(--font-mono);font-size:var(--text-xs);color:var(--muted);
}