/* =========================================================================
   Stahlbox Elevadores
   Tema: travado em escuro. A fotografia de produto da marca e recortada
   sobre preto e o chevron laranja so funciona sobre fundo escuro.
   Acento unico: laranja Stahlbox (#F5761A). Raio unico: 2px.
   ========================================================================= */

@font-face {
  font-family: 'Archivo';
  src: url('../assets/fonts/archivo-var-latin.woff2') format('woff2-variations');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../assets/fonts/plexmono-400-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../assets/fonts/plexmono-500-latin.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  --preto:          #0b0b0c;
  --superficie:     #121215;
  --superficie-alta:#1a1a1e;
  --borda:          #26262b;
  --borda-forte:    #3a3a41;
  --texto:          #f3f3f1;
  --texto-suave:    #a8a8af;
  --acento:         #f5761a;
  --acento-claro:   #ff9243;
  --acento-fundo:   rgba(245, 118, 26, 0.10);
  --whats:          #25d366;

  --raio: 2px;
  --cabecalho-h: 72px;
  --largura: 1360px;
  --margem: clamp(1.25rem, 5vw, 3.5rem);
  --curva: cubic-bezier(0.16, 1, 0.3, 1);

  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 14 16'%3E%3Cg fill='none' stroke='%23f5761a' stroke-width='2.4' stroke-linecap='square'%3E%3Cpath d='M1.6 6.8 7 1.6l5.4 5.2'/%3E%3Cpath d='M1.6 14.2 7 9l5.4 5.2'/%3E%3C/g%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--cabecalho-h) + 1rem); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--preto);
  color: var(--texto);
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.04;
  text-wrap: balance;
}
p { margin: 0; }
ul, ol, dl { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
  border-radius: var(--raio);
}

.pular {
  position: absolute; left: 1rem; top: -100px; z-index: 200;
  background: var(--acento); color: #12100d; font-weight: 700;
  padding: 0.75rem 1.25rem; border-radius: var(--raio);
  transition: top 0.2s var(--curva);
}
.pular:focus { top: 1rem; }

#topo-sentinela { position: absolute; top: 0; height: 1px; width: 1px; }

/* ---------- Blocos de secao ---------- */
.secao__cabecalho { max-width: 46rem; }
.secao__cabecalho h2 { font-size: clamp(1.85rem, 3.6vw, 3rem); }
.secao__apoio {
  margin-top: 1rem;
  color: var(--texto-suave);
  font-size: 1.0625rem;
  max-width: 52ch;
}

.sobrancelha {
  display: inline-flex; align-items: center; gap: 0.6rem;
  margin: 0 0 1rem;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--acento);
}
.sobrancelha::before {
  content: ''; width: 14px; height: 16px; flex: none;
  background: var(--chevron) no-repeat center / 14px 16px;
}

/* ---------- Botoes ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem; white-space: nowrap;
  padding: 0.9rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--raio);
  font-family: inherit; font-size: 0.9375rem; font-weight: 700;
  letter-spacing: 0.01em; text-decoration: none; cursor: pointer;
  transition: background-color 0.2s var(--curva), border-color 0.2s var(--curva),
              color 0.2s var(--curva), transform 0.12s var(--curva);
}
/* Texto quase-preto sobre laranja: 6:1 de contraste. Branco sobre laranja
   nao passaria no AA, e o par escuro/alta-visibilidade e o codigo visual
   de equipamento de oficina. */
.botao--primario { background: var(--acento); color: #17110a; }
.botao--primario:hover { background: var(--acento-claro); }
.botao--fantasma { background: transparent; color: var(--texto); border-color: var(--borda-forte); }
.botao--fantasma:hover { border-color: var(--acento); color: var(--acento); }
.botao:active { transform: translateY(1px); }
.botao--compacto { padding: 0.65rem 1.15rem; font-size: 0.875rem; }
.botao--cheio { width: 100%; }

/* ---------- Cabecalho ---------- */
.cabecalho {
  position: fixed; inset: 0 0 auto; z-index: 100;
  height: var(--cabecalho-h);
  background: transparent;
  transition: background-color 0.3s var(--curva), border-color 0.3s var(--curva);
  border-bottom: 1px solid transparent;
}
.cabecalho.esta-fixo {
  background: rgba(11, 11, 12, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--borda);
}
@media (prefers-reduced-transparency: reduce) {
  .cabecalho.esta-fixo { background: var(--preto); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.cabecalho__interno {
  height: 100%; max-width: var(--largura); margin: 0 auto;
  padding: 0 var(--margem);
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
}
.cabecalho__marca { flex: none; line-height: 0; }
.cabecalho__marca img { width: 100px; height: auto; }

.navegacao { display: flex; gap: clamp(1rem, 2.2vw, 2rem); margin-left: auto; }
.navegacao a {
  position: relative;
  font-size: 0.9375rem; font-weight: 600; text-decoration: none;
  color: var(--texto-suave);
  transition: color 0.2s var(--curva);
}
.navegacao a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -6px;
  height: 2px; background: var(--acento);
  transition: right 0.28s var(--curva);
}
.navegacao a:hover { color: var(--texto); }
.navegacao a:hover::after { right: 0; }

.cabecalho__acoes { display: flex; align-items: center; gap: 0.75rem; }

.menu-alternar {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 42px; height: 42px; padding: 0 9px;
  background: transparent; border: 1px solid var(--borda-forte);
  border-radius: var(--raio); cursor: pointer;
}
.menu-alternar span {
  display: block; height: 2px; background: var(--texto);
  transition: transform 0.25s var(--curva), opacity 0.2s var(--curva);
}
.menu-alternar[aria-expanded='true'] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-alternar[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.menu-alternar[aria-expanded='true'] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Heroi: split assimetrico ---------- */
.heroi {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  align-items: center;
  min-height: min(100svh, 920px);
  padding-top: var(--cabecalho-h);
}
.heroi__texto {
  padding: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3.5rem) clamp(2.5rem, 5vw, 4rem)
           max(var(--margem), calc((100vw - var(--largura)) / 2 + var(--margem)));
}
/* Escala pensada junto com a largura da coluna: o titulo tem de caber
   em duas linhas ate 1440px. */
.heroi__titulo {
  font-size: clamp(2.75rem, 5vw, 4.5rem);
  line-height: 1.02;
  padding-bottom: 0.08em; /* folga para a cauda do Q */
}
.heroi__subtexto {
  margin-top: 1.5rem;
  max-width: 38ch;
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  color: var(--texto-suave);
}
.heroi__acoes { display: flex; flex-wrap: wrap; gap: 0.875rem; margin-top: 2.25rem; }

.heroi__midia { position: relative; height: 100%; min-height: 380px; }
.heroi__midia img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }
.heroi__midia::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--preto) 0%, rgba(11,11,12,0.45) 22%, rgba(11,11,12,0) 55%);
}

/* ---------- Marcos: faixa de numeros ---------- */
.marcos { border-block: 1px solid var(--borda); background: var(--superficie); }
.marcos__lista {
  max-width: var(--largura); margin: 0 auto;
  padding: clamp(2rem, 4vw, 3rem) var(--margem);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
}
.marcos__item { padding-inline: clamp(0.75rem, 2vw, 2rem); }
.marcos__item + .marcos__item { border-left: 1px solid var(--borda); }
.marcos__item:first-child { padding-inline-start: 0; }
.marcos__item dt {
  font-size: 0.8125rem; font-weight: 600; color: var(--texto-suave);
  letter-spacing: 0.02em;
}
.marcos__item dd {
  margin: 0.35rem 0 0;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: clamp(1.6rem, 3.2vw, 2.5rem); font-weight: 500;
  letter-spacing: -0.02em; color: var(--acento); line-height: 1.1;
}
.marcos__item dd i {
  font-style: normal; font-size: 0.42em; font-weight: 400;
  color: var(--texto-suave); margin-left: 0.35em;
}

/* ---------- Produtos ---------- */
.produtos { max-width: var(--largura); margin: 0 auto; padding: clamp(4rem, 9vw, 7.5rem) var(--margem); }

.filtros { display: flex; flex-wrap: wrap; gap: 0.625rem; margin: 2.5rem 0 2.25rem; }
.filtro {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 1.05rem;
  background: transparent; color: var(--texto-suave);
  border: 1px solid var(--borda-forte); border-radius: var(--raio);
  font-family: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer;
  transition: color 0.2s var(--curva), border-color 0.2s var(--curva), background-color 0.2s var(--curva);
}
.filtro span {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.75rem; color: var(--texto-suave); opacity: 0.75;
}
.filtro:hover { color: var(--texto); border-color: var(--texto-suave); }
.filtro.esta-ativo { background: var(--acento); border-color: var(--acento); color: #17110a; }
.filtro.esta-ativo span { color: #17110a; opacity: 0.7; }

/* 10 produtos: 5 colunas fecham duas fileiras exatas no desktop. */
.grade-produtos {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(0.875rem, 1.6vw, 1.25rem);
}
.produto { display: flex; }
.produto.esta-oculto { display: none; }

.produto__gatilho {
  display: flex; flex-direction: column; width: 100%; padding: 0; text-align: left; cursor: pointer;
  background: var(--superficie);
  border: 1px solid var(--borda); border-radius: var(--raio);
  color: inherit; font: inherit;
  overflow: hidden;
  transition: border-color 0.25s var(--curva), background-color 0.25s var(--curva),
              transform 0.25s var(--curva);
}
.produto__gatilho:hover { border-color: var(--acento); background: var(--superficie-alta); transform: translateY(-3px); }
.produto__midia { display: block; overflow: hidden; background: #000; }
/* A foto de origem traz o nome do modelo gravado no topo. O enquadramento
   4:3 deslocado corta essa faixa: o nome fica so na tipografia do card. */
.produto__midia img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 74%;
  transition: transform 0.5s var(--curva);
}
.produto__gatilho:hover .produto__midia img { transform: scale(1.05); }

.produto__info {
  display: flex; flex-direction: column; flex: 1;
  padding: 1.15rem 1.25rem 1.25rem;
}
.produto__tipo {
  display: block;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--texto-suave);
}
.produto__nome {
  display: block; margin-top: 0.4rem;
  font-size: 1.125rem; font-weight: 800; letter-spacing: -0.02em;
}
.produto__capacidade {
  display: block; margin-top: 0.75rem;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 1.5rem; font-weight: 500; color: var(--acento); line-height: 1;
}
.produto__capacidade i {
  font-style: normal; font-size: 0.5em; color: var(--texto-suave); margin-left: 0.25em;
}
.produto__acao {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-top: auto; padding-top: 0.9rem;
  border-top: 1px solid var(--borda);
  width: 100%;
  font-size: 0.8125rem; font-weight: 600; color: var(--texto-suave);
  transition: color 0.2s var(--curva);
}
.produto__acao::after { content: '\2192'; transition: transform 0.25s var(--curva); }
.produto__gatilho:hover .produto__acao { color: var(--acento); }
.produto__gatilho:hover .produto__acao::after { transform: translateX(4px); }

.produtos__nota { margin-top: 2rem; color: var(--texto-suave); }

/* ---------- Ficha tecnica (dialog nativo) ---------- */
.ficha {
  width: min(48rem, calc(100vw - 2rem));
  max-height: min(88svh, 52rem);
  padding: 0; border: 1px solid var(--borda-forte); border-radius: var(--raio);
  background: var(--superficie); color: var(--texto);
  overflow: hidden;
}
.ficha::backdrop { background: rgba(5, 5, 6, 0.78); backdrop-filter: blur(4px); }
.ficha__caixa { max-height: inherit; overflow-y: auto; padding: clamp(1.75rem, 4vw, 2.75rem); }

.ficha__fechar {
  position: sticky; top: 0; float: right; z-index: 2;
  width: 38px; height: 38px; margin: -0.5rem -0.5rem 0 0;
  display: grid; place-items: center;
  background: var(--superficie-alta); color: var(--texto);
  border: 1px solid var(--borda-forte); border-radius: var(--raio);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
  transition: border-color 0.2s var(--curva), color 0.2s var(--curva);
}
.ficha__fechar:hover { border-color: var(--acento); color: var(--acento); }

.ficha__tipo {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--texto-suave);
}
.ficha__nome { margin-top: 0.5rem; font-size: clamp(1.75rem, 4vw, 2.5rem); }
.ficha__garantia {
  margin-top: 0.75rem; display: inline-block;
  padding: 0.3rem 0.7rem;
  background: var(--acento-fundo); border: 1px solid rgba(245,118,26,0.35);
  border-radius: var(--raio);
  font-size: 0.8125rem; font-weight: 600; color: var(--acento-claro);
}

.ficha__destaques {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  margin: 1.75rem 0 0;
  background: var(--borda); border: 1px solid var(--borda);
  border-radius: var(--raio); overflow: hidden;
}
.ficha__destaques li { background: var(--superficie-alta); padding: 1.1rem 1rem; }
.ficha__num {
  display: block;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: clamp(1.25rem, 3vw, 1.75rem); font-weight: 500;
  color: var(--acento); line-height: 1.15; letter-spacing: -0.02em;
}
.ficha__num i { font-style: normal; font-size: 0.5em; color: var(--texto-suave); margin-left: 0.25em; }
.ficha__rot { display: block; margin-top: 0.4rem; font-size: 0.75rem; color: var(--texto-suave); line-height: 1.35; }

/* Divisor apenas entre grupos, nunca por linha */
.ficha__grupo { padding-top: 1.75rem; margin-top: 1.75rem; border-top: 1px solid var(--borda); }
.ficha__grupo h3 {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--texto-suave);
}
.ficha__grupo dl { margin-top: 1rem; display: grid; gap: 0.7rem; }
.ficha__grupo dl > div {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem; align-items: baseline;
}
.ficha__grupo dt { font-size: 0.9375rem; color: var(--texto-suave); }
.ficha__grupo dd {
  margin: 0; text-align: right;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.875rem; font-weight: 500; color: var(--texto);
}
.ficha__nota {
  margin-top: 1.75rem; padding: 0.9rem 1.1rem;
  background: var(--acento-fundo); border-left: 3px solid var(--acento);
  border-radius: var(--raio);
  font-size: 0.875rem; color: var(--texto-suave);
}
.ficha__rodape { margin-top: 1.75rem; }

/* ---------- Engenharia ---------- */
.engenharia {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: stretch;
  border-top: 1px solid var(--borda);
  background: var(--superficie);
}
.engenharia__midia { position: relative; min-height: 300px; }
.engenharia__midia img { width: 100%; height: 100%; object-fit: cover; object-position: 30% center; }
.engenharia__midia::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(11,11,12,0) 45%, var(--superficie) 100%);
}
.engenharia__conteudo {
  padding: clamp(3rem, 7vw, 6rem) max(var(--margem), calc((100vw - var(--largura)) / 2 + var(--margem)))
           clamp(3rem, 7vw, 6rem) clamp(2rem, 4vw, 4rem);
  align-self: center;
}
.engenharia__conteudo h2 { font-size: clamp(1.85rem, 3.6vw, 3rem); }

.detalhes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: clamp(1.5rem, 2.5vw, 2.25rem);
  margin-top: 2.75rem;
}
.detalhe { padding-top: 1rem; border-top: 2px solid var(--acento); }
.detalhe h3 { font-size: 1.0625rem; letter-spacing: -0.015em; }
.detalhe p { margin-top: 0.5rem; font-size: 0.9375rem; color: var(--texto-suave); }

/* ---------- Pilares: bento de 3 celulas ---------- */
.pilares { max-width: var(--largura); margin: 0 auto; padding: clamp(4rem, 9vw, 7.5rem) var(--margem); }
.pilares__titulo { font-size: clamp(1.85rem, 3.6vw, 3rem); }
.pilares__grade {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(0.875rem, 1.6vw, 1.25rem);
  margin-top: 2.75rem;
}
.pilar {
  position: relative; overflow: hidden;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--superficie);
  border: 1px solid var(--borda); border-radius: var(--raio);
  display: flex; align-items: flex-end;
  min-height: 210px;
}
.pilar--largo { grid-row: span 2; min-height: 380px; }
.pilar--largo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  opacity: 0.5;
}
.pilar--largo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(0deg, var(--preto) 8%, rgba(11,11,12,0.35) 62%, rgba(11,11,12,0) 100%);
}
.pilar--acento { border-color: rgba(245, 118, 26, 0.4); background: var(--acento-fundo); }
.pilar__texto { position: relative; z-index: 1; }
.pilar__texto h3 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); }
.pilar__texto p { margin-top: 0.75rem; color: var(--texto-suave); font-size: 0.9375rem; max-width: 40ch; }
.pilar--largo .pilar__texto p { color: #d6d6d2; }

/* ---------- Empresa: faixa de midia com bloco deslocado ---------- */
.empresa { position: relative; isolation: isolate; border-block: 1px solid var(--borda); }
.empresa__fundo {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: center 58%;
}
.empresa::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(11,11,12,0.97) 0%, rgba(11,11,12,0.93) 42%, rgba(11,11,12,0.55) 100%);
}
.empresa__bloco {
  max-width: var(--largura); margin: 0 auto;
  padding: clamp(4rem, 9vw, 7rem) var(--margem);
}
.empresa__bloco h2 { font-size: clamp(1.85rem, 3.6vw, 3rem); max-width: 18ch; }
.empresa__bloco p { margin-top: 1.25rem; max-width: 58ch; color: #cfcfd4; }
.empresa__local {
  margin-top: 2rem !important;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.8125rem; color: var(--texto-suave) !important;
}

/* ---------- Contato ---------- */
.contato {
  max-width: var(--largura); margin: 0 auto;
  padding: clamp(4rem, 9vw, 7.5rem) var(--margem);
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}
.contato__formulario h2 { font-size: clamp(1.85rem, 3.6vw, 2.75rem); }
#form-orcamento { margin-top: 2.25rem; display: grid; gap: 1.25rem; }

.campo { display: grid; gap: 0.5rem; }
.campo label { font-size: 0.875rem; font-weight: 600; color: var(--texto); }
.campo abbr { color: var(--acento); text-decoration: none; }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 0.8rem 0.9rem;
  background: var(--superficie-alta); color: var(--texto);
  border: 1px solid var(--borda-forte); border-radius: var(--raio);
  font-family: inherit; font-size: 0.9375rem; line-height: 1.5;
  transition: border-color 0.2s var(--curva);
}
.campo textarea { resize: vertical; min-height: 6.5rem; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--texto-suave); }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { border-color: var(--acento); }
.campo__ajuda { font-size: 0.8125rem; color: var(--texto-suave); }
.campo__erro { font-size: 0.8125rem; font-weight: 600; color: #ff9c8a; }
.campo.tem-erro input, .campo.tem-erro select { border-color: #ff9c8a; }
.form__nota { margin-top: 0.25rem; font-size: 0.8125rem; color: var(--texto-suave); }

.contato__canais { display: grid; gap: 0.875rem; }
.canal {
  padding: 1.35rem 1.5rem;
  background: var(--superficie);
  border: 1px solid var(--borda); border-radius: var(--raio);
}
.canal h3 { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texto-suave); }
.canal p { margin-top: 0.6rem; color: var(--texto-suave); font-size: 0.9375rem; }
.canal p a { font-weight: 600; color: var(--texto); text-decoration: none; }
.canal p a:hover { color: var(--acento); }
.canal__rotulo {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--texto-suave); margin-left: 0.4rem;
}
.canal--destaque { border-color: var(--borda-forte); }
.canal__whats {
  display: inline-flex; align-items: center; gap: 0.65rem;
  margin-top: 0.7rem;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 1.125rem; font-weight: 500; text-decoration: none; color: var(--texto);
  transition: color 0.2s var(--curva);
}
.canal__whats img { width: 20px; height: 20px; }
.canal__whats:hover { color: var(--whats); }
.canal__mapa {
  display: inline-block; margin-top: 0.9rem;
  font-size: 0.875rem; font-weight: 600; color: var(--acento);
  text-decoration: none; border-bottom: 1px solid rgba(245,118,26,0.4);
}
.canal__mapa:hover { border-bottom-color: var(--acento); }

/* ---------- Rodape ---------- */
.rodape { border-top: 1px solid var(--borda); background: var(--superficie); }
.rodape__interno {
  max-width: var(--largura); margin: 0 auto;
  padding: clamp(3rem, 6vw, 4.5rem) var(--margem) clamp(2rem, 4vw, 3rem);
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: clamp(2rem, 4vw, 3rem);
}
.rodape__marca img { width: 110px; height: auto; }
.rodape__marca p { margin-top: 1.1rem; max-width: 32ch; font-size: 0.9375rem; color: var(--texto-suave); }
.rodape h2 { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texto-suave); }
.rodape__links { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; }
.rodape__links h2 { margin-bottom: 0.4rem; }
.rodape__links a, .rodape__contato a, .rodape__social a {
  font-size: 0.9375rem; font-weight: 600; text-decoration: none; color: var(--texto);
  transition: color 0.2s var(--curva);
}
.rodape__links a:hover, .rodape__contato a:hover, .rodape__social a:hover { color: var(--acento); }
.rodape__contato p, .rodape__social p { margin-top: 0.6rem; }
.rodape__contato h2, .rodape__social h2 { margin-bottom: 0.4rem; }

.rodape__base {
  max-width: var(--largura); margin: 0 auto;
  padding: 1.5rem var(--margem) 2rem;
  border-top: 1px solid var(--borda);
  display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; justify-content: space-between;
  font-size: 0.8125rem; color: var(--texto-suave);
}
.rodape__base a { color: var(--texto-suave); text-decoration: none; border-bottom: 1px solid var(--borda-forte); }
.rodape__base a:hover { color: var(--acento); }

/* ---------- WhatsApp flutuante ----------
   Unica excecao ao raio de 2px da pagina: o botao flutuante de WhatsApp e
   circular porque essa e a convencao que o usuario ja reconhece. */
.whats-flutuante {
  position: fixed; right: clamp(1rem, 3vw, 1.75rem); bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 90;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--whats);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  transition: transform 0.25s var(--curva);
}
.whats-flutuante img { width: 30px; height: 30px; }
.whats-flutuante:hover { transform: scale(1.07); }

/* ---------- Revelacao ao rolar ---------- */
@media (prefers-reduced-motion: no-preference) {
  .revelar { opacity: 0; transform: translateY(22px); }
  .revelar.esta-visivel {
    opacity: 1; transform: none;
    transition: opacity 0.7s var(--curva), transform 0.7s var(--curva);
    transition-delay: calc(var(--i, 0) * 70ms);
  }
}

/* ---------- Responsivo ---------- */
@media (max-width: 1240px) {
  .grade-produtos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1080px) {
  .heroi { grid-template-columns: 1fr; min-height: 0; }
  .heroi__texto {
    padding: clamp(3rem, 8vw, 4.5rem) var(--margem) clamp(2rem, 5vw, 3rem);
    order: 2;
  }
  .heroi__subtexto { max-width: 46ch; }
  .heroi__midia { order: 1; height: clamp(260px, 42svh, 420px); min-height: 0; }
  .heroi__midia::after {
    background: linear-gradient(0deg, var(--preto) 2%, rgba(11,11,12,0.15) 60%, rgba(11,11,12,0) 100%);
  }
  .engenharia { grid-template-columns: 1fr; }
  .engenharia__midia { height: clamp(240px, 34svh, 360px); }
  .engenharia__midia::after {
    background: linear-gradient(0deg, var(--superficie) 2%, rgba(11,11,12,0) 60%);
  }
  .engenharia__conteudo { padding: clamp(3rem, 7vw, 4rem) var(--margem); }
  .contato { grid-template-columns: 1fr; }
  .grade-produtos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rodape__interno { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .navegacao {
    position: fixed; inset: var(--cabecalho-h) 0 auto;
    flex-direction: column; gap: 0;
    padding: 0.5rem var(--margem) 1.5rem;
    background: var(--preto); border-bottom: 1px solid var(--borda);
    display: none;
  }
  .navegacao.esta-aberto { display: flex; }
  .navegacao a { padding: 0.95rem 0; border-bottom: 1px solid var(--borda); font-size: 1.0625rem; color: var(--texto); }
  .navegacao a::after { display: none; }
  .menu-alternar { display: flex; }
  .cabecalho__acoes { margin-left: auto; }
}

@media (max-width: 760px) {
  .marcos__lista { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1px; }
  .marcos__item:nth-child(odd) { padding-inline-start: 0; border-left: 0; }
  .marcos__item:nth-child(even) { border-left: 1px solid var(--borda); }
  .pilares__grade { grid-template-columns: 1fr; }
  .pilar--largo { grid-row: auto; min-height: 300px; }
  .ficha__destaques { grid-template-columns: 1fr; }
  .ficha__grupo dl > div { grid-template-columns: 1fr; gap: 0.15rem; }
  .ficha__grupo dd { text-align: left; }
  .grade-produtos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rodape__interno { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .heroi__acoes .botao { flex: 1 1 100%; }
  .cabecalho__acoes .botao--compacto { display: none; }
}

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}