/* Vortek, folha de estilo do sistema "catálogo técnico" (ver DESIGN.md).
   Tema claro. Fontes Barlow e Barlow Condensed hospedadas no próprio site (licença SIL OFL 1.1). */

@font-face { font-family: "Barlow"; src: url("../fonts/barlow-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-latin-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlow-condensed-latin-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlow-condensed-latin-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --papel: #FFFFFF;
  --concreto: #EEEEEB;
  --grafite: #1C1C1C;
  --amarelo: #F5B400;
  --ferrugem: #A34E00;
  --aco: #7D848B;
  --aco-texto: #555B62;
  --fio: #D6D6D2;

  --titulo: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --texto: "Barlow", Arial, sans-serif;

  --largura: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--papel); color: var(--grafite);
  font-family: var(--texto); font-size: 1.125rem; line-height: 1.6;
}
@media (max-width: 600px) { body { font-size: 1.0625rem; } }
img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 { margin: 0 0 .5em; line-height: 1.12; }
h1, h2 { font-family: var(--titulo); font-weight: 700; letter-spacing: 0; }
h1 { font-size: clamp(2.125rem, 4.4vw, 3rem); }
h2 { font-size: clamp(1.75rem, 3vw, 2.125rem); }
h3 { font-family: var(--texto); font-weight: 600; font-size: clamp(1.25rem, 2vw, 1.375rem); }
p { margin: 0 0 1em; }
a { color: var(--ferrugem); text-underline-offset: .18em; }
a:hover { color: var(--grafite); }
strong { font-weight: 600; }

:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 2px; box-shadow: 0 0 0 6px var(--grafite); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.pular { position: absolute; left: 16px; top: -100px; z-index: 100; background: var(--amarelo); color: var(--grafite); font-weight: 600; padding: 12px 16px; text-decoration: none; }
.pular:focus { top: 16px; }

.container { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 24px; }
@media (max-width: 600px) { .container { padding: 0 16px; } }
.texto-medida { max-width: 68ch; }
.apoio { color: var(--aco-texto); }
.pequeno { font-size: .9375rem; color: var(--aco-texto); }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  min-height: 48px; padding: 12px 22px; border-radius: 2px; border: 1.5px solid transparent;
  font-family: var(--texto); font-weight: 600; font-size: 1.0625rem; line-height: 1.25;
  text-decoration: none; cursor: pointer;
}
.btn-primario { background: var(--amarelo); color: var(--grafite); }
.btn-primario:hover { background: #FFC62E; color: var(--grafite); }
.btn-secundario { border-color: var(--grafite); color: var(--grafite); background: transparent; }
.btn-secundario:hover { background: var(--concreto); color: var(--grafite); }
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }

/* ---------- Seções ---------- */
.secao { padding: 64px 0; }
.secao-concreto { background: var(--concreto); }
.secao-larga { padding: 96px 0; }
@media (max-width: 600px) { .secao { padding: 48px 0; } .secao-larga { padding: 64px 0; } }
.cabeca-secao { max-width: 68ch; margin-bottom: 32px; }
.cabeca-secao p { color: var(--aco-texto); margin: 0; }

.trilha { font-size: .9375rem; color: var(--aco-texto); margin: 0 0 24px; }
.trilha ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0; padding: 0; }
.trilha li + li::before { content: "/"; margin: 0 10px; color: var(--aco); }
.trilha a { color: var(--aco-texto); }
.trilha [aria-current] { color: var(--grafite); }

/* ---------- Abertura da página inicial ---------- */
.abertura { padding: 48px 0 64px; border-bottom: 1px solid var(--fio); }
.abertura .container { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; }
.abertura h1 { font-size: clamp(2.25rem, 4.6vw, 3.5rem); line-height: 1.05; margin-bottom: .45em; }
.abertura .lead { font-size: 1.1875rem; max-width: 34em; margin-bottom: 28px; }
.foto-abertura { margin: 0; }
.foto-abertura img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.foto-abertura figcaption { font-size: .9375rem; color: var(--aco-texto); margin-top: 8px; }
@media (max-width: 860px) {
  .abertura { padding: 28px 0 48px; }
  .abertura .container { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------- Tabela da linha (página inicial) ---------- */
.tabela-linha { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tabela-linha caption { text-align: left; }
.tabela-linha th, .tabela-linha td { text-align: left; padding: 16px 16px 16px 0; border-bottom: 1px solid var(--fio); vertical-align: baseline; }
.tabela-linha thead th { font-weight: 600; font-size: .9375rem; color: var(--aco-texto); border-bottom: 1px solid var(--grafite); padding-top: 0; }
.tabela-linha .modelo { font-family: var(--titulo); font-weight: 700; font-size: 1.75rem; letter-spacing: .01em; white-space: nowrap; }
.tabela-linha .modelo a { color: var(--grafite); text-decoration: none; }
.tabela-linha .modelo a:hover { text-decoration: underline; }
.tabela-linha td:last-child { white-space: nowrap; padding-right: 0; text-align: right; }
@media (max-width: 700px) {
  .tabela-linha thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .tabela-linha, .tabela-linha tbody, .tabela-linha tr, .tabela-linha th, .tabela-linha td { display: block; }
  .tabela-linha tr { padding: 16px 0; border-bottom: 1px solid var(--fio); }
  .tabela-linha th, .tabela-linha td { border: 0; padding: 0; }
  .tabela-linha td { margin-top: 4px; }
  .tabela-linha td:last-child { text-align: left; margin-top: 8px; }
}

/* ---------- Plaqueta (detalhe assinatura) ---------- */
.plaqueta {
  position: relative; background: var(--concreto);
  border: 2px solid var(--aco); padding: 30px 30px 22px;
}
.plaqueta::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--amarelo); }
.plaqueta .rebite {
  position: absolute; width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #C9CDD1 0 25%, var(--aco) 60%);
  border: 1px solid #5E646B;
}
.plaqueta .r1 { left: 9px; top: 15px; } .plaqueta .r2 { right: 9px; top: 15px; }
.plaqueta .r3 { left: 9px; bottom: 9px; } .plaqueta .r4 { right: 9px; bottom: 9px; }
.plaqueta-cabeca {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-family: var(--titulo); font-weight: 600; font-size: .875rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--aco-texto); border-bottom: 1px solid var(--aco); padding: 0 0 10px; margin: 0 0 4px;
}
.plaqueta dl { display: grid; grid-template-columns: 1fr 1fr; margin: 0; }
.plaqueta dl div { padding: 12px 12px 10px 0; border-bottom: 1px solid #CFCFCB; display: flex; flex-direction: column; }
.plaqueta dl div:nth-child(even) { padding-left: 16px; border-left: 1px solid #CFCFCB; }
.plaqueta dl div.inteira { grid-column: 1 / -1; padding-left: 0; border-left: 0; }
.plaqueta dt { order: 1; font-family: var(--titulo); font-weight: 600; font-size: .875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--aco-texto); }
.plaqueta dd { order: 2; margin: 2px 0 0; font-family: var(--titulo); font-weight: 700; font-size: 1.75rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.plaqueta dd small { font-size: .62em; font-weight: 600; margin-left: 3px; }
.plaqueta-pe { font-size: .875rem; color: var(--aco-texto); margin: 12px 0 0; }
@media (max-width: 420px) { .plaqueta { padding: 28px 20px 20px; } .plaqueta dd { font-size: 1.5rem; } }

/* Plaqueta pequena (cartões) */
.plaqueta-mini { padding: 20px 18px 12px; }
.plaqueta-mini dl div { padding: 6px 8px 6px 0; }
.plaqueta-mini dl div:nth-child(even) { padding-left: 10px; }
.plaqueta-mini dt { font-size: .75rem; }
.plaqueta-mini dd { font-size: 1.25rem; }
.plaqueta-mini .rebite { width: 7px; height: 7px; }
.plaqueta-mini .r1, .plaqueta-mini .r2 { top: 11px; }
.plaqueta-mini .r1, .plaqueta-mini .r3 { left: 6px; }
.plaqueta-mini .r2, .plaqueta-mini .r4 { right: 6px; }
.plaqueta-mini .r3, .plaqueta-mini .r4 { bottom: 6px; }

/* ---------- Cartões de família ---------- */
.grade { display: grid; gap: 24px; }
.grade-3 { grid-template-columns: repeat(3, 1fr); }
.grade-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 960px) { .grade-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grade-3, .grade-2 { grid-template-columns: 1fr; } }
.grade > * { min-width: 0; }
.cartao { position: relative; display: flex; flex-direction: column; border: 1px solid var(--fio); background: var(--papel); }
.cartao img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.cartao-corpo { padding: 20px 20px 24px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.cartao h3 { font-family: var(--titulo); font-weight: 700; font-size: 1.75rem; margin: 0; }
.cartao h3 a { color: var(--grafite); text-decoration: none; }
.cartao h3 a::after { content: ""; position: absolute; inset: 0; }
.cartao:hover h3 a { text-decoration: underline; text-decoration-thickness: 2px; }
.cartao p { margin: 0; }
.cartao .plaqueta { margin-top: auto; }

/* ---------- Lista "o que o órgão recebe" ---------- */
.lista-itens { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 48px; }
.lista-itens li { padding: 20px 0; border-top: 1px solid var(--grafite); }
.lista-itens h3 { margin-bottom: .3em; }
.lista-itens p { margin: 0; color: var(--aco-texto); }
@media (max-width: 760px) { .lista-itens { grid-template-columns: 1fr; } }

/* ---------- Bloco de chamada (claro, com fio) ---------- */
.bloco-chamada { border: 1px solid var(--grafite); padding: 32px; display: grid; grid-template-columns: 1.5fr auto; gap: 24px 40px; align-items: center; }
.bloco-chamada h2 { margin-bottom: .3em; }
.bloco-chamada p { margin: 0; }
@media (max-width: 760px) { .bloco-chamada { grid-template-columns: 1fr; padding: 24px 20px; } }

/* ---------- Página de modelo ---------- */
.modelo-topo { padding: 32px 0 64px; border-bottom: 1px solid var(--fio); }
.modelo-grade {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px 48px;
  grid-template-areas: "foto nome" "foto plaqueta" "acao plaqueta";
  align-items: start;
}
.modelo-grade > * { min-width: 0; }
.modelo-nome { grid-area: nome; }
.modelo-foto { grid-area: foto; margin: 0; }
.modelo-plaqueta { grid-area: plaqueta; }
.modelo-acao { grid-area: acao; }
.modelo-nome h1 { font-size: clamp(4rem, 8vw, 6rem); line-height: .95; letter-spacing: .01em; margin: 0; }
.modelo-tipo { font-family: var(--titulo); font-weight: 600; font-size: 1.625rem; margin: 4px 0 12px; }
.modelo-resumo { margin: 0; max-width: 34em; }
.modelo-foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--concreto); }
.modelo-foto figcaption { font-size: .9375rem; color: var(--aco-texto); margin-top: 8px; }
@media (max-width: 900px) {
  .modelo-topo { padding: 20px 0 48px; }
  .modelo-grade { grid-template-columns: 1fr; grid-template-areas: "nome" "foto" "plaqueta" "acao"; gap: 24px; }
}

.aviso { background: var(--concreto); border: 1px solid var(--grafite); padding: 16px 18px; font-size: 1rem; line-height: 1.55; margin: 16px 0 0; }
.aviso p { margin: 0; }

/* Galeria */
.galeria { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px 16px; }
.galeria li:first-child { grid-column: span 2; grid-row: span 2; }
.galeria-link { display: block; color: var(--grafite); text-decoration: none; }
.galeria-link img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--concreto); }
.galeria-legenda { display: block; font-size: .9375rem; margin-top: 6px; }
.galeria-link:hover .galeria-legenda { text-decoration: underline; }
@media (max-width: 860px) { .galeria { grid-template-columns: repeat(2, 1fr); } }
.visor { border: 0; padding: 0; background: transparent; max-width: min(1600px, 96vw); max-height: 94vh; }
.visor::backdrop { background: rgba(28,28,28,.9); }
.visor img { max-width: 100%; max-height: 86vh; width: auto; margin: 0 auto; }
.visor p { color: #fff; text-align: center; margin: 8px 0 0; }
.visor-fechar { position: fixed; top: 12px; right: 12px; width: 44px; height: 44px; border: 0; border-radius: 2px; background: var(--papel); color: var(--grafite); font-size: 1.6rem; line-height: 1; cursor: pointer; }

/* Ficha técnica */
.modelo-corpo { display: grid; grid-template-columns: 1.6fr 1fr; gap: 48px; align-items: start; }
.modelo-corpo > * { min-width: 0; }
@media (max-width: 900px) { .modelo-corpo { grid-template-columns: 1fr; gap: 40px; } }
.tabela-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--grafite); }
.tabela-specs { width: 100%; min-width: 420px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tabela-specs caption { text-align: left; padding: 14px 16px; font-weight: 600; background: var(--concreto); border-bottom: 1px solid var(--grafite); }
.tabela-specs th, .tabela-specs td { text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--fio); vertical-align: top; }
.tabela-specs tbody th { font-weight: 400; width: 55%; }
.tabela-specs tbody td { font-weight: 600; }
.tabela-specs tr:last-child th, .tabela-specs tr:last-child td { border-bottom: 0; }
.tabela-specs tr.grupo th { font-family: var(--titulo); font-weight: 700; font-size: 1.125rem; padding-top: 20px; border-bottom: 1px solid var(--grafite); }
.tabela-specs .sim { color: var(--ferrugem); }
.config-titulo { font-family: var(--texto); font-size: 1.25rem; margin: 0 0 .2em; }
.config-linha { color: var(--aco-texto); margin: 0 0 16px; }

.lista-simples { list-style: none; margin: 0 0 1.2em; padding: 0; }
.lista-simples li { position: relative; padding: 10px 0 10px 24px; border-bottom: 1px solid var(--fio); }
.lista-simples li::before { content: ""; position: absolute; left: 2px; top: 1.05em; width: 8px; height: 8px; border: 1.5px solid var(--grafite); }
.lista-simples .opcional::before { border-style: dashed; }
.lista-simples .tag { color: var(--aco-texto); margin-left: 6px; }

.lateral { display: grid; gap: 24px; position: sticky; top: 96px; }
@media (max-width: 900px) { .lateral { position: static; } }
.caixa { border: 1px solid var(--grafite); padding: 24px; }
.caixa h2 { font-size: 1.625rem; }
.caixa h3 { margin-bottom: .4em; }
.caixa p { color: var(--aco-texto); }
.caixa .btn { width: 100%; }
.caixa-leve { border-color: var(--fio); }


[id] { scroll-margin-top: 90px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

@media print {
  .cabecalho, .menu-botao, .acoes, .lateral .btn, .pular, .galeria { display: none !important; }
  body { font-size: 11pt; }
  .secao { padding: 16px 0; }
}
.secao-chamada { padding-top: 0; }

/* ---------- Rodapé compacto ---------- */
.rodape { background: var(--concreto); border-top: 1px solid var(--grafite); font-size: .875rem; line-height: 1.5; color: var(--grafite); }
.rodape .container { padding-top: 20px; padding-bottom: 18px; }
.rodape a { color: var(--grafite); }
.rodape a:hover { color: var(--ferrugem); }
.rodape-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; padding-bottom: 12px; margin-bottom: 10px; border-bottom: 1px solid var(--fio); }
.rodape-marca img { height: 16px; width: auto; }
.rodape-nav { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.rodape-legal { margin: 0 0 4px; }
.rodape-fim { margin: 8px 0 0; color: var(--aco-texto); font-size: .8125rem; }
@media (max-width: 600px) { .rodape-topo { gap: 10px 20px; } .rodape-nav { gap: 6px 14px; } }

/* ---------- Contato da Baumaster ---------- */
.exclusiva { border-left: 3px solid var(--grafite); padding: 4px 0 4px 14px; margin: 0 0 24px; font-size: 1rem; max-width: 36em; }
.contato-venda { font-size: 1rem; margin: 14px 0 0; }
.contato-venda a { font-weight: 600; margin-left: 4px; }
.contato-destaque { margin-top: 20px; border: 1px solid var(--grafite); background: var(--papel); padding: 14px 18px; max-width: 46em; }
.contato-destaque p { margin: 0 0 4px; }
.contato-destaque p:last-child { margin: 0; }
.caixa-contato { margin: 14px 0 0; font-size: 1rem; }
.caixa-contato a { font-weight: 600; }
.contato-grande { font-size: 1.125rem; font-weight: 600; }

/* ---------- Fileira de máquinas (página inicial) ---------- */
.fileira { border-bottom: 1px solid var(--fio); padding: 20px 0 16px; }
.fileira-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px 16px; }
.fileira-lista a { display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; color: var(--grafite); padding: 4px 4px 8px; }
.fileira-foto { display: flex; align-items: flex-end; justify-content: center; width: 100%; aspect-ratio: 3 / 2; }
.fileira-foto img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.fileira-foto.sem-recorte img { width: 100%; height: 100%; object-fit: cover; }
.fileira-nome { font-family: var(--titulo); font-weight: 700; font-size: 1.375rem; line-height: 1.1; margin-top: 8px; }
.fileira-tipo { font-size: .9375rem; color: var(--aco-texto); }
.fileira-lista a:hover .fileira-nome { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--amarelo); }
@media (max-width: 900px) {
  .fileira-lista { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .fileira-lista li { flex: 0 0 42%; scroll-snap-align: start; }
}
@media (max-width: 480px) { .fileira-lista li { flex-basis: 46%; } .fileira-nome { font-size: 1.25rem; } }

/* ---------- Galeria: fechar a última linha ---------- */
.galeria.ultimo-2 li:last-child { grid-column: span 2; }
.galeria.ultimo-3 li:last-child { grid-column: span 3; }
.galeria.ultimo-4 li:last-child { grid-column: span 4; }
@media (max-width: 860px) {
  .galeria.ultimo-2 li:last-child, .galeria.ultimo-3 li:last-child, .galeria.ultimo-4 li:last-child { grid-column: auto; }
  .galeria.ultimo-m2 li:last-child { grid-column: span 2; }
}
.modelo-foto.ilustracao img { object-fit: contain; background: var(--concreto); padding: 16px; }

/* Plaqueta pequena com 3 dados (página Máquinas) */
.plaqueta dl.tres { grid-template-columns: repeat(3, 1fr); }
.plaqueta dl.tres div { padding-left: 10px; border-left: 1px solid #CFCFCB; }
.plaqueta dl.tres div:first-child { padding-left: 0; border-left: 0; }
.plaqueta-erro { display: inline-block; min-width: 260px; margin-bottom: 24px; }
.plaqueta-erro .codigo { font-family: var(--titulo); font-weight: 700; font-size: 6rem; line-height: 1; margin: 8px 0 0; }

/* ---------- Componentes das páginas internas ---------- */
.topo-pagina { padding: 32px 0 48px; border-bottom: 1px solid var(--fio); }
.topo-pagina h1 { margin-bottom: .3em; }
.topo-pagina > .container > p { font-size: 1.1875rem; max-width: 40em; margin: 0; }
.cartao-imagem { aspect-ratio: 16 / 10; background: var(--concreto); display: flex; align-items: flex-end; justify-content: center; }
.cartao-imagem img { width: 100%; height: 100%; object-fit: contain; aspect-ratio: auto; padding: 16px; }
.cartao-imagem.foto img { object-fit: cover; padding: 0; }
.cartao-tipo { color: var(--aco-texto); margin: -8px 0 0 !important; }
.cartao-modelos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cartao-modelos li { border: 1px solid var(--aco); padding: 1px 8px; font-size: .9375rem; }
.tabela-comparar tbody th { width: auto; }
.tabela-comparar thead th { background: var(--concreto); text-align: left; font-weight: 600; border-bottom: 1px solid var(--grafite); }
.tabela-comparar td, .tabela-comparar thead th:not(:first-child) { text-align: right; }
.bloco { border: 1px solid var(--fio); border-top: 1px solid var(--grafite); padding: 24px; background: var(--papel); }
.bloco h3 { margin-bottom: .4em; }
.bloco p:last-child { margin-bottom: 0; }
.rotulo { display: block; font-size: .9375rem; color: var(--aco-texto); margin-bottom: 4px; }
.duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.duas-colunas > * { min-width: 0; }
@media (max-width: 860px) { .duas-colunas { grid-template-columns: 1fr; gap: 32px; } }
.passos { counter-reset: passo; list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: 20px; }
.passos > li { counter-increment: passo; position: relative; padding-left: 52px; }
.passos > li::before { content: counter(passo); position: absolute; left: 0; top: -4px; font-family: var(--titulo); font-weight: 700; font-size: 2rem; line-height: 1; width: 36px; border-bottom: 3px solid var(--amarelo); text-align: center; }
.passos h3 { margin-bottom: .2em; }
.passos p { margin: 0; color: var(--aco-texto); }
.destaque-integridade { border: 1px solid var(--grafite); background: var(--concreto); padding: 24px 28px; }
.destaque-integridade p:last-child { margin: 0; }
.ficha-empresa { display: grid; grid-template-columns: 170px 1fr; gap: 6px 20px; margin: 0; }
.ficha-empresa dt { color: var(--aco-texto); }
.ficha-empresa dd { margin: 0 0 8px; font-weight: 600; }
@media (max-width: 560px) { .ficha-empresa { grid-template-columns: 1fr; gap: 0; } .ficha-empresa dd { margin-bottom: 12px; } }
.texto-longo { max-width: 780px; }
.texto-longo h2 { font-size: 1.625rem; margin-top: 1.8em; }
.texto-longo h2:first-child { margin-top: 0; }
.texto-longo ul { padding-left: 1.2em; }
.texto-longo li { margin-bottom: .4em; }
.chamada-acao { display: grid; gap: 12px; }
.aviso-ficha { font-size: 1rem; line-height: 1.55; margin: 12px 0 0; }
.link-ficha { font-weight: 600; }
.mb-0 { margin-bottom: 0; } .mt-0 { margin-top: 0; } .centro { text-align: center; }

/* Formulários */
.formulario { background: var(--concreto); border: 1px solid var(--grafite); padding: 28px; }
@media (max-width: 600px) { .formulario { padding: 20px 16px; } }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo-inteiro { grid-column: 1 / -1; }
@media (max-width: 640px) { .campos { grid-template-columns: 1fr; } }
.campo label, .campo legend { font-weight: 600; font-size: 1rem; }
.obrig { color: var(--ferrugem); }
.campo input, .campo select, .campo textarea { font: inherit; font-size: 1rem; color: var(--grafite); padding: 12px 14px; min-height: 48px; border: 1.5px solid var(--aco); border-radius: 2px; background: var(--papel); width: 100%; }
.campo textarea { min-height: 130px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--grafite); }
.ajuda { font-size: .9375rem; color: var(--aco-texto); }
.consentimento { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; font-size: 1rem; background: var(--papel); border: 1px solid var(--fio); padding: 14px 16px; }
.consentimento input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--grafite); }
.form-acoes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.form-nota { font-size: .9375rem; color: var(--aco-texto); margin: 0; }
.form-retorno { grid-column: 1 / -1; padding: 14px 16px; border: 1px solid var(--grafite); background: var(--papel); display: none; }
.form-retorno.visivel { display: block; }
.armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* 404 */
.erro { padding: 64px 0 96px; text-align: center; }
.erro .acoes { justify-content: center; }
.fileira-foto { aspect-ratio: auto; height: 120px; }
.fileira-foto img { width: 100%; height: 100%; max-height: none; object-fit: contain; object-position: center bottom; }
@media (max-width: 900px) { .fileira-foto { height: 104px; } }

/* ---------- Lista de pedido, botão fixo e janela ---------- */
.janela-pedido { width: min(760px, calc(100vw - 24px)); max-height: calc(100vh - 24px); border: 1px solid var(--grafite); border-radius: 2px; padding: 0; color: var(--grafite); background: var(--papel); }
.janela-pedido::backdrop { background: rgba(28,28,28,.55); }
.jp-form { padding: 24px; }
@media (max-width: 600px) { .jp-form { padding: 16px; } }
.jp-cabeca { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; border-bottom: 6px solid var(--amarelo); padding-bottom: 10px; margin-bottom: 12px; }
.jp-cabeca h2 { margin: 0; font-size: 1.75rem; }
.jp-fechar { background: var(--papel); border: 1.5px solid var(--grafite); border-radius: 2px; font: 600 1rem var(--texto); padding: 8px 12px; cursor: pointer; color: var(--grafite); }
.jp-intro { font-size: 1rem; color: var(--aco-texto); }
.jp-lista { border: 1px solid var(--fio); background: var(--concreto); padding: 12px 16px; margin: 0 0 18px; }
.jp-lista h3 { font-size: 1.0625rem; margin: 0 0 6px; }
.jp-ul { list-style: none; margin: 0 0 6px; padding: 0; }
.jp-ul li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 0; border-bottom: 1px solid var(--fio); }
.jp-nome { flex: 1 1 220px; font-weight: 600; }
.jp-q input { width: 72px; min-height: 40px; font: inherit; padding: 6px 8px; border: 1.5px solid var(--aco); border-radius: 2px; }
.jp-tipo { font-size: .9375rem; color: var(--aco-texto); }
.btn-texto { background: none; border: 0; padding: 6px 0; font: 600 1rem var(--texto); color: var(--ferrugem); text-decoration: underline; text-underline-offset: .18em; cursor: pointer; }
.btn-texto:hover { color: var(--grafite); }
.na-lista { color: var(--grafite); }

/* ---------- Ficha em sanfona ---------- */
.ficha-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 16px; }
.ficha-acoes .btn { min-height: 44px; padding: 8px 14px; font-size: 1rem; }
.ficha-grupo { border: 1px solid var(--grafite); margin: 0 0 -1px; }
.ficha-grupo summary { cursor: pointer; list-style: none; padding: 12px 16px; font-family: var(--titulo); font-weight: 700; font-size: 1.25rem; display: flex; justify-content: space-between; align-items: center; background: var(--concreto); }
.ficha-grupo summary::-webkit-details-marker { display: none; }
.ficha-grupo summary::after { content: "+"; font-family: var(--texto); font-weight: 600; font-size: 1.5rem; line-height: 1; }
.ficha-grupo[open] summary::after { content: "\2212"; }
.ficha-grupo[open] summary { border-bottom: 1px solid var(--grafite); }
.ficha-grupo .tabela-specs { min-width: 0; }
.a-confirmar { font-weight: 400; font-style: italic; color: var(--aco-texto); }
.norma { display: block; font-weight: 400; font-size: .875rem; color: var(--aco-texto); margin-top: 2px; }

/* ---------- Documentos para o processo ---------- */
.docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.doc { display: grid; grid-template-columns: 72px 1fr; gap: 16px; background: var(--papel); border: 1px solid var(--fio); padding: 16px; }
.doc-mini { position: relative; width: 72px; height: 96px; background: var(--papel); border: 1.5px solid var(--aco); padding: 14px 8px 8px; display: flex; flex-direction: column; gap: 6px; }
.doc-mini::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--amarelo); }
.doc-mini span { font-family: var(--titulo); font-weight: 700; font-size: .5625rem; line-height: 1.1; word-break: break-all; }
.doc-mini i { display: block; height: 2px; background: var(--fio); }
.doc h3 { font-size: 1.125rem; margin: 0 0 6px; }
.doc-dados { display: grid; grid-template-columns: auto 1fr; gap: 0 10px; margin: 0 0 6px; font-size: .9375rem; }
.doc-dados div { display: contents; }
.doc-dados dt { color: var(--aco-texto); }
.doc-dados dd { margin: 0; }
.doc-status { font-size: .9375rem; margin: 0 0 8px; font-style: italic; }
.doc-status.pronto { font-style: normal; font-weight: 600; }
.doc-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.doc-acoes .btn { min-height: 40px; padding: 6px 12px; font-size: .9375rem; }
@media (max-width: 400px) { .docs { grid-template-columns: 1fr; } .doc { grid-template-columns: 56px 1fr; } .doc-mini { width: 56px; height: 76px; } }

/* ---------- Comparador ---------- */
.comparar-escolha fieldset { border: 1px solid var(--grafite); padding: 12px 16px 14px; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.comparar-escolha legend { font-weight: 600; padding: 0 6px; }
.escolha { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; min-height: 40px; }
.escolha input { width: 20px; height: 20px; accent-color: var(--grafite); }
.escolha span { font-weight: 400; color: var(--aco-texto); }
.so-diferencas { display: inline-flex; align-items: center; gap: 8px; }
.so-diferencas input { width: 20px; height: 20px; accent-color: var(--grafite); }
.tabela-comparar tr.difere th, .tabela-comparar tr.difere td { background: #FFF4D1; }
.tabela-comparar tr.difere th { box-shadow: inset 4px 0 0 var(--amarelo); }
.tabela-comparar.so-diferencas tbody tr:not(.difere):not(.grupo) { display: none; }
.marca-difere { display: inline-block; width: 14px; height: 14px; background: #FFF4D1; box-shadow: inset 4px 0 0 var(--amarelo); border: 1px solid var(--fio); vertical-align: -2px; margin-right: 4px; }
.legenda-difere { margin: 0 0 10px; }
.cartao-legenda { font-size: .875rem; color: var(--aco-texto); margin: 8px 20px 0; }
.topo-link { margin-top: 12px !important; font-size: 1.0625rem !important; }

/* ---------- Impressão da ficha (A4) ---------- */
@page { size: A4; margin: 14mm; }
@media print {
  .botao-fixo, .janela-pedido, .lista-botao, .ficha-acoes, .doc-acoes { display: none !important; }
  body { padding: 0 !important; }
  body.imprimir-ficha main > section:not(#ficha), body.imprimir-ficha .lateral, body.imprimir-ficha .rodape-topo, body.imprimir-ficha .rodape-fim { display: none !important; }
  body.imprimir-ficha #ficha { padding: 0; }
  body.imprimir-ficha .modelo-corpo { display: block; }
  body.imprimir-ficha .ficha-area::before { content: "VORTEK, ficha técnica, configuração padrão"; display: block; font-family: var(--titulo); font-weight: 700; font-size: 11pt; border-bottom: 3pt solid var(--amarelo); padding-bottom: 4pt; margin-bottom: 8pt; }
  .ficha-grupo { break-inside: avoid; }
  .ficha-grupo summary::after { content: "" !important; }
  .tabela-specs th, .tabela-specs td { padding: 4pt 8pt; }
  a { color: inherit; text-decoration: none; }
}
/* Faixa de miniaturas centralizada */
@media (min-width: 901px) { .fileira-lista { display: flex; justify-content: center; gap: 8px 24px; } .fileira-lista li { flex: 0 1 200px; } }

/* ---------- Cabeçalho (doc 22): fixo no computador, some ao rolar no celular ---------- */
.cabecalho { position: sticky; top: 0; z-index: 50; background: var(--papel); border-bottom: 1px solid var(--grafite); }
.cabecalho .container { display: flex; align-items: center; gap: 20px; min-height: 64px; flex-wrap: nowrap; }
.marca { flex-shrink: 0; display: inline-flex; }
.marca img { height: 24px; width: auto; }
.menu { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-wrap: nowrap; }
.menu-lista { list-style: none; display: flex; align-items: center; margin: 0; padding: 0; gap: 0; flex-wrap: nowrap; }
.menu-lista > li { flex-shrink: 0; }
.menu-lista > li > a, .menu-abre {
  display: flex; align-items: center; min-height: 44px; padding: 0 10px; white-space: nowrap;
  color: var(--grafite); text-decoration: none; font: 600 1rem var(--texto); background: none; border: 0; cursor: pointer;
  border-bottom: 3px solid transparent; border-top: 3px solid transparent;
}
.menu-lista > li > a:hover, .menu-abre:hover { border-bottom-color: var(--aco); color: var(--grafite); }
.menu-lista > li > a[aria-current="page"], .menu-abre[data-atual] { border-bottom-color: var(--amarelo); }
.menu-abre::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin: -4px 0 0 8px; }
.menu-abre[aria-expanded="true"]::after { transform: rotate(225deg); margin-top: 4px; }
.lista-botao { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; white-space: nowrap; min-height: 40px; padding: 0 10px; font-weight: 600; font-size: .9375rem; color: var(--grafite); text-decoration: none; border: 1.5px solid var(--grafite); border-radius: 2px; }
.lista-botao:hover { background: var(--concreto); color: var(--grafite); }
.lista-icone { width: 14px; height: 16px; border: 1.5px solid currentColor; border-radius: 1px; background: linear-gradient(currentColor, currentColor) 3px 4px / 6px 1.5px no-repeat, linear-gradient(currentColor, currentColor) 3px 8px / 6px 1.5px no-repeat; }
.lista-conta { display: inline-block; min-width: 1.6em; text-align: center; background: var(--fio); color: var(--grafite); border-radius: 2px; padding: 0 4px; font-variant-numeric: tabular-nums; }
.lista-conta.tem { background: var(--grafite); color: var(--papel); }
.menu-proposta { flex-shrink: 0; white-space: nowrap; min-height: 44px; padding: 8px 18px; }
.so-celular, .lista-celular { display: none; }
.menu-botao { display: none; align-items: center; gap: 8px; flex-shrink: 0; cursor: pointer; background: var(--papel); color: var(--grafite); border: 1.5px solid var(--grafite); border-radius: 2px; min-height: 44px; padding: 0 12px; font: 600 1rem var(--texto); white-space: nowrap; }
.menu-botao .barras, .menu-botao .barras::before, .menu-botao .barras::after { display: block; width: 18px; height: 2px; background: var(--grafite); position: relative; content: ""; }
.menu-botao .barras::before { position: absolute; top: -6px; }
.menu-botao .barras::after { position: absolute; top: 6px; }

/* Painel de Máquinas (computador) */
.menu-maquinas { position: static; }
.painel-maquinas { position: absolute; left: 0; right: 0; top: 100%; background: var(--papel); border-bottom: 1px solid var(--grafite); border-top: 1px solid var(--fio); padding: 20px max(24px, calc((100vw - 1200px) / 2 + 24px)) 24px; z-index: 49; }
.painel-maquinas[hidden] { display: none; }
.ver-todas { font-weight: 600; color: var(--grafite); }
.painel-maquinas > .ver-todas { display: inline-block; margin-bottom: 14px; font-size: 1.0625rem; }
.painel-colunas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 40px; }
.painel-titulo { font-family: var(--titulo); font-weight: 700; font-size: 1.25rem; margin: 0 0 6px; padding-bottom: 6px; border-bottom: 1px solid var(--grafite); }
.painel-colunas ul { list-style: none; margin: 0; padding: 0; }
.painel-colunas a { display: flex; align-items: center; gap: 12px; padding: 6px 4px; color: var(--grafite); text-decoration: none; }
.painel-colunas a:hover strong, .painel-colunas a[aria-current] strong { text-decoration: underline; text-decoration-color: var(--amarelo); text-decoration-thickness: 2px; }
.painel-colunas img { width: 84px; height: 56px; object-fit: contain; object-position: center bottom; flex-shrink: 0; }
.painel-colunas strong { display: block; font-family: var(--titulo); font-size: 1.25rem; line-height: 1.1; }
.painel-colunas small { display: block; font-size: .875rem; color: var(--aco-texto); }
.painel-comparar { display: inline-block; margin-top: 16px; font-weight: 600; }

@media (min-width: 1024px) and (max-width: 1240px) {
  .cabecalho .container { gap: 12px; }
  .menu { gap: 8px; }
  .menu-lista > li > a, .menu-abre { padding: 0 8px; font-size: .9375rem; }
  .menu-proposta { padding: 8px 14px; }
}

/* Celular e tablet: uma linha com logo, lista e Menu */
@media (max-width: 1023px) {
  .cabecalho { transition: transform .3s ease; }
  .cabecalho.escondido { transform: translateY(-100%); }
  .cabecalho .container { min-height: 56px; gap: 10px; }
  .lista-celular { display: inline-flex; margin-left: auto; }
  .lista-computador { display: none; }
  .menu-botao { display: inline-flex; }
  .menu {
    display: none; position: absolute; left: 0; right: 0; top: 100%; margin: 0;
    max-height: calc(100vh - 56px); overflow-y: auto;
    background: var(--papel); border-bottom: 1px solid var(--grafite);
    flex-direction: column; align-items: stretch; gap: 0; padding: 8px 16px 20px;
  }
  .menu.aberto { display: flex; }
  .menu-lista { flex-direction: column; align-items: stretch; }
  .so-celular { display: block; }
  .so-computador { display: none !important; }
  .menu-lista > li > a, .menu-abre { width: 100%; min-height: 52px; padding: 0 4px; font-size: 1.125rem; border: 0; border-bottom: 1px solid var(--fio); justify-content: space-between; text-align: left; }
  .menu-lista > li > a[aria-current="page"], .menu-abre[data-atual] { text-decoration: underline; text-decoration-color: var(--amarelo); text-decoration-thickness: 3px; border-bottom-color: var(--fio); }
  .menu-lista > li > .ver-todas { font-weight: 700; }
  .painel-maquinas { position: static; padding: 4px 0 12px; border: 0; border-bottom: 1px solid var(--fio); }
  .painel-colunas { grid-template-columns: 1fr; gap: 12px; }
  .painel-titulo { font-size: 1.0625rem; }
  .menu-pequeno { display: flex; gap: 18px; margin: 14px 0 0; font-size: 1rem; }
  .menu-proposta { margin-top: 16px; width: 100%; min-height: 52px; }
}
@media (max-width: 480px) {
  .cabecalho .container { gap: 8px; }
  .marca img { height: 20px; }
  .lista-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  .lista-botao { padding: 0 8px; }
  .menu-botao { padding: 0 10px; }
}
@media (prefers-reduced-motion: reduce) { .cabecalho { transition: none; } }

/* Barra fixa: computador só depois de rolar; celular sempre, embaixo */
.barra-fixa { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: flex; gap: 8px; align-items: stretch; }
.botao-fixo { display: flex; align-items: center; background: var(--amarelo); color: var(--grafite); border: 1.5px solid var(--grafite); border-radius: 2px; padding: 10px 16px; font-weight: 600; text-decoration: none; line-height: 1.2; white-space: nowrap; }
.botao-fixo:hover { background: #FFC62E; color: var(--grafite); }
.botao-zap { display: flex; align-items: center; justify-content: center; width: 48px; min-height: 48px; background: var(--papel); color: var(--grafite); border: 1.5px solid var(--grafite); border-radius: 2px; }
.botao-zap:hover { background: var(--concreto); color: var(--grafite); }
@media (min-width: 1024px) {
  .barra-fixa { visibility: hidden; opacity: 0; }
  .barra-fixa.visivel { visibility: visible; opacity: 1; }
}
@media (max-width: 1023px) {
  .barra-fixa { left: 0; right: 0; bottom: 0; padding: 8px 16px; background: var(--papel); border-top: 1px solid var(--grafite); }
  .botao-fixo { flex: 1; justify-content: center; min-height: 48px; }
  body { padding-bottom: 66px; }
}
@media print { .barra-fixa, .cabecalho { display: none !important; } }

/* Atalhos da página inicial */
.atalhos { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.atalhos a { font-weight: 600; }

/* Bloco de chamada com nota longa (Máquinas): título em cima, texto e ação lado a lado */
.bloco-chamada:has(.chamada-acao) { grid-template-columns: minmax(320px, 5fr) 7fr; align-items: start; }
@media (max-width: 900px) { .bloco-chamada:has(.chamada-acao) { grid-template-columns: 1fr; } }

/* Página Documentos */
.docs-largos { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
.doc-pedir { font-size: .9375rem; margin: 8px 0 6px; font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font: 600 .9375rem var(--texto); min-height: 40px; padding: 0 12px; border: 1.5px solid var(--grafite); background: var(--papel); color: var(--grafite); border-radius: 2px; cursor: pointer; }
.chip:hover { background: var(--concreto); }
.chip.na-lista { background: var(--grafite); color: var(--papel); }
.doc-links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 6px; font-weight: 600; }
@media (max-width: 420px) { .docs-largos { grid-template-columns: 1fr; } }

/* ---------- Correções da auditoria 23 ---------- */
/* A barra fixa nunca cobre o rodapé (em qualquer largura) */
body { padding-bottom: 0; }
.rodape .container { padding-bottom: 88px; }
@media (max-width: 1023px) { body { padding-bottom: 0; } .rodape .container { padding-bottom: 92px; } }
/* Pós-venda: e-mail comprido não cria rolagem lateral */
.passos { grid-template-columns: minmax(0, 1fr); }
.passos h3, .passos p, .contato-destaque, .caixa p, .rodape-legal { overflow-wrap: anywhere; }
/* Recortes em <picture>: o visual da faixa continua igual */
.fileira-foto picture, .painel-colunas picture { display: contents; }
/* Galeria ampliada com setas */
.visor-ant, .visor-prox { position: fixed; top: 50%; transform: translateY(-50%); width: 48px; height: 64px; border: 1.5px solid var(--grafite); border-radius: 2px; background: var(--papel); color: var(--grafite); font: 700 2rem/1 var(--texto); cursor: pointer; }
.visor-ant { left: 12px; }
.visor-prox { right: 12px; }
.visor-ant:hover, .visor-prox:hover { background: var(--concreto); }
.visor-conta { color: #fff; text-align: center; margin: 4px 0 0; font-size: .9375rem; }
/* Comparador sem modelos suficientes */
.ficha-acoes .btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Vídeo da abertura (página inicial) ---------- */
.video-figura { position: relative; }
.video-abertura, .video-poster { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--concreto); }
.video-poster { display: none; }
.video-tocar { display: none; position: absolute; left: 12px; top: 12px; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--grafite); border-radius: 2px; background: var(--papel); color: var(--grafite); font: 600 1rem var(--texto); cursor: pointer; }
.video-tocar:hover { background: var(--concreto); }
/* quem pediu menos movimento vê só a imagem parada */
.video-figura.so-poster .video-abertura { display: none; }
.video-figura.so-poster .video-poster { display: block; }
/* celular: mostra a imagem parada; o vídeo só toca se a pessoa pedir */
.video-figura.video-parado .video-tocar { display: inline-flex; align-items: center; }
.video-figura.tocando .video-tocar { display: none; }
@media (prefers-reduced-motion: reduce) {
  .video-abertura { display: none; }
  .video-poster { display: block; }
  .video-tocar { display: none !important; }
}
.cartao-add { position: relative; z-index: 2; align-self: flex-start; min-height: 40px; padding: 6px 12px; font-size: .9375rem; }
.comparar-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; }
.comparar-add .doc-pedir { margin: 0; }
.video-poster-foto { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--concreto); }
/* Galeria ampliada: a foto sempre cabe inteira na tela */
.visor { position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(20,20,20,.95); overflow: hidden; }
.visor[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.visor::backdrop { background: rgba(20,20,20,.95); }
.visor img { display: block; max-width: 92vw; max-height: 85vh; width: auto; height: auto; object-fit: contain; margin: 0 auto; }
.visor .visor-legenda, .visor .visor-conta { color: #fff; text-align: center; margin: 6px 0 0; max-width: 92vw; }
html.trava, html.trava body { overflow: hidden; }
@media (max-width: 600px) { .visor-ant, .visor-prox { top: auto; bottom: 16px; transform: none; } }
/* Galeria sem foto sozinha na última linha */
.galeria.sem-destaque li:first-child { grid-column: auto; grid-row: auto; }
.galeria.ultimas-largas li:nth-last-child(-n+2) { grid-column: span 2; }
@media (max-width: 860px) { .galeria.sem-destaque li:first-child { grid-column: span 2; } .galeria.ultimas-largas li:nth-last-child(-n+2) { grid-column: auto; } .galeria.ultimas-largas.ultimo-m2 li:last-child { grid-column: span 2; } }

/* ---------- Documentos: matriz documento x modelo ---------- */
.doc { grid-template-columns: 1fr; }
.matriz-rolagem { border: 1px solid var(--grafite); }
.matriz-docs { width: 100%; border-collapse: collapse; }
.matriz-docs thead th { background: var(--concreto); border-bottom: 1px solid var(--grafite); padding: 12px 8px; text-align: center; vertical-align: bottom; font-weight: 600; }
.matriz-docs thead th:first-child { text-align: left; padding-left: 16px; }
.matriz-docs thead th a { display: block; font-family: var(--titulo); font-weight: 700; font-size: 1.25rem; color: var(--grafite); text-decoration: none; }
.matriz-docs thead th a:hover { text-decoration: underline; text-decoration-color: var(--amarelo); text-decoration-thickness: 2px; }
.matriz-docs tbody th { text-align: left; font-weight: 400; padding: 14px 16px; width: 38%; vertical-align: top; }
.matriz-docs td { text-align: center; vertical-align: middle; padding: 8px; }
.matriz-docs tbody tr { border-bottom: 1px solid var(--fio); }
.matriz-docs tbody tr:last-child { border-bottom: 0; }
.matriz-docs tbody tr:hover { background: #F7F7F5; }
.doc-linha-nome { display: block; font-weight: 600; }
.doc-linha-detalhe { display: block; font-size: .9375rem; color: var(--aco-texto); margin-top: 2px; }
.doc-linha-detalhe a { margin-left: 6px; }
.marcar-todos { display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; font-weight: 400; color: var(--aco-texto); margin-top: 6px; cursor: pointer; }
.matriz-docs input[type="checkbox"], .docs-celular input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--grafite); cursor: pointer; margin: 0; }
.matriz-docs td input[type="checkbox"] { width: 24px; height: 24px; }
.matriz-pe { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 24px; }
.matriz-pe .pequeno { flex: 1 1 320px; margin: 0; }
.docs-celular { display: none; }
@media (max-width: 860px) {
  .matriz-rolagem { display: none; }
  .docs-celular { display: block; border-top: 1px solid var(--grafite); }
  .doc-sanfona { border-bottom: 1px solid var(--grafite); }
  .doc-sanfona summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 4px; font-weight: 600; font-size: 1.0625rem; }
  .doc-sanfona summary::-webkit-details-marker { display: none; }
  .doc-sanfona summary::after { content: "+"; font-size: 1.5rem; line-height: 1; }
  .doc-sanfona[open] summary::after { content: "\2212"; }
  .doc-conta { margin-left: auto; font-size: .875rem; font-weight: 400; color: var(--aco-texto); white-space: nowrap; }
  .doc-sanfona .doc-linha-detalhe { margin: 0 4px 6px; }
  .doc-sanfona .marcar-todos { margin: 0 4px 10px; font-size: .9375rem; }
  .doc-modelos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0 4px 16px; }
  .doc-modelo { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 10px; border: 1px solid var(--fio); background: var(--papel); font-weight: 600; cursor: pointer; }
  .doc-modelo:has(input:checked) { border-color: var(--grafite); background: var(--concreto); }
}
@media (max-width: 360px) { .doc-modelos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Modelo ainda sem foto real */
.sem-foto-bloco { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 14px; height: 100%; min-height: 220px; padding: 28px; background: var(--concreto); border: 1px solid var(--fio); }
.sem-foto-bloco p { margin: 0; max-width: 32em; font-size: 1.0625rem; }
.modelo-foto.sem-foto { aspect-ratio: 3 / 2; }
.modelo-foto.sem-foto .sem-foto-bloco { height: 100%; }
.cartao-imagem.sem-foto { display: block; }
.cartao-imagem.sem-foto .sem-foto-bloco { min-height: 0; height: 100%; padding: 20px; align-items: center; justify-content: center; text-align: center; }
.sem-foto-curto p { color: var(--aco-texto); font-size: 1rem; }
.painel-sem-foto { display: block; width: 84px; height: 56px; flex-shrink: 0; }
@media (max-width: 900px) { .modelo-foto.sem-foto { aspect-ratio: auto; } }
.painel-sem-foto { width: 96px; }

/* ---------- Documentos: tabela compacta ---------- */
.matriz-docs { table-layout: fixed; }
.matriz-docs thead th { padding: 8px 4px; vertical-align: middle; }
.matriz-docs thead th:first-child { width: 40%; padding-left: 16px; }
.matriz-docs thead th a { display: inline; font-size: 1.125rem; margin-right: 6px; }
.matriz-docs thead th input[type="checkbox"] { width: 16px; height: 16px; vertical-align: -2px; accent-color: var(--grafite); cursor: pointer; }
.th-nota { font-weight: 400; font-size: .8125rem; color: var(--aco-texto); }
.matriz-docs .col-todos { width: 72px; text-align: center; font-size: .875rem; border-left: 1px solid var(--fio); }
.matriz-docs thead .col-todos { font-weight: 600; }
.matriz-docs tbody th { width: auto; padding: 11px 16px; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.matriz-docs td { padding: 11px 4px; }
.matriz-docs tbody tr { height: 56px; }
.matriz-docs tbody tr:nth-child(even) { background: #F8F8F6; }
.matriz-docs tbody tr:hover { background: #F1F1EE; }
.matriz-docs .doc-linha-nome { display: inline; font-size: 1rem; }
.matriz-docs .doc-linha-detalhe { display: inline; font-size: .8125rem; margin: 0 0 0 8px; }
.matriz-docs td input[type="checkbox"], .matriz-docs .col-todos input[type="checkbox"] { width: 20px; height: 20px; }
@media (max-width: 1100px) {
  .matriz-docs .doc-linha-detalhe { display: block; margin: 1px 0 0; }
  .matriz-docs tbody th { white-space: normal; }
}
@media (max-width: 860px) {
  .doc-sanfona summary { padding: 10px 4px; font-size: 1rem; }
  .doc-sanfona .doc-linha-detalhe { font-size: .8125rem; margin: 0 4px 4px; }
  .doc-sanfona .marcar-todos { margin: 0 4px 8px; font-size: .875rem; }
  .doc-modelos { gap: 6px; padding-bottom: 12px; }
  .doc-modelo { min-height: 44px; padding: 0 8px; gap: 6px; }
  .docs-celular input[type="checkbox"] { width: 20px; height: 20px; }
}
.matriz-docs tbody th { white-space: normal; padding: 9px 16px; line-height: 1.25; }
.matriz-docs .doc-linha-nome { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.matriz-docs .doc-linha-detalhe { display: block; margin: 2px 0 0; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.matriz-docs tbody tr { height: 58px; }
.matriz-docs td { padding: 9px 4px; }
/* Galeria com até 3 fotos: três colunas iguais */
.galeria.poucas { grid-template-columns: repeat(3, 1fr); }
.galeria.poucas li:first-child { grid-column: auto; grid-row: auto; }
@media (max-width: 860px) { .galeria.poucas { grid-template-columns: repeat(2, 1fr); } .galeria.poucas li:first-child { grid-column: span 2; } }

/* =========================================================
   Celular e tablet (revisão de 20/10/2026)
   Celular: até 599 px. Tablet em pé: 600 a 1023 px (menu de celular).
   Tablet deitado e computador: a partir de 1024 px (menu completo).
   ========================================================= */

/* Faixa de miniaturas: carrossel só no celular; no tablet, os itens numa linha */
@media (min-width: 600px) and (max-width: 900px) {
  .fileira-lista { display: flex; justify-content: center; overflow: visible; gap: 8px 16px; padding-bottom: 0; }
  .fileira-lista li { flex: 0 1 170px; }
  .fileira-foto { height: 104px; }
}
@media (max-width: 599px) {
  .fileira-lista { scroll-padding-left: 16px; }
  .fileira-lista li { flex: 0 0 44%; }
}

/* Página de modelo no celular: foto, título, plaqueta e botões empilhados */
@media (max-width: 900px) {
  .modelo-grade { grid-template-areas: "foto" "nome" "plaqueta" "acao"; }
}
@media (max-width: 599px) {
  .modelo-nome h1 { font-size: 3.5rem; }
  .modelo-acao .acoes { flex-direction: column; align-items: stretch; gap: 10px; }
  .modelo-acao .acoes .btn { width: 100%; min-height: 48px; }
  .contato-venda a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Galeria: 2 colunas no celular, 3 no tablet */
@media (min-width: 600px) and (max-width: 1023px) {
  .galeria, .galeria.poucas { grid-template-columns: repeat(3, 1fr); }
  .galeria li, .galeria li:first-child, .galeria li:last-child, .galeria.poucas li:first-child,
  .galeria.ultimas-largas li:nth-last-child(-n+2) { grid-column: auto !important; grid-row: auto !important; }
}

/* Comparador no celular: a tabela rola só por dentro, com a primeira coluna fixa */
@media (max-width: 599px) {
  .tabela-comparar { min-width: 520px; }
  .tabela-comparar th:first-child, .tabela-comparar td:first-child { position: sticky; left: 0; z-index: 1; background: var(--papel); box-shadow: 1px 0 0 var(--fio); }
  .tabela-comparar thead th:first-child { background: var(--concreto); }
  .tabela-comparar tr.difere th:first-child { background: #FFF4D1; }
  .tabela-comparar tr.grupo th { position: sticky; left: 0; }
  .comparar-escolha fieldset { gap: 4px 16px; }
}

/* Barra fixa: respeita a área segura do iPhone e nunca cobre o rodapé */
@media (max-width: 1023px) {
  .barra-fixa { padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  .rodape .container { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

/* Janela de pedido: tela inteira no celular, com rolagem por dentro */
@media (max-width: 599px) {
  .janela-pedido { width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .janela-pedido .jp-form { min-height: 100%; padding: 16px 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
  .jp-cabeca { position: sticky; top: -16px; background: var(--papel); padding-top: 16px; z-index: 2; }
  .janela-pedido .form-acoes .btn { width: 100%; min-height: 48px; }
}
.janela-pedido input, .janela-pedido select, .janela-pedido textarea, .campo input, .campo select, .campo textarea { font-size: 16px; }

/* Área de toque de 44 px no celular e no tablet */
@media (max-width: 1023px) {
  .rodape-nav a, .rodape-legal a { display: inline-flex; align-items: center; min-height: 44px; }
  .rodape-nav { gap: 0 18px; }
  .rodape-marca { display: inline-flex; align-items: center; min-height: 44px; }
  .btn-texto { min-height: 44px; display: inline-flex; align-items: center; }
  .doc-acoes .btn, .cartao-add, .ficha-acoes .btn { min-height: 44px; }
  .marcar-todos, .so-diferencas, .escolha { min-height: 44px; }
  .consentimento input { width: 24px; height: 24px; }
  .trilha a { display: inline-flex; align-items: center; min-height: 44px; }
  .trilha { margin-bottom: 8px; }
  .atalhos a { display: inline-flex; align-items: center; min-height: 44px; }
  .cartao-add { position: relative; z-index: 2; }
}
@media (max-width: 599px) {
  .doc-acoes { flex-direction: column; align-items: stretch; }
  .doc-acoes .btn { width: 100%; }
  .ficha-acoes .btn { flex: 1 1 calc(50% - 8px); }
}

/* Texto: base de 17 px no celular, títulos sem quebra feia */
@media (max-width: 599px) {
  h1 { font-size: 2rem; text-wrap: balance; }
  h2 { font-size: 1.625rem; text-wrap: balance; }
  .abertura h1 { font-size: 2.125rem; }
  .abertura .lead { font-size: 1.0625rem; }
  .doc-status { font-size: 1rem; }
  .cartao-legenda { font-size: .9375rem; }
}
.marca { min-height: 44px; align-items: center; }
.doc-status { font-size: 1rem; }
@media (max-width: 599px) { .fileira-lista li { flex: 0 0 38%; } }
.trilha ol { align-items: center; }
.galeria.poucas-2 { grid-template-columns: repeat(2, 1fr); }
.galeria.poucas-1 { grid-template-columns: minmax(0, 640px); }
@media (min-width: 600px) and (max-width: 1023px) { .galeria.poucas-2 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .galeria.poucas-2 li:first-child { grid-column: auto; } }

/* =========================================================
   Cabeçalho em duas linhas (referência John Deere), só no computador (1024 px ou mais).
   Linha de cima: logo à esquerda, Minha lista e Pedir proposta à direita.
   Linha de baixo: menu alinhado à esquerda, na mesma coluna da logo.
   Ao rolar para baixo a linha de cima sobe e só o menu fica fixo; ao rolar para cima ela volta.
   Para voltar ao cabeçalho de uma linha: CAB_DUAS_LINHAS = false no gerador
   (backup do CSS anterior em gerador-site/backup/catalogo-antes-cabecalho-2-linhas.css).
   ========================================================= */
@media (min-width: 1024px) {
  .cab-duas .container {
    display: grid; grid-template-columns: auto 1fr auto auto;
    grid-template-rows: 62px 46px; grid-template-areas: "marca . lista proposta" "menu menu menu menu";
    column-gap: 12px; min-height: 0; align-items: center;
  }
  .cab-duas .marca { grid-area: marca; min-height: 0; }
  .cab-duas .menu { display: contents; }
  .cab-duas .menu-lista {
    grid-area: menu; align-self: stretch; justify-content: flex-start; align-items: stretch;
    border-top: 1px solid var(--fio); margin: 0 -2px;
  }
  .cab-duas .menu-lista > li { display: flex; }
  .cab-duas .menu-lista > li > a, .cab-duas .menu-abre {
    min-height: 0; height: 100%; padding: 0 12px; font-size: .9375rem;
    border-top: 0; border-bottom: 3px solid transparent;
  }
  .cab-duas .menu-lista > li:nth-child(2) > a, .cab-duas .menu-lista > li:first-child + li > a { padding-left: 2px; }
  .cab-duas .menu-lista > li > a[aria-current="page"], .cab-duas .menu-abre[data-atual] { border-bottom-color: var(--amarelo); }
  .cab-duas .lista-computador { grid-area: lista; }
  .cab-duas .menu-proposta { grid-area: proposta; }
  .cab-duas .menu-pequeno { display: none; }
  .cab-duas .painel-maquinas { top: 100%; }
  .cabecalho.cab-duas { transition: transform .25s ease; }
  .cabecalho.cab-duas.compacto { transform: translateY(-63px); }
  [id] { scroll-margin-top: 128px; }
}
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) { .cabecalho.cab-duas { transition: none; } }
@media (min-width: 1024px) { .cab-duas .menu-lista > li.so-celular { display: none; } }
@media (min-width: 1024px) { .cab-duas .container { row-gap: 0; } }

/* Cabeçalho de duas linhas, linha da logo mais compacta (50 px) e menu de 44 px */
@media (min-width: 1024px) {
  .cab-duas .container { grid-template-rows: 50px 44px; }
  .cab-duas .marca img { height: 26px; }
  .cab-duas .lista-computador { min-height: 36px; padding-top: 0; padding-bottom: 0; }
  .cab-duas .menu-proposta { min-height: 36px; padding-top: 4px; padding-bottom: 4px; }
  .cabecalho.cab-duas.compacto { transform: translateY(-51px); }
  [id] { scroll-margin-top: 112px; }
}

/* =========================================================
   Abertura da página inicial: banner do tamanho da faixa de miniaturas.
   Foto de um lado (55%), texto compacto do outro (45%).
   Para voltar à abertura de duas colunas: ABERTURA_BANNER_LADO = false no gerador.
   ========================================================= */
.abertura2 { padding: 4px 0 40px; border-bottom: 1px solid var(--fio); }
.abertura2-quadro { display: grid; grid-template-columns: 55% 45%; max-width: 1160px; margin: 0 auto; overflow: hidden; height: clamp(360px, calc(100vh - 300px), 420px); }
.abertura2-foto { position: relative; background: var(--concreto); }
.abertura2-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 55%; }
.abertura2-texto { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 28px 36px; min-width: 0; }
.abertura2-texto h1 { font-size: clamp(1.875rem, 2.3vw, 2.375rem); line-height: 1.08; margin: 0 0 4px; text-wrap: balance; }
.abertura2-texto p { margin: 0; font-size: 1rem; line-height: 1.45; }
.abertura2-baumaster { font-size: .9375rem !important; padding-top: 8px; margin-top: 2px !important; }
.abertura2-texto .acoes { margin-top: 8px; gap: 10px; flex-wrap: nowrap; }
.abertura2-texto .btn { min-height: 44px; padding: 8px 16px; white-space: nowrap; }
/* fundo escuro (grafite) */
.tema-escuro .abertura2-texto { background: var(--grafite); color: #F2F2EF; }
.tema-escuro .abertura2-texto h1 { color: #fff; }
.tema-escuro .abertura2-baumaster { border-top: 1px solid #44464A; color: #D9D9D5; }
.tema-escuro .abertura2-texto a:not(.btn) { color: #FFD46B; }
.tema-escuro .abertura2-texto .btn-secundario { border-color: #fff; color: #fff; }
.tema-escuro .abertura2-texto .btn-secundario:hover { background: #2E3033; color: #fff; }
/* fundo claro (concreto) */
.tema-claro .abertura2-quadro, .abertura2-quadro.tema-claro { border: 1px solid var(--fio); }
.tema-claro .abertura2-texto { background: var(--concreto); }
.tema-claro .abertura2-baumaster { border-top: 1px solid var(--fio); color: var(--aco-texto); }
/* tablet: o banner fica mais baixo e o texto encolhe um pouco */
@media (max-width: 1023px) {
  .abertura2-quadro { grid-template-columns: 50% 50%; height: auto; min-height: 340px; }
  .abertura2-texto { padding: 22px 24px; }
  .abertura2-texto h1 { font-size: 1.625rem; }
  .abertura2-texto .acoes { flex-wrap: wrap; }
}
/* celular: foto em cima, texto embaixo, no mesmo bloco */
@media (max-width: 699px) {
  .abertura2 { padding-top: 0; }
  .abertura2-quadro { display: block; height: auto; min-height: 0; }
  .abertura2-foto { aspect-ratio: 16 / 10; }
  .abertura2-texto { padding: 18px 16px 20px; }
  .abertura2-texto h1 { font-size: 1.625rem; }
  .abertura2-texto .acoes { flex-direction: column; align-items: stretch; }
  .abertura2-texto .btn { width: 100%; min-height: 48px; }
}
.abertura2-quadro { height: clamp(330px, calc(100vh - 330px), 420px); }
@media (max-width: 1023px) { .abertura2-quadro { height: auto; } }
@media (min-width: 1024px) { .abertura2-quadro { grid-template-columns: 52% 48%; } .abertura2-texto { padding: 28px 32px; } .abertura2-texto h1 { font-size: clamp(1.875rem, 2.3vw, 2.25rem); } }

/* Abertura: fundo branco, texto à esquerda e foto à direita, banner mais perto da faixa */
.fileira { padding: 12px 0 8px; }
.abertura2 { padding: 18px 0 36px; }
.tema-branco .abertura2-texto { background: var(--papel); color: var(--grafite); padding-left: 0; }
.tema-branco .abertura2-texto p { color: var(--grafite); }
@media (min-width: 700px) { .abertura2-quadro.tema-branco { grid-template-columns: 46% 54%; } .tema-branco .abertura2-texto { order: -1; padding: 20px 36px 20px 0; } }
@media (max-width: 699px) { .tema-branco .abertura2-texto { padding: 16px 0 4px; } }
.abertura2-foto img { object-position: 50% 50%; }

/* ---------- Revisão 28 (sem cara de IA) ---------- */
/* itens em linha no lugar de grades de cartões iguais (Pós-venda e Sobre) */
.itens-linha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.item-linha { border-top: 1px solid var(--grafite); padding: 18px 0 20px; }
.item-linha h3 { margin-bottom: .3em; }
.item-linha p { margin: 0; color: var(--aco-texto); }
.item-linha p + p { margin-top: .5em; }
@media (max-width: 760px) { .itens-linha { grid-template-columns: 1fr; } }
/* Como comprar: formas de compra em tabela; itens com título sem número */
.tabela-formas .tabela-specs tbody th { width: 28%; font-weight: 600; }
.tabela-formas .tabela-specs thead th { background: var(--concreto); border-bottom: 1px solid var(--grafite); font-weight: 600; }
.lista-titulos li { padding: 12px 0 12px 24px; }
.lista-titulos li h3 { font-size: 1.125rem; margin: 0 0 .2em; }
.lista-titulos li p { margin: 0; color: var(--aco-texto); }
/* página de modelo */
.config-curta { margin: 14px 0 0; font-size: 1rem; color: var(--aco-texto); }
.ficha-em-confirmacao { margin: 0 0 14px; padding: 12px 16px; border: 1px solid var(--grafite); background: var(--concreto); font-size: 1rem; }
.tabela-docs-modelo { min-width: 640px; }
.tabela-docs-modelo thead th { background: var(--concreto); border-bottom: 1px solid var(--grafite); font-weight: 600; font-size: .9375rem; }
.tabela-docs-modelo tbody th { font-weight: 600; width: auto; }
.tabela-docs-modelo td { vertical-align: middle; font-weight: 400; }
.tabela-docs-modelo .doc-cod { white-space: nowrap; color: var(--aco-texto); font-size: .9375rem; }
.tabela-docs-modelo .doc-acao { white-space: nowrap; }
.tabela-docs-modelo .doc-marcar { text-align: center; width: 80px; }
.tabela-docs-modelo input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--grafite); cursor: pointer; }
.tabela-docs-modelo tbody tr:nth-child(even) { background: #F8F8F6; }
/* VT930 sem foto: nada de retângulo vazio; nome e plaqueta grande lado a lado */
.modelo-grade.sem-foto { grid-template-areas: "nome plaqueta" "acao plaqueta"; grid-template-columns: 1fr 1fr; }
.sem-foto-frase { margin: 10px 0 0; font-weight: 600; }
@media (max-width: 900px) { .modelo-grade.sem-foto { grid-template-areas: "nome" "plaqueta" "acao"; grid-template-columns: 1fr; } }
/* celular: a barra fixa só aparece depois de rolar, para não cobrir o botão principal */
@media (max-width: 1023px) {
  .barra-fixa { transform: translateY(110%); transition: transform .2s ease; }
  .barra-fixa.visivel { transform: none; }
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) { .barra-fixa { transition: none; } }
.alvo-toque { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; cursor: pointer; }

/* ---------- Menu Máquinas no computador: lista vertical abaixo do item e página escurecida (referência John Deere) ---------- */
.painel-lista { display: none; list-style: none; margin: 0; padding: 0; }
.cortina-menu { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.48); opacity: 0; visibility: hidden; transition: opacity .15s ease, visibility .15s ease; }
.cortina-menu.ativa { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .cortina-menu { transition: none; } }
@media (min-width: 1024px) {
  .menu-maquinas { position: relative; }
  .painel-maquinas {
    left: 0; right: auto; top: 100%; width: 400px; padding: 6px 0;
    background: #F7F7F5; border: 1px solid var(--fio); border-top: 0;
  }
  .painel-maquinas > .ver-todas, .painel-colunas, .painel-comparar { display: none !important; }
  .painel-lista { display: block; }
  .painel-lista a { display: flex; align-items: center; min-height: 45px; padding: 0 20px; color: var(--grafite); text-decoration: none; font-weight: 600; font-size: 1rem; }
  .painel-lista li + li a { border-top: 1px solid var(--fio); }
  .painel-lista a:hover, .painel-lista a:focus-visible { background: var(--papel); text-decoration: underline; text-decoration-color: var(--amarelo); text-decoration-thickness: 2px; }
  .menu-abre[aria-expanded="true"] { border-bottom-color: var(--amarelo) !important; }
}
/* Documentos: tudo na primeira tela do computador */
@media (min-width: 1024px) {
  .topo-compacto { padding: 10px 0 0; border-bottom: 0; }
  .topo-compacto .trilha { margin-bottom: 2px; }
  .topo-compacto h1 { font-size: 2.5rem; margin-bottom: .15em; }
  .topo-compacto > .container > p { font-size: 1.0625rem; max-width: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .secao-colada { padding-top: 20px; padding-bottom: 40px; }
  .secao-colada .matriz-pe { margin-top: 16px; }
}

/* Topo compacto em todas as páginas internas (computador): trilha, título de 40 px, frase curta e conteúdo logo em seguida */
@media (min-width: 1024px) {
  .topo-pagina { padding: 10px 0 0; border-bottom: 0; }
  .topo-pagina .trilha { margin-bottom: 2px; }
  .topo-pagina h1 { font-size: 2.5rem; margin-bottom: .15em; }
  .topo-pagina > .container > p { font-size: 1.0625rem; max-width: none; white-space: normal; }
  .topo-pagina .contato-destaque { margin-top: 12px; padding: 10px 16px; }
  .topo-pagina + .secao { padding-top: 24px; }
  .topo-pagina + .secao.secao-concreto { margin-top: 24px; }
  /* formulários mais baixos */
  .formulario { padding: 20px 22px; }
  .formulario h2 { margin-bottom: .4em; font-size: 1.5rem !important; }
  .campos { gap: 12px 16px; }
  .campo { gap: 4px; }
  .campo input, .campo select { min-height: 44px; padding: 8px 12px; }
  .campo textarea { min-height: 96px; padding: 8px 12px; }
  .consentimento { padding: 8px 12px; font-size: .9375rem; gap: 10px; }
  .form-acoes { gap: 10px 14px; }
  .lateral .caixa { padding: 18px 20px; }
  .lateral { gap: 16px; }
}
/* Menu: sublinhado amarelo no item sob o mouse ou com foco do teclado */
@media (min-width: 1024px) {
  .menu-lista > li > a, .menu-abre { transition: border-color .15s ease; }
  .menu-lista > li > a:hover, .menu-lista > li > a:focus-visible, .menu-abre:hover, .menu-abre:focus-visible { border-bottom-color: var(--amarelo) !important; }
}
@media (prefers-reduced-motion: reduce) { .menu-lista > li > a, .menu-abre { transition: none; } }
/* Página atual sem sublinhado e sem cor: só em negrito (o amarelo fica para o mouse e o foco). aria-current continua no HTML. */
.menu-lista > li > a, .menu-abre { font-weight: 400; }
.menu-lista > li > a[aria-current="page"], .menu-abre[data-atual] { font-weight: 600; border-bottom-color: transparent; text-decoration: none; }
.cab-duas .menu-lista > li > a[aria-current="page"], .cab-duas .menu-abre[data-atual] { border-bottom-color: transparent; }
@media (min-width: 1024px) { .menu-lista > li > a:hover, .menu-lista > li > a:focus-visible, .menu-abre:hover, .menu-abre:focus-visible, .menu-abre[aria-expanded="true"] { border-bottom-color: var(--amarelo) !important; } }
@media (max-width: 1023px) { .menu-lista > li > a[aria-current="page"], .menu-abre[data-atual] { text-decoration: none; } .menu-lista > li > a, .menu-abre { font-weight: 600; } .menu-lista > li > a[aria-current="page"] { font-weight: 700; } }

/* =========================================================
   Uma letra só no site inteiro: a mesma do menu do cabeçalho (Barlow, sem a versão condensada).
   Títulos em 600 a 700, texto em 400, sem espaçamento extra entre letras.
   Backup do CSS anterior: gerador-site/backup/catalogo-antes-fonte-unica.css
   ========================================================= */
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-latin-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
:root { --titulo: "Barlow", Arial, sans-serif; }
h1, h2 { font-weight: 700; letter-spacing: 0; }
h3 { font-weight: 600; }
* { letter-spacing: normal !important; }
.modelo-nome h1 { font-size: clamp(3.25rem, 6vw, 4.5rem); line-height: 1; }
.plaqueta dd { font-size: 1.5rem; }
.plaqueta-mini dd { font-size: 1.125rem; }
.tabela-linha .modelo { font-size: 1.5rem; }
.fileira-nome { font-size: 1.125rem; font-weight: 700; }
.cartao h3, .painel-titulo, .painel-colunas strong { font-weight: 700; }
h1 { font-size: clamp(2rem, 3.6vw, 2.75rem); }
h2 { font-size: clamp(1.5rem, 2.4vw, 1.875rem); }
.abertura2-texto h1 { font-size: clamp(1.75rem, 2vw, 2.125rem); }
@media (min-width: 1024px) { .topo-pagina h1, .topo-compacto h1 { font-size: 2.25rem; } }
/* Abertura com a pá recortada (sem fundo): inteira, encostada embaixo, com sombra leve no chão */
.abertura2-foto.com-recorte { background: none; display: flex; align-items: flex-end; justify-content: center; }
.abertura2-foto.com-recorte::after { content: ""; position: absolute; left: 12%; right: 8%; bottom: 4px; height: 26px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(0,0,0,.28), rgba(0,0,0,0) 70%); z-index: 0; }
.abertura2-recorte { position: relative; z-index: 1; display: block; width: 100%; height: 100%; }
.abertura2-foto .abertura2-recorte img { position: absolute; inset: 0 0 10px 0; width: 100%; height: calc(100% - 10px); object-fit: contain; object-position: center bottom; }
@media (max-width: 699px) { .abertura2-foto.com-recorte { aspect-ratio: 4 / 3; } }

/* =========================================================
   Banner da página inicial (provisório, pedido em 20/10/2026): foto larga com o texto à esquerda, sobre o céu claro.
   Exceção do DESIGN.md (texto sobre foto) pedida pela Thais. Sem caixa e sem degradê.
   Para voltar ao bloco de foto e texto: ABERTURA_MODO diferente de 'banner' no gerador.
   ========================================================= */
.banner-inicio { padding: 16px 0 40px; border-bottom: 1px solid var(--fio); }
.banner-inicio-quadro { position: relative; overflow: hidden; height: clamp(380px, calc(100vh - 360px), 480px); background: #F3E6CF; }
.banner-inicio-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 60%; }
.banner-inicio-texto { position: relative; z-index: 1; max-width: 540px; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 32px 0 32px 48px; color: var(--grafite); }
.banner-inicio-texto h1 { font-size: clamp(1.875rem, 2.3vw, 2.375rem); line-height: 1.12; margin: 0 0 4px; color: var(--grafite); text-wrap: balance; }
.banner-inicio-texto p { margin: 0; font-size: 1.0625rem; color: var(--grafite); }
.banner-inicio-texto .acoes { margin-top: 10px; gap: 10px; }
.banner-inicio-texto .btn { min-height: 44px; padding: 8px 18px; }
.banner-inicio-texto .btn-secundario { background: rgba(255,255,255,.55); }
.banner-inicio-barra { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--fio); border-top: 0; }
.banner-inicio-barra li { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 24px; font-weight: 600; color: var(--grafite); }
.banner-inicio-barra li + li { border-left: 1px solid var(--fio); }
.banner-inicio-barra svg { flex-shrink: 0; color: var(--grafite); }
@media (max-width: 1023px) {
  .banner-inicio-quadro { height: 360px; }
  .banner-inicio-texto { max-width: 400px; padding-left: 28px; }
  .banner-inicio-texto h1 { font-size: 1.625rem; }
}
/* celular: a foto em cima, recortada na pá, e o texto embaixo, sobre fundo branco */
@media (max-width: 699px) {
  .banner-inicio { padding-top: 0; }
  .banner-inicio-quadro { height: auto; background: none; overflow: visible; }
  .banner-inicio-foto { position: static; display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-position: 78% 60%; }
  .banner-inicio-texto { max-width: none; height: auto; padding: 16px 0 8px; }
  .banner-inicio-texto h1 { font-size: 1.625rem; }
  .banner-inicio-texto .acoes { flex-direction: column; align-items: stretch; }
  .banner-inicio-texto .btn { width: 100%; min-height: 48px; }
  .banner-inicio-texto .btn-secundario { background: none; }
  .banner-inicio-barra { grid-template-columns: 1fr; border-top: 1px solid var(--fio); margin-top: 12px; }
  .banner-inicio-barra li + li { border-left: 0; border-top: 1px solid var(--fio); }
  .banner-inicio-barra li { min-height: 52px; padding: 0 16px; }
}

/* Banner de ponta a ponta, colado na faixa de miniaturas; texto alinhado à coluna da logo */
html, body { overflow-x: clip; }
.banner-inicio { padding-top: 0; }
.banner-inicio-quadro { width: 100vw; margin-left: calc(50% - 50vw); border-radius: 0; height: clamp(440px, calc(100vh - 380px), 500px); }
.banner-inicio-foto { object-position: 100% 62%; }
.banner-inicio-texto { max-width: none; padding-left: max(24px, calc((100vw - var(--largura)) / 2 + 24px)); padding-right: 0; }
.banner-inicio-texto > * { max-width: 520px; }
.banner-inicio-texto h1 { font-size: 2.5rem; }
@media (max-width: 1023px) { .banner-inicio-quadro { height: 380px; } .banner-inicio-texto > * { max-width: 400px; } .banner-inicio-texto h1 { font-size: 1.75rem; } }
@media (max-width: 699px) { .banner-inicio-quadro { height: auto; } .banner-inicio-foto { object-position: 80% 60%; } .banner-inicio-texto { padding: 16px 16px 8px; } .banner-inicio-texto > * { max-width: none; } .banner-inicio-texto h1 { font-size: 1.625rem; } }
/* banner: título curto em 3 linhas */
@media (min-width: 1024px) { .banner-inicio-texto h1 { font-size: 2.75rem; max-width: 470px; } }
/* banner: segundo botão claro e sólido */
.banner-inicio-texto .btn-secundario { background: var(--papel); border: 1px solid var(--grafite); color: var(--grafite); }
.banner-inicio-texto .btn-secundario:hover { background: var(--concreto); }
/* cards brancos com as máquinas */
.cards-maquinas { padding: 40px 0 24px; }
.cards-maquinas h2 { margin-bottom: 20px; }
.cards-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.card-maquina { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; background: var(--papel); border: 1px solid var(--fio); box-shadow: 0 1px 2px rgba(0,0,0,.04); padding: 18px 20px 20px; }
.card-foto { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 150px; margin-bottom: 12px; }
.card-foto picture { display: contents; }
.card-foto img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.card-maquina strong { font-size: 1.25rem; font-weight: 700; }
.card-tipo { color: var(--aco-texto); font-size: .9375rem; margin-bottom: 10px; }
.card-maquina a { margin-top: auto; font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; }
.card-maquina a::after { content: ""; position: absolute; inset: 0; }
.card-maquina:hover { border-color: var(--grafite); }
@media (max-width: 899px) { .cards-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .card-maquina { padding: 12px 12px 8px; } .card-foto { height: 96px; } .card-maquina strong { font-size: 1.0625rem; } }
/* banner: segundo botão claro e sólido */
.banner-inicio-texto .btn-secundario { background: var(--papel); border: 1px solid var(--grafite); color: var(--grafite); }
.banner-inicio-texto .btn-secundario:hover { background: var(--concreto); }

/* ---------- Revisão 29 (IA e celular) ---------- */
/* 1. documentos da ficha: no celular cada documento vira um bloco empilhado */
@media (max-width: 699px) {
  .tabela-docs-modelo { min-width: 0; }
  .tabela-docs-modelo thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .tabela-docs-modelo, .tabela-docs-modelo tbody, .tabela-docs-modelo tr, .tabela-docs-modelo th, .tabela-docs-modelo td { display: block; width: auto; }
  .tabela-docs-modelo tr { position: relative; padding: 12px 64px 12px 14px; border-bottom: 1px solid var(--fio); }
  .tabela-docs-modelo tbody th, .tabela-docs-modelo td { padding: 0; border: 0; }
  .tabela-docs-modelo td[data-rotulo]:not(.doc-marcar)::before { content: attr(data-rotulo) ": "; color: var(--aco-texto); }
  .tabela-docs-modelo .doc-cod, .tabela-docs-modelo td { font-size: .9375rem; white-space: normal; }
  .tabela-docs-modelo .doc-marcar { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: auto; }
  .tabela-docs-modelo .doc-acao .btn-texto { min-height: 44px; }
}
/* 6. Como comprar: formas de compra empilhadas no celular */
@media (max-width: 699px) {
  .tabela-formas .tabela-specs { min-width: 0; }
  .tabela-formas thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .tabela-formas .tabela-specs, .tabela-formas tbody, .tabela-formas tr, .tabela-formas th, .tabela-formas td { display: block; width: auto !important; }
  .tabela-formas tr { padding: 12px 14px; border-bottom: 1px solid var(--fio); }
  .tabela-formas tbody th, .tabela-formas td { padding: 0; border: 0; }
  .tabela-formas tbody th { margin-bottom: 4px; }
}
/* 3. barra fixa do celular: o fim da página não fica atrás dela */
@media (max-width: 1023px) { main { padding-bottom: 80px; } }
/* 4. alvos de toque de 44 px no celular */
@media (max-width: 1023px) {
  .tabela-linha a { display: inline-flex; align-items: center; min-height: 44px; }
  .jp-fechar { min-height: 44px; min-width: 64px; }
  .lista-botao { min-height: 44px; }
}
/* 5. e-mail sem quebrar no meio da palavra */
.passos h3, .passos p { overflow-wrap: normal; word-break: normal; }
/* 7. comparar: linha diferente com fundo leve, sem barra de um lado só */
.tabela-comparar tr.difere th, .tabela-comparar tr.difere td { background: var(--concreto); box-shadow: none; }
.tabela-comparar tr.difere td { font-weight: 700; }
.marca-difere { background: var(--concreto); box-shadow: none; }
/* 8. privacidade e termos: texto alinhado à esquerda com o título, marcador quadradinho */
.container.texto-longo { max-width: var(--largura); }
.texto-longo > * { max-width: 72ch; }
.texto-longo ul { list-style: none; padding-left: 0; }
.texto-longo ul li { position: relative; padding-left: 22px; }
.texto-longo ul li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; border: 1.5px solid var(--grafite); }
/* Faixa de miniaturas: fotos uns 18% maiores e um risquinho vertical fino entre as máquinas (computador) */
@media (min-width: 901px) {
  .fileira { padding: 8px 0 6px; }
  .fileira-foto { height: 140px; }
  .fileira-lista { gap: 0; }
  .fileira-lista li { flex: 0 1 236px; position: relative; padding: 0 12px; }
  .fileira-lista li + li::before { content: ""; position: absolute; left: 0; top: 20%; height: 60%; width: 1px; background: var(--fio); }
}
/* Faixa de miniaturas: mais uns 10% */
@media (min-width: 901px) { .fileira-foto { height: 154px; } .fileira-lista li { flex-basis: 256px; } }


/* =========================================================
   Versão de celular v2 (21/10/2026). Tudo aqui vale só até 1023 px; o computador não muda.
   Celular: até 767 px. Tablet: 768 a 1023 px.
   Pesquisa e plano: pesquisa/30-mobile-referencias-e-plano.md
   Backup do CSS anterior: gerador-site/backup/catalogo-antes-mobile-v2.css
   ========================================================= */
/* peças novas do HTML: escondidas no computador */
.bf-curto, .zap-rotulo, .botao-topo, .fileira-trilho, .galeria-conta { display: none; }
.banner-inicio-picture, .modelo-foto picture, .galeria-link picture, .cartao-imagem picture { display: contents; }
.erro-campo { color: var(--ferrugem); font-weight: 600; font-size: .9375rem; line-height: 1.35; margin: 2px 0 0; }
[aria-invalid="true"] { border-color: var(--ferrugem) !important; border-width: 2px !important; }
.consentimento .erro-campo { grid-column: 1 / -1; }

:root { --gut: 16px; }
@media (min-width: 400px) and (max-width: 767px) { :root { --gut: 20px; } }
@media (min-width: 768px) and (max-width: 1023px) { :root { --gut: 24px; } }

@media (max-width: 1023px) {
  html { -webkit-tap-highlight-color: transparent; }
  /* toque: resposta imediata, sem atraso de duplo toque */
  a, button, summary, label, input, select, textarea { touch-action: manipulation; }
  .btn, .botao-fixo, .botao-zap, .botao-topo, .menu-botao, .lista-botao, .chip, .jp-fechar { transition: background-color .12s ease, transform .12s ease; }
  .btn:active, .botao-fixo:active, .botao-zap:active, .botao-topo:active, .menu-botao:active, .lista-botao:active, .chip:active, .jp-fechar:active { transform: translateY(1px); }
  .btn-primario:active, .botao-fixo:active { background: #E2A600; }
  .btn-secundario:active, .botao-zap:active, .botao-topo:active, .menu-botao:active, .lista-botao:active, .jp-fechar:active { background: var(--concreto); }
  .ficha-grupo summary:active, .doc-sanfona summary:active { background: #E4E4E0; }

  /* barra de baixo: Pedir proposta, voltar ao topo (depois de rolar) e WhatsApp; área segura do iPhone */
  .barra-fixa { gap: 8px; padding: 8px max(var(--gut), env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(var(--gut), env(safe-area-inset-left, 0px)); }
  .bf-longo { display: none; }
  .bf-curto { display: inline; }
  .botao-fixo { min-height: 48px; padding: 8px 12px; font-size: 1.0625rem; }
  .botao-zap { width: auto; gap: 8px; padding: 0 14px; font-weight: 600; text-decoration: none; }
  .zap-rotulo { display: inline; }
  .botao-topo { align-items: center; justify-content: center; width: 48px; min-height: 48px; flex-shrink: 0; background: var(--papel); color: var(--grafite); border: 1.5px solid var(--grafite); border-radius: 2px; }
  .barra-fixa.longe .botao-topo { display: flex; }
  .barra-fixa.teclado, html.menu-aberto .barra-fixa { transform: translateY(120%) !important; }
  main { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }

  /* menu: folha da altura da tela, fundo travado, "Pedir proposta" sempre ao alcance do polegar */
  html.menu-aberto, html.menu-aberto body { overflow: hidden; }
  .menu { height: calc(100vh - 56px); height: calc(100dvh - 56px); max-height: none; padding: 4px var(--gut) 0; overscroll-behavior: contain; }
  .menu-lista > li > a, .menu-abre { min-height: 56px; font-size: 1.1875rem; }
  .menu-pequeno { gap: 4px 24px; flex-wrap: wrap; margin-top: 8px; }
  .menu-pequeno a { display: inline-flex; align-items: center; min-height: 44px; }
  .menu-proposta { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); margin: auto 0 12px; min-height: 52px; box-shadow: 0 0 0 12px var(--papel); font-size: 1.125rem; }
  .painel-colunas a { min-height: 56px; }

  /* "Adicionar à lista": estado claro quando o item já está na lista */
  .btn[data-add-lista].na-lista { background: var(--grafite); border-color: var(--grafite); color: var(--papel); }

  /* formulários: 16 px nos campos (o iPhone não dá zoom), campos de 48 px */
  .campo input, .campo select, .campo textarea { font-size: 16px; min-height: 48px; }
  .campo textarea { min-height: 120px; }
  .campo label, .campo legend { font-size: 1rem; }
}

/* ---------- Celular (até 767 px) ---------- */
@media (max-width: 767px) {
  .container { padding-left: var(--gut); padding-right: var(--gut); }
  /* escala de tipo do celular: corpo 17 px, ritmo de 8 px */
  body { font-size: 1.0625rem; line-height: 1.55; }
  h1 { font-size: 2rem; line-height: 1.1; }
  h2 { font-size: 1.625rem; line-height: 1.15; margin-bottom: .45em; }
  h3 { font-size: 1.1875rem; line-height: 1.25; }
  .pequeno, .ajuda, .form-nota { font-size: .9375rem; }
  .secao { padding: 48px 0; }
  .secao-larga { padding: 56px 0; }
  .secao-chamada { padding-top: 0; }
  .cabeca-secao { margin-bottom: 24px; }
  .topo-pagina { padding: 12px 0 32px; }
  .topo-pagina > .container > p { font-size: 1.0625rem; }
  .bloco-chamada { padding: 24px var(--gut); }
  .bloco-chamada .acoes, .secao-chamada .acoes { flex-direction: column; align-items: stretch; }
  .bloco-chamada .btn { width: 100%; }

  /* caminho de navegação numa linha só, rolando de lado se precisar */
  .trilha { margin: 0 calc(-1 * var(--gut)) 4px; }
  .trilha ol { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; padding: 0 var(--gut); scrollbar-width: none; }
  .trilha ol::-webkit-scrollbar { display: none; }

  /* ----- página inicial: faixa de máquinas com encaixe e trilho que mostra que dá para arrastar ----- */
  .fileira { padding: 6px 0 10px; }
  .fileira .container { padding: 0; }
  .fileira-lista { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 4px; padding: 0 var(--gut) 2px; scroll-padding: 0 var(--gut); scrollbar-width: none; overscroll-behavior-x: contain; }
  .fileira-lista::-webkit-scrollbar { display: none; }
  .fileira-lista li { flex: 0 0 41%; scroll-snap-align: start; }
  .fileira-lista a { padding: 4px 4px 6px; min-height: 44px; }
  .fileira-foto { height: 84px; }
  .fileira-nome { font-size: 1.0625rem; margin-top: 6px; }
  .fileira-tipo { font-size: .875rem; }
  .fileira-lista a:active .fileira-nome { text-decoration: underline; text-decoration-color: var(--amarelo); text-decoration-thickness: 2px; }
  .fileira-trilho { display: block; position: relative; height: 3px; margin: 6px var(--gut) 0; background: var(--fio); overflow: hidden; }
  .fileira-trilho span { display: block; height: 100%; width: 40%; background: var(--grafite); }
  .fileira-trilho.sem-rolagem { visibility: hidden; }

  /* banner: a pá inteira (recorte próprio do celular) e o texto embaixo */
  .banner-inicio { padding: 0 0 32px; }
  .banner-inicio-quadro { height: auto; background: none; overflow: visible; }
  .banner-inicio-foto { position: static; display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 50%; }
  .banner-inicio-texto { max-width: none; height: auto; gap: 8px; padding: 16px var(--gut) 0; }
  .banner-inicio-texto > * { max-width: none; }
  .banner-inicio-texto h1 { font-size: 1.75rem; line-height: 1.12; margin: 0; }
  .banner-inicio-texto p { font-size: 1.0625rem; line-height: 1.5; }
  .banner-inicio-texto .acoes { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 8px; }
  .banner-inicio-texto .btn { width: 100%; min-height: 50px; font-size: 1.0625rem; }
  .banner-inicio-texto .btn-secundario { background: var(--papel); border: 1.5px solid var(--grafite); }

  /* ----- página de modelo ----- */
  .modelo-topo { padding: 8px 0 40px; }
  .modelo-grade { gap: 20px; }
  .modelo-foto { margin: 0 calc(-1 * var(--gut)); }
  .modelo-foto figcaption { padding: 0 var(--gut); font-size: .875rem; }
  .modelo-nome h1 { font-size: 3.5rem; line-height: 1; }
  .modelo-tipo { font-size: 1.375rem; margin: 2px 0 8px; }
  .plaqueta { padding: 26px 18px 16px; }
  .plaqueta dl div { padding: 10px 10px 10px 0; }
  .plaqueta dl div:nth-child(even) { padding-left: 14px; }
  .plaqueta dt { font-size: .875rem; }
  .plaqueta dd { font-size: 1.375rem; line-height: 1.15; overflow-wrap: break-word; }
  .plaqueta-pe { font-size: .875rem; }
  .modelo-acao .acoes { flex-direction: column; align-items: stretch; gap: 10px; }
  .modelo-acao .acoes .btn { width: 100%; min-height: 52px; font-size: 1.0625rem; }
  .contato-venda a { display: inline-flex; align-items: center; min-height: 44px; }

  /* galeria deslizável com encaixe e contador */
  .galeria, .galeria.poucas, .galeria.poucas-2 { display: flex; grid-template-columns: none; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gut)); padding: 0 var(--gut) 4px; scroll-padding: 0 var(--gut); scrollbar-width: none; overscroll-behavior-x: contain; }
  .galeria::-webkit-scrollbar { display: none; }
  .galeria li, .galeria li:first-child, .galeria li:last-child { flex: 0 0 82%; scroll-snap-align: start; grid-column: auto !important; grid-row: auto !important; }
  .galeria-legenda { font-size: .9375rem; }
  .galeria-conta { display: block; margin: 12px 0 0; font-weight: 600; font-size: 1rem; font-variant-numeric: tabular-nums; }

  /* ficha técnica em sanfona, linhas mais firmes */
  .ficha-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .ficha-acoes .btn { width: 100%; min-height: 48px; padding: 8px 10px; }
  .ficha-acoes .btn[data-csv] { grid-column: 1 / -1; }
  .ficha-acoes .btn-texto { grid-column: 1 / -1; }
  .ficha-grupo summary { min-height: 56px; padding: 12px 16px; font-size: 1.1875rem; }
  .ficha-grupo .tabela-specs th, .ficha-grupo .tabela-specs td { padding: 10px 12px; font-size: 1rem; }
  .ficha-grupo .tabela-specs tbody th { width: 52%; }
  .lateral { gap: 16px; }
  .caixa { padding: 20px var(--gut); }

  /* documentos da ficha em blocos: rótulo, valor e ação com área de toque boa */
  .tabela-docs-modelo { min-width: 0; }
  .tabela-docs-modelo thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .tabela-docs-modelo, .tabela-docs-modelo tbody, .tabela-docs-modelo tr, .tabela-docs-modelo th, .tabela-docs-modelo td { display: block; width: auto; }
  .tabela-docs-modelo tr { position: relative; padding: 14px 64px 10px 16px; border-bottom: 1px solid var(--fio); }
  .tabela-docs-modelo tbody th, .tabela-docs-modelo td { padding: 0; border: 0; }
  .tabela-docs-modelo tbody th { font-size: 1.0625rem; margin-bottom: 2px; }
  .tabela-docs-modelo td[data-rotulo]:not(.doc-marcar)::before { content: attr(data-rotulo) ": "; color: var(--aco-texto); }
  .tabela-docs-modelo .doc-cod, .tabela-docs-modelo td { font-size: .9375rem; white-space: normal; }
  .tabela-docs-modelo .doc-marcar { position: absolute; right: 8px; top: 12px; transform: none; width: auto; }
  .tabela-docs-modelo .doc-acao .btn-texto { min-height: 44px; }

  /* ----- comparador: escolha em botões grandes e tabela que cabe na tela ----- */
  .comparar-escolha fieldset { display: grid; grid-template-columns: 1fr 1fr; padding: 10px 12px 12px; gap: 8px; }
  .escolha { min-height: 52px; padding: 6px 10px; border: 1.5px solid var(--fio); background: var(--papel); border-radius: 2px; flex-wrap: wrap; column-gap: 8px; row-gap: 0; line-height: 1.2; }
  .escolha span { flex-basis: 100%; padding-left: 28px; }
  .escolha:has(input:checked) { border-color: var(--grafite); background: var(--concreto); }
  .escolha span { font-size: .875rem; }
  .so-diferencas { min-height: 48px; grid-column: 1 / -1; }
  .comparar-add { gap: 8px; }
  .comparar-add .chip { min-height: 44px; }
  .tabela-comparar { min-width: 0; font-size: .9375rem; table-layout: fixed; }
  .tabela-comparar caption { font-size: 1rem; padding: 12px; }
  .tabela-comparar th, .tabela-comparar td { padding: 10px 6px; overflow-wrap: break-word; }
  .tabela-comparar td { font-size: .875rem; hyphens: auto; }
  .tabela-comparar tbody th, .tabela-comparar thead th:first-child { width: 36%; hyphens: auto; overflow-wrap: normal; }
  .tabela-comparar thead th { font-size: 1rem; }

  /* ----- página Documentos ----- */
  .doc-sanfona summary { min-height: 56px; padding: 12px 4px; font-size: 1.0625rem; }
  .doc-sanfona .doc-linha-detalhe { font-size: .9375rem; }
  .doc-sanfona .marcar-todos { font-size: .9375rem; min-height: 44px; }
  .doc-modelos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .doc-modelo { min-height: 52px; font-size: 1.0625rem; }
  .docs-celular input[type="checkbox"] { width: 22px; height: 22px; }
  .matriz-pe .btn { width: 100%; min-height: 52px; }

  /* ----- janela de pedido: tela inteira, botões de enviar sempre à vista ----- */
  .janela-pedido { width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; overscroll-behavior: contain; }
  .janela-pedido .jp-form { min-height: 100%; padding: 0 var(--gut); }
  .jp-cabeca { position: sticky; top: 0; z-index: 2; background: var(--papel); padding: 12px 0 10px; margin: 0 0 12px; align-items: center; }
  .jp-cabeca h2 { font-size: 1.5rem; }
  .jp-fechar { min-height: 44px; }
  .janela-pedido .form-acoes { position: sticky; bottom: 0; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 calc(-1 * var(--gut)); padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--papel); border-top: 1px solid var(--grafite); }
  .janela-pedido .form-acoes .btn { width: 100%; min-height: 50px; padding: 6px 4px; font-size: .9375rem; }
  .janela-pedido .form-nota { grid-column: 1 / -1; font-size: .875rem; }
  .janela-pedido .form-retorno { margin-bottom: 16px; }
  .formulario .form-acoes .btn { width: 100%; min-height: 52px; }

  /* rodapé: respiro maior entre os links */
  .rodape .container { padding-top: 24px; }
  .rodape-legal { font-size: .9375rem; }
}
/* telas bem estreitas: WhatsApp só com o ícone quando o "voltar ao topo" aparece */
@media (max-width: 374px) { .barra-fixa.longe .zap-rotulo { display: none; } .barra-fixa.longe .botao-zap { padding: 0 12px; } }

/* ---------- Tablet (768 a 1023 px) ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .container { padding-left: var(--gut); padding-right: var(--gut); }
  /* banner: foto inteira da pá em cima e o texto embaixo, sem texto por cima da máquina */
  .banner-inicio { padding-bottom: 40px; }
  .banner-inicio-quadro { height: auto; background: none; overflow: visible; }
  .banner-inicio-foto { position: static; display: block; width: 100%; height: 340px; object-fit: cover; object-position: 100% 60%; }
  .banner-inicio-texto { max-width: none; height: auto; gap: 10px; padding: 24px var(--gut) 0; }
  .banner-inicio-texto > * { max-width: 620px; }
  .banner-inicio-texto h1 { font-size: 2.125rem; margin: 0; }
  .banner-inicio-texto .btn { min-height: 52px; padding: 10px 22px; }
  .banner-inicio-texto .btn-secundario { border: 1.5px solid var(--grafite); }
  .modelo-acao .acoes .btn { min-height: 52px; }
  .comparar-escolha .escolha { min-height: 48px; }
  .janela-pedido .form-acoes { position: sticky; bottom: 0; z-index: 2; margin: 0 -24px; padding: 12px 24px; background: var(--papel); border-top: 1px solid var(--grafite); }
}
/* celular: o navegador só monta as partes de baixo da página quando chegam perto da tela (menos trabalho no carregamento) */
@media (max-width: 767px) {
  #documentos, .rodape, .secao-chamada { content-visibility: auto; contain-intrinsic-size: auto 900px; }
}