/* Site da WT Estruturas Metálicas — direção A ajustada ("folha técnica"), aprovada em 03/11/2026.
   Cores no começo, em variáveis. Uma só cor de ação (o azul), fundo claro, linhas finas, sem sombra,
   sem degradê e sem rótulo em maiúsculas. Escala compacta (pedido de 31/10/2026). */

@font-face { font-family: 'IBM Plex Sans'; src: url('/fontes/IBMPlexSans-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+2713, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; src: url('/fontes/IBMPlexSans-400-extra.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-0130, U+0132-0151, U+0154-02BA, U+02BD-02C5, U+02C7-02D9, U+02DB, U+02DD-02FF, U+0302, U+0305-0307, U+030A-0322, U+0324-0328, U+032A-1FFF, U+2070-20AB, U+20AD-2121, U+2123-218F, U+2194-2211, U+2213-2214, U+2216-2712, U+2714-FEFE, U+FF00-FFFC, U+FFFE-10FFFF; }
@font-face { font-family: 'IBM Plex Sans'; src: url('/fontes/IBMPlexSans-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+2713, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; src: url('/fontes/IBMPlexSans-500-extra.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0100-0130, U+0132-0151, U+0154-02BA, U+02BD-02C5, U+02C7-02D9, U+02DB, U+02DD-02FF, U+0302, U+0305-0307, U+030A-0322, U+0324-0328, U+032A-1FFF, U+2070-20AB, U+20AD-2121, U+2123-218F, U+2194-2211, U+2213-2214, U+2216-2712, U+2714-FEFE, U+FF00-FFFC, U+FFFE-10FFFF; }
@font-face { font-family: 'IBM Plex Sans'; src: url('/fontes/IBMPlexSans-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+2713, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; src: url('/fontes/IBMPlexSans-600-extra.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0100-0130, U+0132-0151, U+0154-02BA, U+02BD-02C5, U+02C7-02D9, U+02DB, U+02DD-02FF, U+0302, U+0305-0307, U+030A-0322, U+0324-0328, U+032A-1FFF, U+2070-20AB, U+20AD-2121, U+2123-218F, U+2194-2211, U+2213-2214, U+2216-2712, U+2714-FEFE, U+FF00-FFFC, U+FFFE-10FFFF; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/fontes/IBMPlexMono-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+2713, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/fontes/IBMPlexMono-400-extra.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-0130, U+0132-0151, U+0154-02BA, U+02BD-02C5, U+02C7-02D9, U+02DB, U+02DD-02FF, U+0302, U+0305-0307, U+030A-0322, U+0324-0328, U+032A-1FFF, U+2070-20AB, U+20AD-2121, U+2123-218F, U+2194-2211, U+2213-2214, U+2216-2712, U+2714-FEFE, U+FF00-FFFC, U+FFFE-10FFFF; }

:root {
  --tinta: #0F1D3A;      /* títulos */
  --texto: #3B4557;      /* texto corrido */
  --suave: #5F6B7C;      /* apoio, legendas (4,9:1 sobre o fundo) */
  --acao: #1A3A75;       /* única cor de ação */
  --acao-claro: #E8EDF6; /* opção marcada */
  --linha: #D4DAE1;
  --fundo: #F6F7F9;      /* seções alternadas */
  --branco: #FFFFFF;
  --prata: linear-gradient(105deg, #D3DFE2 0%, #A3B5BA 30%, #E6EDF0 52%, #A7B8BD 75%, #CDD9DC 100%); /* texto do logotipo */
  --marinho: #041541;    /* o azul do logotipo original: topo e rodapé */
  --marinho-texto: #C9D2DE;
  --regua: #B3BCC7;
  --regua-texto: #8A94A1;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  /* Traços das listas e do botão do menu: desenhados como borda, que o navegador arredonda para um número inteiro de
     pixels da tela, igual em todos. Como caixa de 1,5 px, numa tela comum de computador um traço saía com 1 px e o
     vizinho com 2 px (parecia negrito; achado do Moisés em 03/11/2026). */
  --traco: 1.5px solid;
  color-scheme: light;
}
/* No iPhone (3 pixels da tela por pixel do site), 1,5 px vira 4,5 pixels da tela; o motor do iPhone guarda a borda como
   1,33 px e a desenha com 3 ou 4 pixels conforme a posição. 1 px dá 3 pixels exatos em todos os traços. */
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) { :root { --traco: 1px solid; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 16px; }
html, body { margin: 0; }
/* O rodapé encosta no fim da tela quando a página é mais curta que ela (a 404 no computador; revisão de 04/11/2026). */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
main { flex: 1 0 auto; }
body { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 16px; line-height: 1.6; color: var(--texto); background: var(--branco); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, dl, dd, figure, ol, ul { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { color: var(--tinta); font-weight: 600; text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
button, input, textarea { font: inherit; color: inherit; }
.mono { font-family: var(--mono); }
.nw { white-space: nowrap; }
.faixa { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
:focus-visible { outline: 2px solid var(--acao); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.pular { position: absolute; left: 12px; top: -60px; z-index: 30; background: var(--branco); color: var(--acao); padding: 10px 16px; border: 1px solid var(--linha); border-radius: 6px; font-weight: 500; }
.pular:focus { top: 10px; }

/* ---------- Topo ---------- */
.topo { background: var(--marinho); color: #fff; }
.topo .faixa { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.marca { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.marca img { width: 38px; height: 38px; }
.marca span { font-weight: 600; font-size: 15.5px; letter-spacing: .003em; white-space: nowrap; color: #D9E3E6; }
/* O texto do logotipo no prata do símbolo (pedido dele em 03/11/2026: "ao invés de deixar 100% branco, deixar mais ou
   menos na tonalidade do símbolo"): o mesmo degradê com o reflexo diagonal do anel; sem suporte, fica o prata claro liso. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .marca span { background: var(--prata); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.menu { display: flex; gap: 30px; font-size: 14.5px; }
.menu a { display: inline-flex; align-items: center; min-height: 44px; color: var(--marinho-texto); }
.menu a:hover, .menu a[aria-current="page"] { color: #fff; }
.menu a[aria-current="page"] { position: relative; }
.menu a[aria-current="page"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #fff; }
.abrir { display: none; width: 44px; height: 44px; border: 0; background: none; padding: 0 10px; color: #fff; cursor: pointer; margin-right: -10px; }
.abrir i { display: block; height: 0; border-top: var(--traco) currentColor; margin: 6px 0; }

/* Menu do celular: diálogo claro, letra normal, setinha fina e linhas finas. */
.gaveta { border: 0; padding: 0; margin: 0 0 0 auto; width: min(360px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; background: var(--branco); color: var(--texto); }
.gaveta::backdrop { background: rgba(4, 21, 65, .45); }
.gaveta:focus { outline: none; } /* o foco no próprio menu, ao abrir pelo toque, não desenha anel (o Tab segue para os links, com anel) */
.gaveta__topo { display: flex; align-items: center; justify-content: space-between; height: 58px; padding: 0 10px 0 20px; background: var(--marinho); color: #fff; }
.gaveta__topo .marca span { font-size: 14.5px; }
.gaveta__topo .marca img { width: 34px; height: 34px; }
.icbtn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: none; color: inherit; cursor: pointer; padding: 0; border-radius: 6px; }
.ic { width: 20px; height: 20px; flex: none; }
.gaveta__lista { padding: 8px 20px; }
.gaveta__lista a { display: flex; align-items: center; justify-content: space-between; min-height: 52px; border-bottom: 1px solid var(--linha); font-size: 16px; color: var(--tinta); }
.gaveta__lista a[aria-current="page"] { color: var(--acao); }
.gaveta__lista .ic { width: 18px; height: 18px; color: var(--suave); }
.gaveta__acoes { padding: 16px 20px; }
.gaveta__acoes .botao { width: 100%; justify-content: center; }
/* Contato da WT no pé do menu (pedido dele em 04/11/2026), no espaço que sobrava embaixo, com as linhas e os ícones
   do cartão da A WT. Em tela baixa (celular deitado), o menu rola e o contato vem logo depois do botão. */
.gaveta[open] { display: flex; flex-direction: column; }
.gaveta[open] > * { flex-shrink: 0; }
.gaveta__contato { margin-top: auto; padding: 12px 20px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--linha); }
.gaveta__contato p { font-size: 13px; color: var(--suave); }
.gaveta__contato li { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14.5px; }
.gaveta__contato li + li { border-top: 1px solid var(--linha); }
.gaveta__contato .ic { width: 18px; height: 18px; color: var(--suave); }
.gaveta__contato a { display: block; flex: 1; padding: 10px 0; color: var(--acao); } /* bloco, não flex: o flex apagaria o espaço entre "WhatsApp" e o número */

/* ---------- Botões e links ---------- */
.botao { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 22px; border-radius: 6px; background: var(--acao); color: #fff; font-weight: 500; font-size: 15px; border: 1px solid var(--acao); cursor: pointer; }
.botao:hover { background: #142F61; border-color: #142F61; }
.botao--linha { background: transparent; color: var(--acao); }
.botao--linha:hover { background: var(--acao-claro); border-color: var(--acao); }
.botao .ic { width: 18px; height: 18px; }
.link { color: var(--acao); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: rgba(26, 58, 117, .35); }
.link:hover { text-decoration-color: var(--acao); }
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 18px; }

/* ---------- Seções ---------- */
.sec { padding: 64px 0; }
.sec--fundo { background: var(--fundo); }
.cabeca { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 64px; align-items: end; margin-bottom: 30px; }
.titulo { font-size: 28px; line-height: 1.2; letter-spacing: -.006em; }
.cabeca p { font-size: 15.5px; max-width: 470px; }
/* Pedido dele em 04/11/2026: os textos ao lado dos títulos "visualmente mais alinhados entre si". Com o "pretty", o
   navegador quebrava cedo e a primeira linha parava longe da margem (71% a 84%); com a quebra comum, ela vai até onde
   cabe, e a última palavra continua presa à anterior (semViuva no montar.cjs). Só com o título e o texto lado a lado. */
@media (min-width: 861px) { .cabeca p { text-wrap: wrap; } .intro .cabeca p { text-wrap: pretty; } } /* a abertura das páginas, mais longa, fica como estava */

/* Abertura das páginas internas: título à esquerda, texto à direita. */
.intro { background: var(--fundo); padding: 48px 0 52px; }
.intro .cabeca { margin-bottom: 0; }
.intro h1 { font-size: 34px; line-height: 1.16; letter-spacing: -.008em; }
.intro .chamada + h1 { margin-top: 10px; }
.chamada { font-size: 13.5px; font-weight: 500; color: var(--acao); }

/* ---------- Topo da página inicial (prancha) ---------- */
.heroi { background: var(--fundo); padding: 36px 0 40px; }
.abertura { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 64px; align-items: end; }
.heroi h1 { margin-top: 10px; font-size: 36px; line-height: 1.16; letter-spacing: -.008em; }
.sub { font-size: 16px; max-width: 470px; }

.prancha { display: grid; grid-template-columns: 16px minmax(0, 1fr) 352px; grid-template-rows: 16px auto auto; margin-top: 28px; }
.regua-h { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: repeat(6, 1fr); }
.regua-v { grid-column: 1; grid-row: 2; display: grid; grid-template-rows: repeat(4, 1fr); }
.regua-h span, .regua-v span { font: 400 10px/1 var(--mono); color: var(--regua-texto); display: flex; align-items: center; justify-content: center; border-color: var(--regua); border-style: solid; border-width: 0; }
.regua-h span { border-left-width: 1px; }
.regua-h span:last-child { border-right-width: 1px; }
.regua-v span { border-top-width: 1px; }
.regua-v span:last-child { border-bottom-width: 1px; }
.foto { grid-column: 2; grid-row: 2; margin: 0; border-top: 1px solid var(--regua); border-left: 1px solid var(--regua); }
.foto img { width: 100%; height: auto; aspect-ratio: 1392 / 800; object-fit: cover; }
.legenda { grid-column: 2; grid-row: 3; margin-top: 10px; font-size: 11.5px; line-height: 1.4; color: var(--suave); }
.ficha { grid-column: 3; grid-row: 2; margin-left: 24px; background: var(--branco); border: 1px solid var(--linha); display: flex; flex-direction: column; }
.ficha h2 { font-size: 14px; line-height: 1.4; padding: 13px 20px; border-bottom: 1px solid var(--linha); }
@media (min-width: 861px) { .ficha { display: grid; grid-template-rows: auto 1fr 4fr; } } /* no computador, o quadro e as 4 linhas com a mesma altura */
.quadro { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--linha); }
.quadro div { padding: 14px 20px; display: flex; flex-direction: column; justify-content: center; }
.quadro div + div { border-left: 1px solid var(--linha); }
.quadro dt { font-size: 12.5px; line-height: 1.35; color: var(--suave); }
.quadro dd { margin-top: 3px; font-size: 16px; line-height: 1.3; font-weight: 600; color: var(--tinta); font-variant-numeric: tabular-nums; }
.linhas { flex: 1; display: grid; grid-auto-rows: 1fr; padding: 2px 20px; }
.linhas div { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--linha); }
.linhas div:last-child { border-bottom: 0; }
.linhas dt { font-size: 14px; line-height: 1.4; color: var(--suave); }
.linhas dd { font-size: 14.5px; line-height: 1.4; font-weight: 600; color: var(--tinta); text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Catálogo das famílias (página inicial) ---------- */
.familias { padding: 62px 0 64px; }
.catalogo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; }
.lista { border-top: 1px solid var(--linha); }
.lista li { border-bottom: 1px solid var(--linha); }
.lista button { all: unset; box-sizing: border-box; width: 100%; display: grid; grid-template-columns: 38px minmax(0, 1fr) 20px; padding: 12px 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.lista .n { font-family: var(--mono); font-size: 12px; line-height: 24px; color: var(--suave); }
.lista .nome { font-size: 16px; line-height: 24px; font-weight: 500; color: var(--tinta); }
.lista .seta { display: flex; align-items: center; justify-content: flex-end; height: 24px; color: var(--suave); }
.lista .seta .ic { width: 16px; height: 16px; }
.lista .seta__aberta { display: none; font-size: 15px; line-height: 24px; color: var(--acao); }
.lista .desc { grid-column: 2; font-size: 14px; line-height: 1.5; color: var(--suave); margin-top: 2px; display: none; }
.lista button[aria-pressed="true"] .desc { display: block; }
.lista button[aria-pressed="true"] .n, .lista button[aria-pressed="true"] .nome { color: var(--acao); }
.lista button[aria-pressed="true"] .seta .ic { display: none; }
.lista button[aria-pressed="true"] .seta__aberta { display: block; }
.lista button:hover .nome { color: var(--acao); }
.lista button:focus-visible { outline: 2px solid var(--acao); outline-offset: 2px; }
.mais { font-size: 14.5px; }
.mais a { display: inline-flex; align-items: center; min-height: 44px; }
.catalogo .mais { margin: 14px 0 -14px; } /* a margem negativa desconta a área de toque invisível abaixo do link, para o vão do fim da seção ficar igual ao de cima */
.painel { position: relative; }
.painel img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--fundo); }
.painel figcaption, .peca figcaption, .galeria-fab figcaption, .parque__destaque figcaption, .vitrine figcaption { margin-top: 12px; font-family: var(--mono); font-size: 11.5px; line-height: 1.4; color: var(--suave); }
.cm { position: absolute; width: 14px; height: 14px; border: 0 solid #9AA5B2; }
.cm.a { top: -8px; left: -8px; border-top-width: 1px; border-left-width: 1px; }
.cm.b { top: -8px; right: -8px; border-top-width: 1px; border-right-width: 1px; }

/* ---------- Estrutura fabril (página inicial): carrossel de arrastar ---------- */
/* Logo abaixo do catálogo, também em fundo branco: uma linha fina na largura do texto separa as duas seções. */
.sec--linha { padding-top: 0; }
.sec--linha > .faixa::before { content: ''; display: block; height: 1px; background: var(--linha); margin-bottom: 64px; }
.vitrine__trilho { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 60px) / 3.3); gap: 20px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.vitrine__trilho::-webkit-scrollbar { display: none; }
.vitrine__trilho > li { scroll-snap-align: start; }
.vitrine img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--fundo); }
.vitrine__pe { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; }
.vitrine__nav { display: flex; gap: 8px; }
.vitrine__nav .icbtn { border: 1px solid var(--linha); color: var(--tinta); background: var(--branco); }
.vitrine__nav .icbtn:hover:not(:disabled) { border-color: var(--acao); color: var(--acao); }
.vitrine__nav .icbtn:disabled { color: var(--regua); cursor: default; }

/* ---------- Para cada área (página inicial) ---------- */
.areas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.area { background: var(--branco); border: 1px solid var(--linha); padding: 22px 24px 8px; }
.area h3 { font-size: 16px; line-height: 1.35; padding-bottom: 12px; border-bottom: 1px solid var(--linha); }
.area li { position: relative; padding: 12px 0 12px 18px; font-size: 14.5px; line-height: 1.55; }
.area li + li { border-top: 1px solid var(--linha); }
.area li::before { content: ''; position: absolute; left: 1px; top: 21px; width: 7px; height: 0; border-top: var(--traco) var(--acao); }

/* ---------- Chamada final ---------- */
.final .faixa { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.final p { margin-top: 10px; max-width: 520px; }
.final .acoes { margin-top: 0; justify-content: flex-end; }
.areas__abas { display: none; }
/* Abas das áreas (só no celular). */
.chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--linha); border-radius: 6px; background: var(--branco); font-size: 14px; color: var(--texto); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.chip:hover { border-color: var(--acao); }
.chip[aria-pressed="true"] { border-color: var(--acao); background: var(--acao-claro); color: var(--acao); font-weight: 500; }
.repr__txt { margin-top: 10px; max-width: 520px; }

/* ---------- O que fabricamos (página) ---------- */
.indice { display: grid; grid-template-columns: repeat(4, max-content); gap: 8px; margin-top: 28px; }
.indice a { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px; line-height: 1.3; border: 1px solid var(--linha); border-radius: 6px; background: var(--branco); font-size: 14px; color: var(--tinta); }
.indice a span { font-family: var(--mono); font-size: 11.5px; color: var(--suave); }
.indice a:hover { border-color: var(--acao); color: var(--acao); }
.basico { margin-top: 24px; padding: 14px 18px; background: var(--branco); border: 1px solid var(--linha); font-size: 14.5px; }
.basico b { font-weight: 600; color: var(--tinta); }
.pecas > li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: center; padding: 44px 0; border-bottom: 1px solid var(--linha); scroll-margin-top: 16px; }
.pecas > li:first-child { padding-top: 0; }
.pecas > li:last-child { border-bottom: 0; padding-bottom: 0; }
.peca__n { font-family: var(--mono); font-size: 12px; color: var(--suave); }
.peca h2 { margin-top: 6px; font-size: 24px; line-height: 1.25; letter-spacing: -.005em; }
.peca__desc { margin-top: 10px; font-size: 15.5px; color: var(--tinta); }
.peca__uso { margin-top: 8px; }
.peca__uso b { font-weight: 500; color: var(--tinta); }
.peca__cotar { margin-top: 18px; }
.peca__cotar p { font-size: 13.5px; font-weight: 500; color: var(--tinta); }
.peca__cotar li { position: relative; padding: 6px 0 6px 18px; font-size: 14.5px; line-height: 1.5; }
.peca__cotar li::before { content: ''; position: absolute; left: 1px; top: 17px; width: 7px; height: 0; border-top: var(--traco) var(--acao); }
.peca .acoes { margin-top: 20px; }
.peca__foto { position: relative; margin: 0; }
.peca__foto img, .peca__foto svg { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--fundo); }
.ampliar { all: unset; box-sizing: border-box; display: block; position: relative; width: 100%; cursor: zoom-in; }
.ampliar:focus-visible { outline: 2px solid var(--acao); outline-offset: 3px; }
.fotos { position: relative; }
/* Com mais de uma foto, a ponta da seguinte aparece à direita (36 px), para mostrar que dá para arrastar (pedido dele,
   03/11/2026). O selo "1 de 3" fica em cada foto. */
.carrossel { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.carrossel::-webkit-scrollbar { display: none; }
.carrossel > li { flex: 0 0 calc(100% - 44px); scroll-snap-align: start; scroll-snap-stop: always; }
.carrossel > li:only-child { flex-basis: 100%; }
.ampliar__mais { pointer-events: none; position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 6px; background: rgba(255, 255, 255, .94); color: var(--tinta); font-size: 13px; font-weight: 500; }
.ampliar__mais .ic { width: 16px; height: 16px; }

/* Foto ampliada (escolhas dele, 03/11/2026): a foto num cartão branco de cantos arredondados, no meio da tela, com a
   página aparecendo por trás sob um véu escuro leve; título e X em cima, legenda e setas embaixo, sem linhas internas;
   as fotos lado a lado para arrastar, com a ponta da seguinte aparecendo à direita, como nos carrosséis da página.
   Todas as fotos são 4:3: a largura do cartão sai da altura da tela menos o título e a legenda. */
.galeria { border: 1px solid var(--linha); border-radius: 12px; padding: 0; margin: auto; inset: 0; width: min(100vw - 24px, (100vh - 150px) * 4 / 3, 880px); width: min(100vw - 24px, (100dvh - 150px) * 4 / 3, 880px); max-width: none; height: fit-content; max-height: none; overflow: hidden; background: var(--branco); color: var(--texto); overscroll-behavior: contain; }
.galeria[open] { display: flex; flex-direction: column; }
.galeria::backdrop { background: rgba(12, 16, 22, .38); }
:root:has(.galeria[open]) { overflow: hidden; }
.galeria__cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 4px 4px 16px; }
.galeria__cab p { font-size: 14.5px; font-weight: 500; color: var(--tinta); }
.galeria__trilho { flex: 0 0 auto; display: flex; gap: 8px; scroll-padding-inline: 8px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.galeria__trilho:focus { outline: none; }
.galeria__trilho::-webkit-scrollbar { display: none; }
/* Vão branco de 8 px também antes da primeira foto e depois da última, igual ao vão entre elas (pedido dele, 03/11/2026):
   os dois marcadores vazios ganham o vão do `gap` de cada lado. Foto = largura − 8 − 8 − 36 da ponta da seguinte. */
.galeria__trilho::before, .galeria__trilho::after { content: ''; flex: 0 0 0; }
.galeria__trilho::after { flex-basis: 1px; margin-left: -1px; } /* o motor do iPhone só conta o vão do fim com uma caixa de 1 px */
.galeria__trilho > li { flex: 0 0 calc(100% - 52px); display: flex; scroll-snap-align: start; scroll-snap-stop: always; }
.galeria__trilho > li:only-child { flex-basis: calc(100% - 16px); }
.galeria__trilho img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.galeria__rodape { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 4px 4px 16px; }
.galeria__rodape p { font-family: var(--mono); font-size: 12px; color: var(--suave); }
.galeria__nav { display: flex; align-items: center; gap: 4px; }
.galeria__nav span { font-size: 13px; color: var(--suave); min-width: 64px; text-align: center; }
/* Celular deitado (tela baixa): a foto à esquerda e, à direita, o título e o X em cima e a legenda e as setas embaixo.
   Centralizado por transform: com a grade, o motor do iPhone esticava o cartão até a altura toda da tela. */
@media (orientation: landscape) and (max-height: 500px) {
  .galeria { inset: 50% auto auto 50%; margin: 0; height: auto; transform: translate(-50%, -50%); width: min(100vw - 24px, (100vh - 26px) * 4 / 3 + 226px); width: min(100vw - 24px, (100dvh - 26px) * 4 / 3 + 226px); }
  .galeria[open] { display: grid; grid-template-columns: minmax(0, 1fr) 172px; grid-template-rows: auto 1fr; }
  .galeria__trilho { grid-column: 1; grid-row: 1 / 3; align-self: center; }
  .galeria__cab { grid-column: 2; grid-row: 1; align-items: flex-start; padding: 4px 4px 0 14px; }
  .galeria__cab p { padding-top: 11px; }
  .galeria__rodape { grid-column: 2; grid-row: 2; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 4px; padding: 0 4px 4px 14px; }
  .galeria__nav { margin-left: -14px; }
}

/* ---------- Estrutura (página) ---------- */
.instalacao { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--linha); background: var(--branco); }
.instalacao div { padding: 16px 22px; }
.instalacao div + div { border-left: 1px solid var(--linha); }
.instalacao dt { font-size: 12.5px; color: var(--suave); }
.instalacao dd { margin-top: 3px; font-size: 18px; line-height: 1.3; font-weight: 600; color: var(--tinta); font-variant-numeric: tabular-nums; }
.intro .instalacao { margin-top: 28px; }
.processos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--linha); }
.processos li { padding: 20px 28px 22px 0; border-bottom: 1px solid var(--linha); }
.processos li:not(:nth-child(3n + 1)) { padding-left: 28px; border-left: 1px solid var(--linha); }
.processos .n { font-family: var(--mono); font-size: 12px; color: var(--suave); }
.processos h3 { margin-top: 4px; font-size: 16px; line-height: 1.35; }
.processos p { margin-top: 4px; font-size: 14.5px; }
/* Cabeçalho como o de "Como a WT fabrica"; embaixo, a tabela e a foto do plasma com a mesma altura (vídeo dele, 03/11/2026). */
.parque { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.32fr); gap: 48px; align-items: start; }
.tabela { width: 100%; border-collapse: collapse; background: var(--branco); border: 1px solid var(--linha); font-size: 14.5px; }
.tabela th, .tabela td { text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--linha); vertical-align: top; }
.tabela thead th { font-size: 12.5px; font-weight: 500; color: var(--suave); background: var(--branco); }
.tabela tbody th { font-weight: 600; color: var(--tinta); }
.tabela tbody th span { display: block; margin-top: 1px; font-weight: 400; font-size: 13.5px; color: var(--suave); }
.tabela td { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; color: var(--tinta); font-weight: 600; vertical-align: middle; }
.tabela thead th:last-child { text-align: right; }
.tabela td.vazio { color: var(--suave); font-weight: 400; }
.tabela tr:last-child th, .tabela tr:last-child td { border-bottom: 0; }
.parque__destaque img, .galeria-fab img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--fundo); }
.galeria-fab { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 20px; }
.parque__destaque figcaption, .galeria-fab figcaption { margin-top: 8px; }

/* ---------- A WT (página) ---------- */
.quem { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.quem h1 { font-size: 34px; line-height: 1.16; letter-spacing: -.008em; }
.quem .chamada + h1 { margin-top: 10px; }
.quem__texto { margin-top: 14px; font-size: 16px; max-width: 500px; }
.quem .frase { margin-top: 22px; padding-left: 14px; border-left: 2px solid var(--acao); font-size: 16px; font-weight: 500; color: var(--tinta); }
.baixar { margin-top: 24px; } /* apresentação em PDF, como na Dutra */
.quem figure { position: relative; }
.quem img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.quem figcaption { margin-top: 10px; font-family: var(--mono); font-size: 11.5px; color: var(--suave); }
.mvv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--linha); }
.mvv > div { padding: 22px 28px 0 0; }
.mvv > div + div { padding-left: 28px; border-left: 1px solid var(--linha); }
.mvv h3 { font-size: 16px; }
.mvv p { margin-top: 8px; font-size: 14.5px; }
/* Valores (escolha dele, 03/11/2026): lista sem divisórias, com o traço azul curto das outras listas; Confiança,
   Verdade e Respeito na cor e no peso do texto, para não dividir atenção com o título. */
.valores { margin-top: 8px; }
.valores li { position: relative; padding: 3px 0 3px 18px; font-size: 14.5px; line-height: 1.6; }
.valores li + li { margin-top: 6px; }
.valores li:last-child { padding-bottom: 0; }
.valores li::before { content: ''; position: absolute; left: 1px; top: 15px; width: 7px; height: 0; border-top: var(--traco) var(--acao); }
.valores b { font-weight: 400; color: inherit; }
.setores { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.setores li { background: var(--branco); border: 1px solid var(--linha); padding: 18px 18px 20px; }
.setores h3 { font-size: 15.5px; }
.setores p { margin-top: 6px; font-size: 14px; line-height: 1.55; }
.repr { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.cartao { background: var(--branco); border: 1px solid var(--linha); padding: 20px 24px; }
.cartao__nome { font-size: 16px; font-weight: 600; color: var(--tinta); }
.cartao ul { margin-top: 12px; border-top: 1px solid var(--linha); }
.cartao li { display: flex; align-items: center; gap: 10px; min-height: 44px; border-bottom: 1px solid var(--linha); font-size: 14.5px; }
.cartao li:last-child { border-bottom: 0; }
.cartao li a { display: block; flex: 1; min-height: 44px; padding: 10px 0; color: var(--acao); } /* bloco, não flex: o flex apagaria o espaço entre "WhatsApp" e o número */
.cartao .ic { width: 18px; height: 18px; color: var(--suave); }

/* ---------- Contato e orçamento ---------- */
.contato { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.pedido { background: var(--branco); border: 1px solid var(--linha); padding: 26px 28px 28px; }
.pedido h2 { font-size: 20px; line-height: 1.3; }
.pedido__sub { margin-top: 4px; font-size: 14px; color: var(--suave); }
.pedido ul { margin-top: 8px; }
.pedido li { position: relative; padding: 6px 0 6px 18px; font-size: 14.5px; line-height: 1.5; }
.pedido li::before { content: ''; position: absolute; left: 1px; top: 17px; width: 7px; height: 0; border-top: var(--traco) var(--acao); }
.pedido .acoes { margin-top: 20px; }
.canais h2 { font-size: 18px; line-height: 1.3; }
.canais h2 + * { margin-top: 10px; }
.canais dl div { display: flex; justify-content: space-between; gap: 16px; align-items: center; min-height: 46px; border-bottom: 1px solid var(--linha); font-size: 14.5px; }
.canais dl { border-top: 1px solid var(--linha); }
.canais dt { color: var(--suave); }
.canais dd { text-align: right; color: var(--tinta); }
.canais dd a { color: var(--acao); display: inline-flex; align-items: center; min-height: 44px; }
.duvidas { border-top: 1px solid var(--linha); }
.duvida { border-bottom: 1px solid var(--linha); }
.duvida summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 52px; padding: 10px 0; cursor: pointer; list-style: none; font-size: 15.5px; color: var(--tinta); }
.duvida summary::-webkit-details-marker { display: none; }
.duvida summary .ic { width: 18px; height: 18px; color: var(--acao); transition: transform .2s; }
.duvida[open] summary .ic { transform: rotate(45deg); }
.duvida p { padding: 0 32px 16px 0; font-size: 14.5px; }

/* ---------- Páginas de apoio ---------- */
.texto-longo { max-width: 720px; }
.texto-longo h2 { margin-top: 28px; font-size: 18px; }
.texto-longo p { margin-top: 8px; }
.erro { padding: 80px 0 96px; }
.erro p { margin-top: 10px; }
.erro .link { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- Rodapé ---------- */
.rodape { background: var(--marinho); color: var(--marinho-texto); font-size: 14px; }
.rodape__in { display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(0, 1fr)); gap: 32px; padding: 48px 32px 36px; }
.rodape__in--curto { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.rodape .marca { display: flex; padding: 0; color: #fff; }
.rodape__marca p { margin-top: 12px; max-width: 300px; line-height: 1.55; }
.rodape__t { color: #fff; font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.rodape li { line-height: 1.5; }
.rodape__fab li { display: flex; align-items: center; gap: 10px; }
.rodape__fab .ic { width: 16px; height: 16px; color: #9EABBE; }
.rodape__fab .ponto { margin: 0 8px; color: #9EABBE; }
.rodape a { display: inline-block; padding: 4px 0; color: var(--marinho-texto); }
.rodape a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
/* Apresentação em PDF e Privacidade (pedido dele em 04/11/2026, com o print do rodapé): um ao lado do outro, com um ponto
   no meio, na coluna da marca e na mesma linha de "Contato", o último item de Páginas, como no rodapé da Dutra. A marca e
   os dois links dividem a 1ª célula: a marca em cima e os links embaixo (align-self: end, na base da coluna mais alta,
   a de Páginas). A apresentação leva o ícone de baixar, na cor dos ícones de Fábrica: um destaque leve. */
.rodape__marca { grid-column: 1; grid-row: 1; }
.rodape__fab { grid-column: 2; grid-row: 1; }
.rodape__paginas { grid-column: -2; grid-row: 1; }
.rodape__docs { grid-column: 1; grid-row: 1; align-self: end; display: flex; flex-wrap: wrap; align-items: center; }
.rodape__docs li + li::before { content: "·"; content: "·" / ""; margin: 0 8px; color: #9EABBE; }
.rodape .rodape__pdf { display: inline-flex; align-items: center; gap: 10px; } /* o mesmo vão dos ícones de Fábrica */
.rodape__pdf .ic { width: 16px; height: 16px; color: #9EABBE; }
.rodape__fim { border-top: 1px solid rgba(201, 210, 222, .2); }
.rodape__fim p { padding: 16px 32px 20px; font-size: 12.5px; color: #9EABBE; }

/* ---------- Tablet e celular ---------- */
/* ---- Novo rumo de 04/11/2026 (a Dutra como modelo, com a identidade da WT) ---- */
/* Pedido de orçamento da página inicial (04/11/2026): no celular, fechado (abre ao tocar); no computador, aberto, em
   três colunas, sem o botão de abrir (site.js põe a classe orc--fixo). Nada é guardado: a mensagem vai pronta. */
.orc__abre { background: var(--branco); border: 1px solid var(--linha); }
.orc__abre summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; padding: 12px 22px; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
.orc__abre summary::-webkit-details-marker { display: none; }
.orc__abre summary .ic { flex: none; width: 20px; height: 20px; color: var(--acao); transition: transform .2s; }
.orc__abre[open] summary { border-bottom: 1px solid var(--linha); }
.orc__abre[open] summary .ic { transform: rotate(45deg); }
.orc__sum { display: grid; gap: 2px; }
.orc__sum-t { font-size: 16px; line-height: 1.35; font-weight: 600; color: var(--tinta); }
.orc__sum-s { font-size: 14px; line-height: 1.4; color: var(--suave); }
.orc--fixo .orc__abre summary { display: none; }
.orc__form { padding: 22px 26px 24px; }
.orc__nota { font-size: 14px; color: var(--suave); }
.orc__campos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px; margin-top: 16px; }
.orc__campo--2 { grid-column: span 2; }
.orc__campo, .orc__grupo { min-width: 0; }
.orc__grupo { border: 0; margin: 0; padding: 0; }
.orc__campo label, .orc__grupo legend { display: block; padding: 0; margin-bottom: 6px; font-family: var(--mono); font-size: 11.5px; line-height: 1.4; color: var(--suave); }
.orc__entrada { display: block; width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--linha); border-radius: 6px; background: var(--branco); font-size: 16px; color: var(--tinta); } /* 16 px: o iPhone e o iPad não ampliam a tela ao tocar no campo */
.orc__entrada::placeholder { color: #8A94A3; }
.orc__entrada:focus-visible { outline: 2px solid var(--acao); outline-offset: 1px; border-color: var(--acao); }
.orc__entrada[aria-invalid="true"] { border-color: var(--acao); background: var(--acao-claro); }
select.orc__entrada { appearance: none; -webkit-appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A3A75' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
.orc__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.aviso { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; padding: 10px 14px; background: var(--acao-claro); font-size: 14px; color: var(--tinta); }
.aviso .ic { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--acao); }
.aviso[hidden] { display: none; }
.orc__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--linha); }
.orc__fim { margin-left: auto; font-size: 13.5px; color: var(--suave); }
/* Peças fabricadas: grade de 3 no computador, de 2 no tablet e carrossel de arrastar no celular. */
.obras__trilho { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 24px; }
.obras img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--fundo); }
.obras__leg { margin-top: 12px; font-family: var(--mono); font-size: 11.5px; line-height: 1.4; color: var(--suave); }
/* No computador e no tablet, uma linha fina embaixo das fotos; no celular, o último cartão do carrossel. */
.obras__fim { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 22px; background: var(--fundo); border: 1px solid var(--linha); }
.obras__t { font-size: 16px; line-height: 1.35; font-weight: 600; color: var(--tinta); }
.obras__fim p + p { margin-top: 2px; font-size: 14.5px; }
.obras__fim .link { flex: none; }
/* Área de toque de 44 px. Bloco em linha, não flex: o flex apagaria o espaço antes do "e-mail" ("Envie pore-mail"). */
.orc__acoes .link, .obras__fim .link { display: inline-block; padding: 12px 0; line-height: 20px; }
.obras .ampliar__mais { padding: 0 9px; }
.duvidas__mais { margin-top: 20px; font-size: 14.5px; }
/* Setores (página própria): as duas frentes de compra e a tabela dos setores, como uma folha técnica. */
/* Empresas atendidas (página inicial), como na Dutra: os nomes numa grade de linhas finas. */
/* Empresas atendidas: uma faixa só, com divisórias finas (escolha dele em 04/11/2026, opção B). */
.clientes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--branco); border: 1px solid var(--linha); }
.clientes li { display: flex; align-items: center; justify-content: center; min-height: 104px; padding: 16px 20px; text-align: center; font-size: 17px; line-height: 1.3; font-weight: 600; letter-spacing: -.005em; color: var(--tinta); }
.clientes li + li { border-left: 1px solid var(--linha); }
.frentes { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.frentes li { border: 1px solid var(--linha); padding: 22px 24px 24px; }
.frentes h3 { font-size: 16.5px; line-height: 1.35; }
.frentes p { margin-top: 6px; font-size: 14.5px; }
/* Onde a caldeiraria aparece em cada setor (página Setores). Pedido dele em 04/11/2026: os rótulos das colunas uma vez só,
   num cabeçalho sobre a tabela, e não repetidos em cada linha. O texto das colunas desce até a altura do nome do setor
   (abaixo do número), para a linha ler como uma linha só. */
.setores-tab__cab, .setores-tab li { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr) minmax(0, 1.4fr); gap: 40px; }
.setores-tab__cab { padding-bottom: 10px; }
.setores-tab__cab p { font-family: var(--mono); font-size: 11.5px; line-height: 1.4; color: var(--suave); }
.setores-tab ul { border-top: 1px solid var(--linha); }
.setores-tab li { padding: 22px 0; border-bottom: 1px solid var(--linha); }
.setores-tab h3 { font-size: 16.5px; line-height: 1.35; }
.setores-tab .n { display: block; margin-bottom: 4px; font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--suave); }
.setores-tab li > div { padding-top: 20.5px; }
.setores-tab li p { font-size: 14.5px; }
/* No computador, os rótulos de cada linha ficam só para o leitor de tela (o cabeçalho visível é único); as abas, só no celular. */
.setores-tab__rot { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.setores-tab__abas { display: none; }
@media (max-width: 1080px) {
  .setores { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rodape__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rodape__marca { grid-column: 1 / -1; }
  .rodape__in--curto { grid-template-columns: 1fr 1fr; }
  /* Tablet: a marca na linha de cima; embaixo, Fábrica e Páginas lado a lado, e os dois links à esquerda, na coluna de
     Fábrica, na mesma linha de "Contato". Na página Contato (sem Fábrica), Páginas à esquerda e os links à direita. */
  .rodape__fab { grid-column: 1; grid-row: 2; }
  .rodape__paginas { grid-column: 2; grid-row: 2; }
  .rodape__docs { grid-column: 1; grid-row: 2; }
  .rodape__in--curto .rodape__paginas { grid-column: 1; }
  .rodape__in--curto .rodape__docs { grid-column: 2; }
}
@media (max-width: 860px) {
  .menu { display: none; }
  .abrir { display: block; }
  .abertura, .cabeca, .final .faixa, .repr, .contato, .quem, .parque { grid-template-columns: 1fr; gap: 14px; }
  .contato, .parque { gap: 36px; }
  .quem { gap: 28px; }
  .final .acoes { justify-content: flex-start; margin-top: 4px; }
  .prancha { grid-template-columns: 14px minmax(0, 1fr); grid-template-rows: 14px auto auto auto auto; }
  .ficha { grid-column: 1 / -1; grid-row: 4; margin: 22px 0 0; }
  .catalogo { grid-template-columns: 1fr; gap: 0; }
  .indice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .areas__abas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
  .area.fora { display: none; }
  .lista .painel { margin: 4px 0 18px 38px; }
  .areas { grid-template-columns: 1fr; gap: 14px; }
  .pecas > li { grid-template-columns: 1fr; gap: 22px; }
  .vitrine__trilho { grid-auto-columns: calc((100% - 20px) / 2.2); }
  .galeria-fab { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .processos { grid-template-columns: 1fr 1fr; }
  .processos li:not(:nth-child(3n + 1)) { padding-left: 0; border-left: 0; }
  .processos li:nth-child(2n) { padding-left: 24px; border-left: 1px solid var(--linha); }
  .processos li:nth-child(2n + 1) { padding-right: 24px; }
  .mvv { grid-template-columns: 1fr; }
  .mvv > div, .mvv > div + div { padding: 18px 0 0; border-left: 0; }
  .mvv > div + div { margin-top: 6px; }
  .mvv > div + div { border-top: 1px solid var(--linha); }
  .orc__campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .orc__campo--2 { grid-column: 1 / -1; }
  .obras__trilho { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Setores no celular: abas, como as áreas da página inicial, e um cartão só. Os cinco cartões ocupam a mesma célula da
     grade (só o escolhido fica visível), e a caixa fica com a altura do maior: a página não pula ao trocar de setor.
     O nome do setor já está no botão marcado; no cartão, ele fica só para o leitor de tela. */
  .setores-tab__abas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
  .setores-tab__cab { display: none; }
  .setores-tab ul { display: grid; border-top: 0; }
  .setores-tab li { grid-area: 1 / 1; grid-template-columns: 1fr; gap: 0; align-content: start; padding: 18px 20px 16px; background: var(--branco); border: 1px solid var(--linha); }
  .setores-tab li.fora { visibility: hidden; }
  .setores-tab h3 { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .setores-tab li > div { padding-top: 0; }
  .setores-tab li > .setores-tab__motivo { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linha); }
  .setores-tab li .setores-tab__rot { position: static; width: auto; height: auto; margin: 0 0 4px; overflow: visible; clip: auto; white-space: normal; font-family: var(--mono); font-size: 11.5px; line-height: 1.4; color: var(--suave); }
}
/* Rodapé numa coluna só a partir de 680 px: abaixo disso, Fábrica e Páginas não cabem lado a lado (entre 601 e 642 px os
   dois telefones quebravam em duas linhas, achado de 04/11/2026). Os dois links ficam logo abaixo das páginas, numa linha,
   como mais uma linha da lista.
   Pedido dele em 04/11/2026: as páginas uma por linha, à esquerda; "Apresentação em PDF" e "Privacidade" na coluna da
   direita, uma em cima da outra, no fim dela: a apresentação na linha de "A WT" e a privacidade na linha de "Contato". */
@media (max-width: 680px) {
  .rodape__in, .rodape__in--curto { grid-template-columns: 1fr; gap: 24px; }
  .rodape__marca, .rodape__fab { grid-column: 1; grid-row: auto; }
  /* As páginas e os dois links dividem a mesma linha da grade: os links encostam à direita e embaixo, sem alargar nada
     (com duas colunas de verdade, a 320 px passavam 16 px da margem, porque "O que fabricamos" fica na mesma coluna). */
  .rodape__paginas { grid-column: 1; grid-row: 3; }
  .rodape__in--curto .rodape__paginas { grid-column: 1; grid-row: 2; }
  .rodape__docs { grid-column: 1; grid-row: 3; justify-self: end; align-self: end; display: block; margin-top: 0; }
  .rodape__in--curto .rodape__docs { grid-column: 1; grid-row: 2; }
  .rodape__docs li + li::before { content: none; }
}
@media (max-width: 600px) {
  .clientes { grid-template-columns: 1fr 1fr; }
  .clientes li { min-height: 80px; padding: 12px 14px; font-size: 15px; }
  .clientes li + li { border-left: 0; }
  .clientes li:nth-child(even) { border-left: 1px solid var(--linha); }
  .clientes li:nth-child(n+3) { border-top: 1px solid var(--linha); }
  body { font-size: 15px; }
  .faixa { padding: 0 20px; }
  .topo .faixa { height: 58px; }
  .marca img { width: 34px; height: 34px; }
  .marca span { font-size: 14.5px; }
  .sec { padding: 44px 0; }
  .heroi { padding: 28px 0 40px; }
  .heroi h1 { font-size: 26px; line-height: 1.22; }
  .intro { padding: 32px 0 36px; }
  .intro h1, .quem h1 { font-size: 25px; line-height: 1.22; }
  .sub { font-size: 15px; }
  .prancha { margin-top: 26px; }
  .regua-h span, .regua-v span { font-size: 9px; }
  .ficha h2 { padding: 11px 16px; }
  .quadro div { padding: 11px 16px; }
  .quadro dd { font-size: 15px; }
  .linhas { padding: 0 16px; }
  .linhas div { padding: 10px 0; }
  .familias { padding: 44px 0; }
  .sec--linha { padding-top: 0; }
  .sec--linha > .faixa::before { margin-bottom: 44px; }
  .heroi .acoes { flex-wrap: nowrap; gap: 8px; }
  .heroi .acoes .botao { flex: 1 1 0; justify-content: center; padding: 0 10px; }
  .vitrine__trilho { margin: 0 -20px; padding: 0 20px; scroll-padding: 0 20px; grid-auto-columns: 78%; gap: 12px; }
  .vitrine__nav { display: none; }
  .vitrine__pe { margin-bottom: -14px; } /* sem as setas, o link fecha a seção: desconta a área de toque invisível abaixo dele */
  .titulo { font-size: 23px; }
  .cabeca { margin-bottom: 22px; }
  .cabeca p { font-size: 15px; }
  .lista .painel { margin-left: 0; }
  .cm { display: none; }
  .area { padding: 18px 18px 6px; }
  .pecas > li { padding: 34px 0; }
  .peca h2 { font-size: 21px; }
  .peca__desc { font-size: 15px; }
  .instalacao { grid-template-columns: 1fr; }
  .instalacao div { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 16px; }
  .instalacao div + div { border-left: 0; border-top: 1px solid var(--linha); }
  .instalacao dd { font-size: 16px; margin: 0; }
  .processos li { padding-top: 16px; padding-bottom: 18px; }
  .processos li:nth-child(2n) { padding-left: 16px; }
  .processos li:nth-child(2n + 1) { padding-right: 16px; }
  .processos h3 { font-size: 15.5px; }
  .processos p { font-size: 14px; }
  .tabela th, .tabela td { padding: 10px 12px; }
  .galeria-fab { gap: 22px 14px; }
  .setores { grid-template-columns: 1fr; gap: 10px; }
  .pedido { padding: 20px 16px; }
  .peca .acoes .botao { width: 100%; justify-content: center; padding: 10px 12px; font-size: 14.5px; text-align: center; text-wrap: balance; } /* 14,5 px: o nome mais longo cabe numa linha a partir de 375 px */
  .peca .acoes .botao .ic { display: none; } /* sem o ícone, os 7 botões ficam numa linha só a partir de 375 px, todos da mesma altura */
  .final .acoes, .pedido .acoes { flex-direction: column; align-items: stretch; }
  .final .acoes .botao, .pedido .acoes .botao { justify-content: center; }
  .rodape__in, .rodape__in--curto { padding: 40px 20px 28px; }
  .rodape__fim p { padding: 14px 20px 18px; }
  .orc__abre summary { padding: 12px 16px; }
  .orc__form { padding: 18px 16px 20px; }
  .orc__campos { grid-template-columns: 1fr; gap: 14px; }
  .orc__campo--2 { grid-column: auto; }
  .orc__acoes .botao { width: 100%; justify-content: center; }
  .orc__acoes { gap: 4px; }
  .orc__fim { flex-basis: 100%; margin: 6px 0 0; }
  .obras__trilho { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; gap: 12px; margin: 0 -20px; padding: 0 20px; scroll-padding: 0 20px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .obras__trilho::-webkit-scrollbar { display: none; }
  .obras__trilho > li { scroll-snap-align: start; }
  .obras__fim { grid-column: auto; align-self: start; aspect-ratio: 4 / 3; flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; padding: 18px; }
  .obras__fim p + p { margin-top: 6px; }
  .frentes { grid-template-columns: 1fr; gap: 12px; }
  .frentes li { padding: 18px 18px 20px; }
  .rodape__sep { display: none; } /* no celular, o CNPJ desce para a linha de baixo, sem o ponto no fim da linha */
  .rodape__cnpj { display: block; }
}
@media (max-width: 360px) {
  .quadro div { padding: 11px 14px; }
  .linhas { padding: 0 14px; }
  .tabela { font-size: 13.5px; }
  .tabela th, .tabela td { padding: 10px 8px; }
}
@media (min-width: 861px) {
  .canais { position: sticky; top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}