/* Site da oficina aeronáutica (perfil de aviação do almoxarifado).
   Dois layouts na mesma página: .sa--ficha (claro, etiqueta de lote) e
   .sa--hangar (capa escura com busca de P/N). Tudo preso em .sa. */
.corpo-site-aero { background: #F6F4EF; }
.sa { --navy: #10213F; --navy-e: #0E1D38; --navy-h: #1B3563; --galpao: #0B1426; --galpao-2: #12203A; --rodape-h: #0A1528;
  --laranja: #F07A1A; --laranja-e: #D9660C; --botao: var(--laranja); --botao-e: var(--laranja-e); --sobre-botao: #fff;
  --laranja-claro: #F07A1A; --laranja-claro-fundo: rgba(240,122,26,.15); --sobre-laranja-claro: #fff;
  --texto: #0F172A; --suave: #5B6B84;
  --linha: #DDE3EC; --papel: #F6F4EF; color: var(--texto); font: 16px/1.6 "Plus Jakarta Sans", system-ui, sans-serif; }
.sa *, .sa *::before, .sa *::after { box-sizing: border-box; }
.sa a { color: inherit; text-decoration: none; }
.sa h1, .sa h2, .sa h3 { font-family: inherit; }
.sa .sa-w { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.sa .sa-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.sa .sa-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: 48px; padding: 0 1.5rem;
  border-radius: 999px; font-weight: 700; font-size: .95rem; line-height: 1; font-family: inherit; border: 1px solid transparent; white-space: nowrap; cursor: pointer;
  transition: transform .15s ease, background .2s ease, border-color .2s ease; }
.sa .sa-btn:active { transform: translateY(1px); }
.sa .sa-btn--l { background: var(--botao); color: var(--sobre-botao); } .sa .sa-btn--l:hover { background: var(--botao-e); }
.sa .sa-btn--n { background: var(--navy); color: #fff; } .sa .sa-btn--n:hover { background: var(--navy-h); }
.sa .sa-btn--c { background: #fff; border-color: var(--linha); color: var(--navy); } .sa .sa-btn--c:hover { border-color: var(--navy); }
.sa .sa-btn--vidro { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.35); color: #fff; }
.sa .sa-btn--vidro:hover { background: rgba(255,255,255,.18); }
.sa .sa-rot { display: inline-flex; align-items: center; gap: .7rem; font-size: .78rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--laranja); }
.sa .sa-rot::before { content: ""; width: 28px; height: 2px; background: currentColor; }
.sa h2.sa-h2 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); letter-spacing: -.03em; line-height: 1.1; margin: .7rem 0 1rem; color: var(--navy); }
.sa .sa-sec { padding: 92px 0; }
.sa .sa-sec--junta { padding-top: 0; }
.sa .sa-topo-capa { position: relative; }
.sa .sa-cond--solta { margin-top: 1.2rem; }
.sa .sa-depois { margin: 1.4rem 0 0; }
.sa .sa-suave { color: var(--suave); }

/* topo */
.sa-topo .sa-w { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 88px; }
.sa .sa-marca { display: flex; align-items: center; gap: .7rem; font-weight: 800; letter-spacing: -.01em; color: var(--navy); }
.sa .sa-marca img { width: 48px; height: auto; }
.sa .sa-menu { display: flex; gap: 2rem; color: var(--suave); font-weight: 600; font-size: .92rem; }
.sa .sa-menu a:hover { color: var(--navy); }

/* barra de layouts (demonstração / gerente) */
.sa-troca { background: var(--navy); color: #fff; font-size: 13px; }
.sa-troca .sa-w { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 50px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
.sa-troca span { opacity: .7; font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.sa-troca a, .sa-troca button { display: inline-flex; align-items: center; height: 32px; padding: 0 16px; border-radius: 999px; font-weight: 600; font-size: 13px; line-height: 1;
  font-family: inherit; border: 1px solid rgba(255,255,255,.3); color: #fff; background: transparent; cursor: pointer; }
.sa-troca a[aria-current="true"] { background: #fff; color: var(--navy); border-color: #fff; }
.sa-troca form { margin: 0; }
.sa-troca button { background: var(--laranja); border-color: var(--laranja); }

/* formulário (os dois layouts) */
.sa .sa-form { background: #fff; color: var(--texto); border: 1px solid var(--linha); border-radius: 28px; padding: 2rem; display: grid; gap: 1rem; }
.sa .sa-form .sa-l2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.sa .sa-form label { display: grid; gap: .35rem; font-size: .85rem; font-weight: 700; color: #334155; margin: 0; }
.sa .sa-form input:not([type=checkbox]), .sa .sa-form select, .sa .sa-form textarea { width: 100%; font-weight: 500; font-size: 1rem; line-height: 1.3; font-family: inherit;
  height: 48px; border: 1px solid var(--linha); border-radius: 999px; padding: 0 1.1rem; background: #FAFAF7; color: var(--texto); margin: 0; }
.sa .sa-form textarea { height: 104px; border-radius: 22px; padding: .8rem 1.1rem; resize: vertical; }
.sa .sa-form input:focus, .sa .sa-form select:focus, .sa .sa-form textarea:focus { outline: 2px solid var(--laranja); outline-offset: 1px; }
.sa .sa-form .sa-ok { display: flex; gap: .6rem; align-items: flex-start; font-weight: 500; font-size: .84rem; color: var(--suave); }
.sa .sa-form .sa-ok input { margin-top: .2rem; width: 18px; height: 18px; accent-color: var(--laranja); flex: 0 0 18px; }
.sa .sa-form .sa-btn { width: 100%; }
.sa .sa-isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sa .sa-aviso { border-radius: 20px; padding: 1rem 1.2rem; font-weight: 600; }
.sa .sa-aviso--ok { background: #E7F6EC; color: #146C2E; }
.sa .sa-aviso--erro { background: #FDECEC; color: #8F1A1A; }

/* resultado da busca de P/N */
.sa .sa-achados { display: grid; gap: 12px; }
.sa .sa-achado { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem 1.2rem; align-items: center; background: #fff;
  border: 1px solid var(--linha); border-radius: 22px; padding: 1rem 1.2rem; }
.sa .sa-achado b { display: block; color: var(--navy); font-size: 1.05rem; }
.sa .sa-achado small { color: var(--suave); }
.sa .sa-cond { display: inline-flex; gap: .35rem; flex-wrap: wrap; margin-top: .4rem; }
.sa .sa-cond span { padding: .15rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .04em; background: #EEF2F8; color: var(--navy); }
.sa .sa-busca { display: flex; gap: .5rem; background: #fff; border-radius: 999px; padding: 6px; max-width: 560px; border: 1px solid var(--linha); }
.sa .sa-busca input { flex: 1; min-width: 0; border: 0; outline: 0; font-weight: 500; font-size: 1rem; font-family: inherit; padding: 0 1.1rem;
  background: transparent; color: var(--texto); height: 48px; margin: 0; }
.sa .sa-busca .sa-btn { flex: 0 0 auto; }
/* (v158) O campo da busca sem moldura própria (a regra geral dos campos, do aprova.css, ganhava e desenhava uma
   pílula com borda dentro da pílula branca da busca). */
.sa .sa-busca input[name]:not([type=checkbox]):not([type=radio]) { flex: 1; width: auto; min-width: 0; height: 48px; padding: 0 1.1rem;
  border: 0; border-radius: 999px; box-shadow: none; background: transparent; }

/* (v1.10) O rodapé como o do site das lojas: o nome e o endereço, o horário, o contato e os links em colunas; embaixo,
   a linha fina, quem é a empresa e o "Site por Stargex Tecnologia". As cores vêm das variáveis (claro ou escuro). */
.sa .sa-rodape { --rodape-fundo: rgba(16, 33, 63, .045); --rodape-texto: var(--suave); --rodape-forte: var(--navy);
  --rodape-titulo: #7A889C; --rodape-linha: var(--linha);
  padding: 64px 0 28px; background: var(--rodape-fundo); color: var(--rodape-texto); font-size: .94rem; line-height: 1.55;
  border-top: 1px solid var(--rodape-linha); }
.sa .sa-rodape p { margin: 0; }
.sa .sa-rodape__grade { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, .9fr) minmax(0, 1.3fr) minmax(0, .9fr); gap: 40px; }
.sa .sa-rodape__col p + p, .sa .sa-rodape__casa p + p { margin-top: 6px; }
.sa .sa-rodape__nome { color: var(--rodape-forte); font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; line-height: 1.25; }
.sa .sa-rodape .sa-rodape__frase { margin: 8px 0 12px; }
.sa .sa-rodape .sa-rodape__titulo { margin-bottom: 12px; color: var(--rodape-titulo); font-weight: 700; font-size: .8rem; }
.sa .sa-rodape a { color: var(--rodape-forte); }
.sa .sa-rodape a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sa .sa-rodape__rede { display: inline-flex; align-items: center; gap: 9px; min-height: 28px; max-width: 100%; }
.sa .sa-rodape__rede svg { flex: none; }
.sa .sa-rodape__rede span { min-width: 0; overflow-wrap: anywhere; }
.sa .sa-rodape__fim { display: flex; justify-content: space-between; gap: 6px 24px; flex-wrap: wrap; margin-top: 48px; padding-top: 22px;
  border-top: 1px solid var(--rodape-linha); color: var(--rodape-titulo); font-size: .82rem; }
.sa .sa-rodape__fim a { font-weight: 700; }
/* O WhatsApp redondo fica no canto de baixo: em tela menor que 1320 px, o "Site por" anda para o lado e não fica embaixo dele. */
@media (max-width: 1320px) { .sa .sa-rodape--whats .sa-rodape__fim { padding-right: 84px; } }
@media (max-width: 960px) {
  .sa .sa-rodape__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  .sa .sa-rodape__casa { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .sa .sa-rodape { padding: 44px 0 calc(26px + env(safe-area-inset-bottom)); }
  .sa .sa-rodape--whats .sa-rodape__fim { padding-right: 64px; }
  .sa .sa-rodape__grade { gap: 28px 20px; }
  /* No celular, o contato numa faixa só (os três lado a lado, quebrando se precisar) e o horário ao lado dos links. */
  .sa .sa-rodape__col--contato { grid-column: 1 / -1; order: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
  .sa .sa-rodape__col--contato .sa-rodape__titulo { flex-basis: 100%; margin-bottom: 4px; }
  .sa .sa-rodape__col--contato p + p { margin-top: 0; }
  .sa .sa-rodape__col--horario { order: 2; }
  .sa .sa-rodape__col--links { order: 3; }
  .sa .sa-rodape__fim { flex-direction: column; margin-top: 32px; }
}

/* (v1.10) Onde estamos: o endereço e os botões do GPS à esquerda; a foto da fachada (se tiver) e o mapa à direita. */
.sa .sa-onde__grade { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); gap: 56px; align-items: center; }
.sa .sa-onde__endereco { display: grid; gap: 2px; margin: 4px 0 0; font-style: normal; font-size: 1.04rem; }
.sa .sa-onde__endereco b { color: var(--navy); font-size: 1.14rem; }
.sa .sa-onde__endereco span { color: var(--suave); }
.sa .sa-onde__horario { display: grid; gap: 2px; margin: 18px 0 0; }
.sa .sa-onde__horario span { color: var(--suave); font-size: .78rem; font-weight: 700; }
.sa .sa-onde__acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.sa .sa-onde__midia { display: grid; gap: 14px; min-width: 0; }
.sa .sa-onde__grade--foto .sa-onde__midia { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.sa .sa-onde__foto, .sa .sa-onde__mapa { margin: 0; overflow: hidden; border-radius: 24px; border: 1px solid var(--linha); background: #E7EBF1; }
.sa .sa-onde__foto img { display: block; width: 100%; height: 400px; object-fit: cover; }
.sa .sa-onde__mapa iframe { display: block; width: 100%; height: 400px; border: 0; }
@media (max-width: 860px) {
  .sa .sa-onde__grade { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .sa .sa-onde__grade--foto .sa-onde__midia { grid-template-columns: minmax(0, 1fr); }
  .sa .sa-onde__foto img { height: auto; aspect-ratio: 16 / 9; }
  .sa .sa-onde__mapa iframe { height: 260px; }
  .sa .sa-onde__foto, .sa .sa-onde__mapa { border-radius: 20px; }
}
@media (max-width: 640px) {
  .sa .sa-onde__acoes .sa-btn { flex: 1 1 100%; }
  .sa .sa-onde__mapa iframe { height: 230px; }
}

/* ================================================= Ficha técnica (claro) */
.sa--ficha { background: var(--papel); background-image: linear-gradient(rgba(16,33,63,.045) 1px, transparent 1px),
  linear-gradient(90deg, rgba(16,33,63,.045) 1px, transparent 1px); background-size: 32px 32px; }
.sa--ficha .sa-capa .sa-w { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; padding-top: 24px; padding-bottom: 80px; }
.sa--ficha h1 { font-size: clamp(2.4rem, 4.8vw, 4rem); line-height: 1.03; letter-spacing: -.035em; margin: 1rem 0; color: var(--navy); }
.sa--ficha .sa-capa p { color: var(--suave); font-size: 1.08rem; max-width: 44ch; margin: 0 0 1.8rem; }
.sa .sa-acoes { display: flex; gap: .7rem; flex-wrap: wrap; }
.sa--ficha .sa-visual { position: relative; }
.sa--ficha .sa-visual .sa-foto { border-radius: 32px 32px 32px 120px; overflow: hidden; aspect-ratio: 5/4; box-shadow: 0 40px 80px rgba(16,33,63,.22); }
.sa .sa-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sa .sa-etq { position: absolute; left: -40px; bottom: -34px; width: 290px; background: #fff; border: 1.5px solid var(--navy); border-radius: 18px;
  padding: 14px 16px; box-shadow: 0 20px 40px rgba(16,33,63,.18); font-size: .8rem; }
.sa .sa-etq__t { display: flex; justify-content: space-between; align-items: center; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--suave); }
.sa .sa-etq__t span { background: #E6F4EA; color: #146C2E; border-radius: 999px; padding: .12rem .55rem; font-weight: 800; letter-spacing: .04em; }
.sa .sa-etq__pn { font-size: 1.2rem; font-weight: 800; margin: .35rem 0 .1rem; color: var(--navy); }
.sa .sa-etq dl { margin: .5rem 0 0; display: grid; grid-template-columns: auto 1fr; gap: .15rem .7rem; }
.sa .sa-etq dt { color: var(--suave); font-weight: 700; } .sa .sa-etq dd { margin: 0; font-weight: 600; }
.sa .sa-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: 36px; }
.sa .sa-cab p { max-width: 40ch; color: var(--suave); margin: 0; }
.sa .sa-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.sa .sa-card { background: #fff; border: 1px solid var(--linha); border-radius: 26px; overflow: hidden; display: flex; flex-direction: column; }
.sa .sa-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.sa .sa-card > div { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.sa .sa-card small { font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--laranja); font-size: .72rem; }
.sa .sa-card b { font-size: 1.2rem; letter-spacing: -.01em; color: var(--navy); }
.sa .sa-card p { margin: 0; color: var(--suave); font-size: .94rem; flex: 1; }
.sa .sa-card a { margin-top: .8rem; font-weight: 700; color: var(--navy); }
.sa .sa-card__icone { display: none; }
.sa .sa-procura { margin-top: 28px; display: grid; grid-template-columns: auto minmax(0, 560px); gap: 1rem 1.6rem; align-items: center;
  background: #fff; border: 1px solid var(--linha); border-radius: 999px; padding: 10px 10px 10px 28px; }
.sa .sa-procura b { color: var(--navy); }
.sa .sa-procura .sa-busca { border: 0; padding: 0; max-width: none; background: #F4F6FA; }
.sa .sa-rastro { background: var(--navy); color: #fff; border-radius: 40px; padding: 56px; display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: center; }
.sa .sa-rastro h2.sa-h2 { color: #fff; } .sa .sa-rastro p { color: rgba(255,255,255,.72); }
.sa .sa-passos { display: grid; gap: 12px; }
.sa .sa-passo { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1); border-radius: 20px; padding: 14px 16px; }
.sa .sa-passo i { width: 44px; height: 44px; border-radius: 999px; background: var(--laranja-claro); display: grid; place-items: center; font-style: normal; font-weight: 800; color: var(--sobre-laranja-claro); }
.sa .sa-passo b { display: block; } .sa .sa-passo span { color: rgba(255,255,255,.65); font-size: .9rem; }
.sa .sa-orc { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: start; }
.sa .sa-contato { display: grid; margin-top: 1.6rem; }
.sa .sa-contato div { display: flex; justify-content: space-between; gap: 1rem; padding: 14px 0; border-bottom: 1px dashed var(--linha); }
.sa .sa-contato span { color: var(--suave); } .sa .sa-contato b { text-align: right; }

/* ================================================= Hangar (capa escura) */
.sa--hangar { background: #F4F6FA; }
.sa--hangar .sa-topo { position: absolute; left: 0; right: 0; z-index: 5; }
.sa--hangar .sa-marca, .sa--hangar .sa-menu { color: #fff; } .sa--hangar .sa-menu a { color: rgba(255,255,255,.82); }
.sa--hangar .sa-menu a:hover { color: #fff; }
.sa .sa-capa-h { position: relative; min-height: 720px; color: #fff; display: flex; align-items: flex-end; padding-bottom: 64px;
  background: linear-gradient(90deg, rgba(9,19,38,.93) 0%, rgba(9,19,38,.72) 42%, rgba(9,19,38,.15) 100%),
    linear-gradient(0deg, rgba(9,19,38,.9), rgba(9,19,38,0) 45%), url(../img/site/aero-capa.webp) center/cover; }
.sa .sa-capa-h .sa-w { width: 100%; }
.sa .sa-selo { display: inline-flex; align-items: center; padding: .4rem .9rem; border-radius: 999px; background: rgba(240,122,26,.16);
  color: #FFB57A; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.sa--hangar h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: 1.02; letter-spacing: -.035em; margin: 1rem 0; max-width: 12ch; color: #fff; }
.sa .sa-capa-h p { max-width: 46ch; color: rgba(255,255,255,.8); font-size: 1.08rem; margin: 0 0 1.8rem; }
.sa .sa-capa-h .sa-busca { border: 0; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.sa .sa-dica { font-size: .82rem; color: rgba(255,255,255,.6); margin-top: .8rem; }
.sa .sa-faixa { background: var(--navy-e); color: #fff; }
/* (v201) A faixa com os destaques que a oficina tem (hoje dois: a aeronave parada e o mundo inteiro), cada um com o
   desenho dele; uma coluna por destaque no computador e um embaixo do outro no celular. */
.sa .sa-faixa .sa-w { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 1px; background: rgba(255,255,255,.08); padding: 0; }
.sa .sa-faixa .sa-w > div { background: var(--navy-e); padding: 1.7rem 1.6rem; display: flex; align-items: center; gap: 1.1rem; }
.sa .sa-faixa svg { flex: 0 0 48px; width: 48px; height: 48px; padding: 12px; border-radius: 999px; background: var(--laranja-claro-fundo); color: var(--laranja-claro); }
.sa .sa-faixa p { margin: 0; }
.sa .sa-faixa b { display: block; font-size: 1.5rem; line-height: 1.25; letter-spacing: -.02em; }
.sa .sa-faixa span { color: rgba(255,255,255,.62); font-size: .88rem; }
.sa .sa-lado { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; }
.sa .sa-lado--inv { grid-template-columns: 1fr 1.05fr; }
.sa--hangar .sa-foto { border-radius: 28px; overflow: hidden; aspect-ratio: 4/3; box-shadow: 0 30px 60px rgba(14,29,56,.18); }
.sa .sa-lista { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: .9rem; }
.sa .sa-lista li { display: flex; gap: .9rem; align-items: flex-start; }
.sa .sa-lista i { flex: 0 0 30px; height: 30px; border-radius: 999px; background: #FFF1E6; color: var(--laranja); display: grid; place-items: center;
  font-style: normal; font-weight: 800; font-size: .85rem; }
.sa .sa-lista b { display: block; } .sa .sa-lista span { color: var(--suave); font-size: .94rem; }
.sa .sa-branca { background: #fff; }
.sa .sa-banda { height: 340px; background: linear-gradient(0deg, rgba(14,29,56,.55), rgba(14,29,56,.1)), url(../img/site/aero-bancada.webp) center/cover; }
.sa .sa-escura { background: var(--navy-e); color: #fff; }
.sa .sa-escura h2.sa-h2 { color: #fff; } .sa .sa-escura p { color: rgba(255,255,255,.72); }
.sa .sa-escura .sa-form { border: 0; box-shadow: 0 30px 60px rgba(0,0,0,.3); }
.sa--hangar .sa-rodape { --rodape-fundo: var(--rodape-h); --rodape-texto: rgba(255,255,255,.74); --rodape-forte: #fff;
  --rodape-titulo: rgba(255,255,255,.52); --rodape-linha: rgba(255,255,255,.12); border-top: 0; }

@media (max-width: 860px) {
  .sa .sa-w { padding: 0 18px; }
  .sa .sa-menu, .sa .sa-topo .sa-btn { display: none; }
  .sa .sa-sec { padding: 64px 0; }
  .sa .sa-sec--junta { padding-top: 0; }
  .sa--ficha .sa-capa .sa-w { grid-template-columns: 1fr; gap: 40px; padding-bottom: 72px; }
  .sa .sa-etq { left: 12px; bottom: -40px; width: 250px; }
  .sa .sa-cards { grid-template-columns: 1fr; }
  .sa .sa-cab { flex-direction: column; align-items: flex-start; }
  .sa .sa-procura { grid-template-columns: 1fr; border-radius: 26px; padding: 18px; }
  .sa .sa-rastro { grid-template-columns: 1fr; padding: 32px 22px; border-radius: 28px; }
  .sa .sa-orc, .sa .sa-lado, .sa .sa-lado--inv { grid-template-columns: 1fr; gap: 32px; }
  .sa .sa-lado--inv .sa-foto { order: -1; }
  .sa .sa-form .sa-l2 { grid-template-columns: 1fr; }
  .sa .sa-form { padding: 1.4rem; }
  .sa .sa-acoes .sa-btn { flex: 1; }
  .sa .sa-capa-h { min-height: 640px; padding-bottom: 44px; background-position: 62% center; }
  .sa .sa-faixa .sa-w > div { padding: 1.3rem 18px; }
  .sa .sa-faixa b { font-size: 1.1rem; }
  .sa .sa-banda { height: 200px; }
  .sa .sa-busca .sa-btn { padding: 0 1rem; }
  .sa .sa-achado { grid-template-columns: 1fr; }
  .sa .sa-achado .sa-btn { width: 100%; }
}
.sa [id] { scroll-margin-top: 72px; }

/* ================================================= catálogo (todos os layouts) */
.sa .sa-centro { text-align: center; }
.sa .sa-btn--p { height: 40px; padding: 0 1.1rem; font-size: .88rem; }
/* (v161) Quatro por linha no computador (a página inicial agora abre com 24 peças: 6 linhas, não 8, e a busca com poucas
   peças deixa menos buraco na linha); três no notebook pequeno, dois no tablet e três no celular. */
.sa .sa-pecas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.sa .sa-peca { display: flex; flex-direction: column; gap: .35rem; background: #fff; border: 1.5px solid var(--linha); border-radius: 22px;
  padding: 1.1rem 1.2rem 1.2rem; transition: border-color .2s ease, transform .2s ease; color: var(--texto); }
.sa .sa-peca:hover { border-color: var(--navy); transform: translateY(-2px); }
.sa .sa-peca__topo { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: .68rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--laranja); }
.sa .sa-peca__topo .sa-cond { margin: 0; }
.sa .sa-peca__pn { font-size: 1.12rem; color: var(--navy); margin-top: .2rem; }
.sa .sa-peca__nome { font-size: 1rem; color: var(--texto); line-height: 1.3; }
.sa .sa-peca__apl { color: var(--suave); font-size: .84rem; }
.sa .sa-peca__pe { margin-top: auto; padding-top: .8rem; border-top: 1px dashed var(--linha); display: flex; justify-content: space-between;
  align-items: center; gap: .8rem; }
.sa .sa-peca__pe > div { display: grid; gap: .1rem; }
.sa .sa-peca__preco { font-size: 1.1rem; color: var(--navy); }
/* (v1.9) O preço em real com o dólar embaixo (o filtro moedas), pequeno e em verde. */
.sa .moedas { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; line-height: 1.15; }
.sa .moedas__real { white-space: nowrap; }
.sa .moedas__dolar { font-size: .72em; font-weight: 600; color: #0E7A4F; letter-spacing: 0; white-space: nowrap; }
.sa--galpao .moedas__dolar { color: #7EE2B0; }
.sa .sa-estoque { display: inline-flex; align-items: center; gap: .35rem; font-size: .76rem; font-weight: 700; color: #146C2E; }
.sa .sa-estoque::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
.sa .sa-estoque--nao { color: #A55A0B; }
/* (v161) A busca que acha uma peça só ("SJT503304"): o cartão deitado na largura toda, com a foto, o texto e o preço com
   o Comprar, em vez de um cartão pequeno sozinho com o resto da linha vazio (o Bruno achou feio). */
.sa .sa-peca--larga { grid-column: 1 / -1; display: grid; grid-template-columns: 196px minmax(0, 1fr) minmax(210px, 250px);
  grid-template-areas: "foto topo pe" "foto pn pe" "foto nome pe" "foto apl pe"; grid-template-rows: auto auto auto 1fr;
  column-gap: 28px; row-gap: .35rem; align-items: start; padding: 1.2rem; }
.sa .sa-peca--larga:hover { transform: none; }
.sa .sa-peca--larga .sa-peca__foto { grid-area: foto; margin: 0; }
.sa .sa-peca--larga .sa-peca__topo { grid-area: topo; justify-content: flex-start; gap: .9rem; padding-top: .3rem; }
.sa .sa-peca--larga .sa-peca__pn { grid-area: pn; margin: 0; font-size: 1.3rem; }
.sa .sa-peca--larga .sa-peca__nome { grid-area: nome; font-size: 1.08rem; line-height: 1.4; }
.sa .sa-peca--larga .sa-peca__apl { grid-area: apl; }
.sa .sa-peca--larga .sa-peca__pe { grid-area: pe; align-self: center; display: grid; grid-template-columns: minmax(0, 1fr);
  justify-content: stretch; gap: .9rem; margin: 0; padding: 0 0 0 28px; border-top: 0; border-left: 1px dashed var(--linha); }
.sa .sa-peca--larga .sa-peca__preco { font-size: 1.45rem; }
.sa .sa-peca--larga .sa-peca__pe form, .sa .sa-peca--larga .sa-peca__pe .sa-btn { width: 100%; }
.sa .sa-peca--larga .sa-peca__pe .sa-btn { height: 46px; }
.sa .sa-filtros { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: 22px; }
.sa .sa-filtros__busca { margin-left: auto; min-width: min(420px, 100%); }
.sa .sa-filtros__busca .sa-busca { max-width: none; }
.sa .sa-chip { display: inline-flex; align-items: center; height: 40px; padding: 0 1.1rem; border-radius: 999px; border: 1px solid var(--linha);
  background: #fff; font-weight: 700; font-size: .88rem; color: var(--navy); }
.sa .sa-chip--ativo { background: var(--navy); border-color: var(--navy); color: #fff; }
.sa--pagina .sa-topo { position: static !important; }
.sa--hangar.sa--pagina .sa-topo, .sa--galpao .sa-topo { background: var(--navy-e); }
.sa--hangar.sa--pagina { background: #F4F6FA; }

/* ================================================= Vitrine (claro, catálogo na frente) */
.sa--vitrine { background: #fff; }
.sa .sa-capa-v { text-align: center; padding: 40px 0 36px; }
.sa .sa-capa-v .sa-rot { justify-content: center; }
.sa--vitrine h1 { font-size: clamp(2.3rem, 4.6vw, 3.8rem); line-height: 1.04; letter-spacing: -.035em; margin: 1rem auto; max-width: 16ch; color: var(--navy); }
.sa .sa-capa-v p { color: var(--suave); font-size: 1.08rem; max-width: 52ch; margin: 0 auto 1.6rem; }
.sa .sa-capa-v .sa-busca { margin: 0 auto; box-shadow: 0 16px 40px rgba(16,33,63,.12); }
.sa .sa-vitrine-foto img { width: 100%; height: 380px; object-fit: cover; border-radius: 32px; display: block; }
.sa--vitrine .sa-catalogo { padding-top: 64px; }

/* ================================================= Galpão (escuro, industrial) */
.sa--galpao { --linha: rgba(255,255,255,.12); background: var(--galpao); color: #E6EBF3; }
.sa--galpao .sa-marca, .sa--galpao .sa-menu a { color: #fff; }
.sa--galpao h2.sa-h2 { color: #fff; }
.sa--galpao .sa-suave, .sa--galpao .sa-cab p, .sa--galpao .sa-lista span { color: rgba(230,235,243,.66); }
.sa .sa-capa-g .sa-w { display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: center; padding-top: 40px; padding-bottom: 64px; }
.sa--galpao h1 { font-size: clamp(2.4rem, 5vw, 4.3rem); line-height: 1; letter-spacing: -.04em; margin: 1rem 0; color: #fff; text-transform: uppercase; }
.sa .sa-capa-g p { color: rgba(230,235,243,.72); font-size: 1.06rem; max-width: 44ch; margin: 0 0 1.8rem; }
.sa .sa-capa-g__foto img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 28px; display: block; border: 1px solid rgba(255,255,255,.1); }
.sa .sa-numeros { border-top: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); }
.sa .sa-numeros .sa-w { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sa .sa-numeros div div, .sa .sa-numeros .sa-w > div { padding: 1.6rem 1.4rem; display: grid; gap: .1rem; border-left: 1px solid rgba(255,255,255,.1); }
.sa .sa-numeros .sa-w > div:first-child { border-left: 0; }
.sa .sa-numeros b { color: var(--laranja-claro); font-family: ui-monospace, Menlo, monospace; font-size: .9rem; }
.sa .sa-numeros span { font-size: 1.3rem; font-weight: 800; color: #fff; }
.sa .sa-numeros small { color: rgba(230,235,243,.6); }
.sa--galpao .sa-peca { background: var(--galpao-2); border-color: rgba(255,255,255,.1); color: #E6EBF3; }
.sa--galpao .sa-peca:hover { border-color: var(--laranja-claro); }
.sa--galpao .sa-peca__pn, .sa--galpao .sa-peca__preco, .sa--galpao .sa-peca__nome { color: #fff; }
.sa--galpao .sa-peca__apl { color: rgba(230,235,243,.6); }
.sa--galpao .sa-cond span { background: rgba(255,255,255,.1); color: #fff; }
.sa--galpao .sa-estoque { color: #6EE7A0; } .sa--galpao .sa-estoque--nao { color: #FDBA74; }
.sa--galpao .sa-btn--c { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }
.sa--galpao .sa-foto { border-radius: 28px; overflow: hidden; aspect-ratio: 4/3; }
.sa--galpao .sa-lista i { background: var(--laranja-claro-fundo); color: var(--laranja-claro); }
.sa--galpao .sa-contato span { color: rgba(230,235,243,.6); }
.sa--galpao .sa-contato div { border-color: rgba(255,255,255,.14); }
.sa--galpao .sa-form { background: #fff; border: 0; }
.sa--galpao .sa-rodape { --rodape-fundo: rgba(0,0,0,.22); --rodape-texto: rgba(230,235,243,.72); --rodape-forte: #fff;
  --rodape-titulo: rgba(230,235,243,.5); --rodape-linha: rgba(255,255,255,.1); }
.sa--galpao .sa-onde__endereco b { color: #fff; }
.sa--galpao .sa-onde__endereco span, .sa--galpao .sa-onde__horario span { color: rgba(230,235,243,.6); }
.sa--galpao .sa-onde__foto, .sa--galpao .sa-onde__mapa { border-color: rgba(255,255,255,.12); background: var(--galpao-2); }
.sa--galpao .sa-busca { background: var(--galpao-2); border-color: rgba(255,255,255,.14); }
.sa--galpao .sa-busca input { color: #fff; }
/* (v158) A busca do Galpão: o texto claro no fundo escuro (a regra do campo sem borda, mais forte, deixava o texto escuro). */
.sa--galpao .sa-busca input[name]:not([type=checkbox]):not([type=radio]) { color: #fff; }
.sa--galpao .sa-busca input[name]::placeholder { color: rgba(230, 235, 243, .55); }
.sa--galpao .sa-achado { background: var(--galpao-2); border-color: rgba(255,255,255,.1); }
.sa--galpao .sa-achado b { color: #fff; }

/* ================================================= Mostruário (branco, foto grande) */
.sa--mostruario { background: #FBFAF7; }
.sa .sa-capa-m .sa-w { position: relative; padding-top: 16px; padding-bottom: 40px; }
.sa .sa-capa-m__foto img { width: 100%; height: 560px; object-fit: cover; border-radius: 36px; display: block; }
.sa .sa-capa-m__cartao { position: absolute; left: 64px; bottom: 0; width: min(520px, calc(100% - 128px)); background: #fff; border-radius: 28px;
  padding: 2rem 2.2rem; box-shadow: 0 30px 70px rgba(16,33,63,.2); }
.sa--mostruario h1 { font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.06; letter-spacing: -.03em; margin: .8rem 0; color: var(--navy); }
.sa .sa-capa-m__cartao p { color: var(--suave); margin: 0 0 1.4rem; }
.sa--mostruario .sa-catalogo { padding-top: 110px; }
.sa--mostruario .sa-peca { border-radius: 28px; padding: 1.4rem 1.5rem; }

@media (max-width: 860px) {
  .sa .sa-pecas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sa .sa-filtros__busca { margin-left: 0; width: 100%; }
  .sa .sa-vitrine-foto img { height: 220px; border-radius: 24px; }
  .sa .sa-capa-g .sa-w { grid-template-columns: 1fr; gap: 28px; }
  .sa .sa-numeros .sa-w > div { padding: 1.2rem .9rem; }
  .sa .sa-numeros .sa-w > div:first-child { border-top: 0; }
  .sa .sa-capa-m__foto img { height: 300px; border-radius: 24px; }
  .sa .sa-capa-m__cartao { position: relative; left: auto; bottom: auto; z-index: 1; width: auto; margin-top: -48px; margin-left: 12px; margin-right: 12px; padding: 1.5rem; }
  .sa--mostruario .sa-catalogo { padding-top: 56px; }
}
@media (min-width: 861px) and (max-width: 1100px) { .sa .sa-pecas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sa--galpao .sa-chip { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }
.sa--galpao .sa-chip--ativo { background: var(--botao); border-color: var(--botao); color: var(--sobre-botao); }
.sa--galpao .sa-topo .sa-btn--n { background: var(--botao); color: var(--sobre-botao); }
/* (v1.4) Logo enviada pelo gerente (Site da empresa) */
.sa .sa-marca img.sa-logo { width: auto; max-width: 140px; height: 40px; object-fit: contain; }
/* (v126) A logo redonda (recortada no círculo pelo ajuste da logo, no Visual da página). */
.sa .sa-marca img.sa-logo.redonda { width: 40px; max-width: 40px; border-radius: 50%; object-fit: cover; }

/* (v127) O cabeçalho na cor escolhida no Visual da página (cor do site, escuro, branco ou outra), nos cinco layouts:
   o tema.css manda as cores (--topo-*), e o nome, o menu e o botão do topo trocam de cor para continuar lendo bem. */
.sa.sa--topo-livre .sa-topo { background: var(--topo-fundo); border-bottom: 1px solid var(--topo-linha); }
.sa.sa--topo-livre .sa-marca { color: var(--topo-texto); }
.sa.sa--topo-livre .sa-topo .sa-menu, .sa.sa--topo-livre .sa-topo .sa-menu a { color: var(--topo-texto-2); }
.sa.sa--topo-livre .sa-topo .sa-menu a:hover { color: var(--topo-texto); }
.sa.sa--topo-livre .sa-topo .sa-btn { background: var(--topo-botao); color: var(--topo-sobre-botao); border-color: transparent; }
.sa.sa--topo-livre .sa-topo .sa-btn:hover { background: var(--topo-botao-2); }

/* (v127) A cor do site nos fundos escuros (o Galpão inteiro, a faixa do orçamento do Hangar, a caixa da procedência):
   o tema.css manda uma versão que lê bem (--laranja-claro); sem cor escolhida, é o laranja de sempre. */
.sa--galpao .sa-rot, .sa .sa-escura .sa-rot, .sa .sa-rastro .sa-rot, .sa--galpao .sa-peca__topo { color: var(--laranja-claro); }

/* ------------------------------------------------------------ (v1.7) a loja do site
   O carrinho no topo, a foto na vitrine, a página do produto, o carrinho, o fechamento da compra e a página do
   pedido. O miolo das telas da loja é claro em todos os layouts (o topo segue o layout). */
.sa [hidden] { display: none !important; }
.sa .sa-topo__lado { display: flex; align-items: center; gap: .7rem; }
.sa .sa-carrinho { position: relative; display: inline-flex; align-items: center; gap: .45rem; height: 44px; padding: 0 1rem; border-radius: 999px;
  border: 1px solid var(--linha); background: #fff; color: var(--navy); font-weight: 700; font-size: .9rem; line-height: 1; white-space: nowrap; }
.sa .sa-carrinho:hover { border-color: var(--navy); }
.sa .sa-carrinho svg { width: 20px; height: 20px; flex: none; }
.sa .sa-carrinho b { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--botao); color: var(--sobre-botao); font-size: .74rem; }
.sa--hangar .sa-carrinho, .sa--galpao .sa-carrinho, .sa--loja-escuro .sa-carrinho { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); color: #fff; }
.sa.sa--topo-livre .sa-topo .sa-carrinho { background: transparent; border-color: var(--topo-linha); color: var(--topo-texto); }

/* a foto na vitrine. (v1.9) Quadrada e inteira, no branco das fotos de peça (como nas lojas; o "Ajustar" da vitrine
   enquadra). Sem foto, as iniciais da peça na cor do site, do mesmo tamanho: a grade fica alinhada. */
.sa .sa-peca__foto { position: relative; display: grid; place-items: center; aspect-ratio: 1; margin-bottom: .55rem; border-radius: 16px;
  overflow: hidden; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--linha); color: var(--suave); font-size: .9rem; font-weight: 700; }
.sa .sa-peca__foto img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sa .sa-peca__foto--vazia { background: #FDF1E6; background: color-mix(in oklab, var(--laranja) 11%, #FFFFFF); box-shadow: none;
  color: var(--laranja); font-size: clamp(1.6rem, 4.2vw, 2.6rem); font-weight: 800; letter-spacing: -.02em; }
.sa .sa-peca__selo { display: none; }
.sa .sa-peca__nome { display: block; }
.sa .sa-peca__nome:hover { text-decoration: underline; text-underline-offset: 3px; }
.sa .sa-peca__pe form { margin: 0; }
.sa--galpao .sa-peca__foto { box-shadow: none; }
.sa--galpao .sa-peca__foto--vazia { background: rgba(255,255,255,.07); color: var(--laranja-claro); }

/* (v1.9) No celular, como o cardápio das lojas: três por linha, a foto quadrada, o P/N, o nome em duas linhas e o
   preço. A condição (NS, OH...) vai no canto da foto e o cartão inteiro abre a página do produto. */
@media (max-width: 640px) {
  .sa .sa-pecas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 10px; }
  .sa .sa-peca, .sa--mostruario .sa-peca, .sa--galpao .sa-peca { position: relative; gap: .2rem; padding: 0; border: 0; border-radius: 0;
    background: transparent; transform: none; }
  .sa .sa-peca:hover { transform: none; }
  .sa .sa-peca__foto { margin-bottom: .3rem; border-radius: 14px; }
  .sa .sa-peca__selo { position: absolute; left: 5px; top: 5px; display: block; max-width: calc(100% - 10px); overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; padding: 2px 7px; border-radius: 999px; background: rgba(16, 33, 63, .78); color: #FFFFFF; font-size: .62rem;
    font-weight: 800; letter-spacing: .04em; line-height: 1.4; }
  .sa .sa-peca__topo, .sa .sa-peca__apl, .sa .sa-peca__pe form, .sa .sa-peca__pe > .sa-btn { display: none; }
  .sa .sa-peca__pn { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .7rem; letter-spacing: 0; }
  .sa .sa-peca__nome { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .8rem;
    line-height: 1.28; overflow-wrap: anywhere; }
  /* (v161) O nome sempre com a altura de duas linhas: os preços da mesma fileira ficam alinhados. */
  .sa .sa-peca:not(.sa-peca--larga) .sa-peca__nome { min-height: 2.56em; }
  .sa .sa-peca__nome::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
  .sa .sa-peca__nome:hover { text-decoration: none; }
  .sa .sa-peca__nome:focus-visible { outline: none; }
  .sa .sa-peca__nome:focus-visible::after { outline: 3px solid var(--laranja); outline-offset: 3px; }
  .sa .sa-peca__pe { margin-top: .15rem; padding-top: 0; border-top: 0; display: block; }
  .sa .sa-peca__pe > div { gap: .15rem; }
  .sa .sa-peca__preco { font-size: .9rem; letter-spacing: -.01em; }
  .sa .sa-peca__preco .moedas__dolar { font-size: .74em; }
  .sa .sa-estoque { gap: .25rem; font-size: .64rem; }
  .sa .sa-estoque::before { width: 6px; height: 6px; }
  /* (v161) O cartão deitado no celular: a foto ao lado do P/N, do nome e do preço, e o Comprar embaixo, na largura
     toda (o cartão normal esconde o botão: ali o cartão inteiro abre o produto). */
  .sa .sa-peca.sa-peca--larga { grid-template-columns: 104px minmax(0, 1fr); grid-template-areas: "foto pn" "foto nome" "foto preco" "botao botao";
    grid-template-rows: auto auto 1fr auto; column-gap: 14px; row-gap: .3rem; padding: 12px; border: 1.5px solid var(--linha);
    border-radius: 22px; background: #fff; }
  .sa--galpao .sa-peca.sa-peca--larga { background: var(--galpao-2); border-color: rgba(255,255,255,.1); }
  .sa .sa-peca--larga .sa-peca__foto { border-radius: 14px; }
  .sa .sa-peca--larga .sa-peca__selo { display: none; }
  .sa .sa-peca--larga .sa-peca__pn { font-size: .82rem; white-space: normal; overflow-wrap: anywhere; }
  .sa .sa-peca--larga .sa-peca__nome { -webkit-line-clamp: 3; font-size: .9rem; }
  .sa .sa-peca--larga .sa-peca__nome::after { display: none; }
  .sa .sa-peca--larga .sa-peca__pe { display: contents; }
  .sa .sa-peca--larga .sa-peca__pe > div { grid-area: preco; align-self: end; }
  .sa .sa-peca--larga .sa-peca__pe form, .sa .sa-peca--larga .sa-peca__pe > .sa-btn { grid-area: botao; display: flex; margin-top: .5rem; }
  .sa .sa-peca--larga .sa-peca__pe form .sa-btn { width: 100%; }
  .sa .sa-peca--larga .sa-peca__preco { font-size: 1.05rem; }
  /* Os tipos do catálogo em duas colunas iguais (antes o último caía sozinho, torto, na linha de baixo); o que sobra
     sozinho no fim ocupa a linha inteira. */
  .sa .sa-filtros--tipos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sa .sa-filtros--tipos .sa-chip { justify-content: center; min-width: 0; padding: 0 .8rem; }
  .sa .sa-filtros--tipos .sa-chip:last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* A página do catálogo no celular: as peças começam mais perto do topo. */
  .sa.sa--pagina .sa-catalogo { padding-top: 26px; }
  .sa.sa--pagina .sa-catalogo .sa-cab { gap: .5rem; margin-bottom: 20px; }
  .sa.sa--pagina .sa-catalogo h2.sa-h2 { margin-bottom: .1rem; }
}

/* a moldura das telas da loja */
.sa--loja { background: var(--papel); min-height: 100vh; display: flex; flex-direction: column; }
.sa--loja .sa-topo { background: #fff; border-bottom: 1px solid var(--linha); }
.sa--loja.sa--loja-escuro .sa-topo { background: var(--navy-e); border-bottom-color: transparent; }
.sa--loja.sa--loja-escuro .sa-marca { color: #fff; }
.sa--loja.sa--loja-escuro .sa-rodape { --rodape-fundo: var(--navy-e); --rodape-texto: rgba(255,255,255,.74); --rodape-forte: #fff;
  --rodape-titulo: rgba(255,255,255,.52); --rodape-linha: rgba(255,255,255,.12); border-top: 0; }
.sa--loja.sa--loja-escuro .sa-menu { color: rgba(255,255,255,.72); }
.sa--loja.sa--loja-escuro .sa-menu a:hover { color: #fff; }
.sa .sa-loja { flex: 1; padding: 36px 0 84px; }
.sa .sa-loja__titulo { font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: -.03em; line-height: 1.12; color: var(--navy); margin: 0 0 1.4rem; }
.sa .sa-avisos { display: grid; gap: .6rem; margin-bottom: 1.2rem; }
.sa .sa-aviso--info { background: #FFF4E5; color: #7A4306; }
.sa .sa-trilha { display: flex; gap: .5rem; align-items: center; font-size: .86rem; color: var(--suave); margin-bottom: 1.2rem; }
.sa .sa-trilha a { color: var(--navy); font-weight: 600; }

/* o produto */
.sa .sa-produto { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.sa .sa-galeria__foto { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 28px; background: #fff; border: 1px solid var(--linha); overflow: hidden; }
.sa .sa-galeria__foto img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* (v1.9) A foto inteira é o botão de ampliar (zoom-foto.js). */
/* (v1.9) O link ocupa o quadro inteiro (a foto inteira dentro dele, sem cortar). No celular, a foto é quadrada. */
@media (max-width: 640px) { .sa .sa-galeria__foto { aspect-ratio: 1; } }
.sa .sa-galeria__ampliar { position: absolute; inset: 0; display: block; cursor: zoom-in; border-radius: inherit; }
.sa .sa-galeria__ampliar:focus-visible { outline: 3px solid var(--botao); outline-offset: -3px; }
.sa .sa-sem-foto { display: grid; gap: .3rem; text-align: center; color: var(--navy); font-size: 1.5rem; font-weight: 800; }
.sa .sa-sem-foto small { font-size: .9rem; font-weight: 600; color: var(--suave); }
.sa .sa-galeria__mini { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.sa .sa-galeria__botao { width: 76px; height: 76px; padding: 0; border-radius: 16px; border: 2px solid var(--linha); background: #fff; overflow: hidden; cursor: pointer; }
.sa .sa-galeria__botao.ativo { border-color: var(--botao); }
.sa .sa-galeria__botao img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sa .sa-produto__nome { font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -.03em; line-height: 1.12; color: var(--navy); margin: .6rem 0 .4rem; }
.sa .sa-produto__pn { font-size: 1.05rem; color: var(--navy); margin: 0 0 .3rem; }
.sa .sa-produto__pn small { color: var(--suave); font-size: .8rem; }
.sa .sa-produto__info > p { margin: 0 0 .3rem; }
/* (v201) O tipo da peça e, do lado, o Compartilhar (o WhatsApp, os outros apps e o Copiar o link), num balão. */
.sa .sa-produto__topo { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.sa .sa-partilha { position: relative; flex: 0 0 auto; }
.sa .sa-partilha > summary { list-style: none; display: inline-flex; align-items: center; gap: .45rem; height: 38px; padding: 0 1rem 0 .85rem;
  border-radius: 999px; border: 1px solid var(--linha); background: #fff; color: var(--navy); font-weight: 700; font-size: .86rem; cursor: pointer;
  user-select: none; transition: border-color .2s ease; }
.sa .sa-partilha > summary::-webkit-details-marker { display: none; }
.sa .sa-partilha > summary::marker { content: ""; }
.sa .sa-partilha > summary:hover, .sa .sa-partilha[open] > summary { border-color: var(--navy); }
.sa .sa-partilha > summary:focus-visible { outline: 3px solid var(--botao); outline-offset: 2px; }
.sa .sa-partilha > summary svg { width: 18px; height: 18px; }
.sa .sa-partilha__opcoes { position: absolute; right: 0; top: calc(100% + 8px); z-index: 46; display: grid; min-width: 248px; padding: 6px;
  background: #fff; border: 1px solid var(--linha); border-radius: 20px; box-shadow: 0 20px 44px rgba(14,29,56,.16);
  transform-origin: calc(100% - 24px) 0; animation: sa-partilha .16s cubic-bezier(.2, .8, .2, 1); }
.sa .sa-partilha__opcoes a, .sa .sa-partilha__opcoes button { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .72rem .85rem;
  border: 0; border-radius: 14px; background: none; font: inherit; font-size: .94rem; font-weight: 600; color: var(--navy); text-align: left; cursor: pointer; }
.sa .sa-partilha__opcoes [hidden] { display: none; }
.sa .sa-partilha__opcoes a:hover, .sa .sa-partilha__opcoes button:hover { background: #F2F5F9; }
.sa .sa-partilha__opcoes a:focus-visible, .sa .sa-partilha__opcoes button:focus-visible { outline: 2px solid var(--botao); outline-offset: -2px; }
.sa .sa-partilha__opcoes svg { flex: 0 0 22px; width: 22px; height: 22px; color: var(--laranja); }
.sa .sa-partilha__opcoes [data-partilhar="whats"] svg { color: #1DA851; }
.sa .sa-partilha__opcoes .copiado { color: #146C2E; }
.sa .sa-partilha__opcoes .copiado svg { color: #146C2E; }
@keyframes sa-partilha { from { opacity: 0; transform: scale(.94) translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sa .sa-partilha__opcoes { animation: none; } }
.sa .sa-compra-caixa { margin-top: 1.6rem; background: #fff; border: 1px solid var(--linha); border-radius: 28px; padding: 1.4rem; display: grid; gap: 1rem; }
.sa .sa-compra-caixa__preco { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem 1rem; flex-wrap: wrap; }
.sa .sa-compra-caixa__preco b { font-size: 2rem; letter-spacing: -.02em; color: var(--navy); }
.sa .sa-compra-caixa__form { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); gap: .6rem; margin: 0; }
.sa .sa-qtd { display: inline-flex; align-items: center; height: 48px; border: 1px solid var(--linha); border-radius: 999px; background: #FAFAF7; }
.sa .sa-qtd button { display: grid; place-items: center; width: 42px; height: 46px; padding: 0; border: 0; border-radius: 999px; background: transparent;
  color: var(--navy); font-family: inherit; font-size: 1.35rem; font-weight: 700; line-height: 1; cursor: pointer; }
.sa .sa-qtd button:hover { background: #EEF2F8; }
/* (v158) O número do meio sem moldura própria: a regra geral dos campos (aprova.css, que vem depois e com
   input:not(...) x4) ganhava e desenhava uma pílula dentro da pílula. Os dois :not() a mais passam na frente dela. */
.sa .sa-qtd input[type=number]:not([type=checkbox]):not([type=radio]) { flex: 0 0 auto; width: 44px; min-width: 0; height: 46px; min-height: 0;
  margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent;
  text-align: center; font-family: inherit; font-size: 1rem; font-weight: 700; color: var(--texto); -moz-appearance: textfield; appearance: textfield; }
.sa .sa-qtd input[type=number]:not([type=checkbox]):not([type=radio]):focus { outline: 2px solid var(--botao); outline-offset: -2px; border-radius: 10px; }
.sa .sa-qtd input::-webkit-inner-spin-button, .sa .sa-qtd input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.sa .sa-produto__cotar { justify-self: start; color: var(--navy); font-weight: 700; font-size: .92rem; text-decoration: underline; text-underline-offset: 3px; }
.sa .sa-produto__texto { margin-top: 56px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.sa .sa-produto__texto h2 { font-size: 1.3rem; color: var(--navy); margin: 0 0 .6rem; }
.sa .sa-produto__texto p { margin: 0 0 .8rem; }
/* (v203) O texto da página em linhas: as observações da loja antiga ("LOC.: ...", "COND.: ...") ficam juntas, com o
   rótulo em negrito; os títulos ("Descrição", "PNs") pequenos; um traço entre os blocos de dois produtos. */
.sa .sa-sobre p { margin: 0 0 .4rem; overflow-wrap: anywhere; }
.sa .sa-sobre .sa-sobre__campo b { color: var(--navy); font-weight: 700; }
.sa .sa-sobre .sa-sobre__titulo { margin: .95rem 0 .35rem; font-size: 1rem; color: var(--navy); }
.sa .sa-sobre .sa-sobre__titulo:first-child { margin-top: 0; }
.sa .sa-sobre .sa-sobre__sep { border: 0; border-top: 1px solid var(--linha); margin: 1rem 0; }
.sa .sa-garantias { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sa .sa-garantias li { display: grid; gap: .2rem; background: #fff; border: 1px solid var(--linha); border-radius: 20px; padding: 1rem 1.2rem; }
.sa .sa-garantias b { color: var(--navy); }
.sa .sa-garantias span { color: var(--suave); font-size: .9rem; }

/* o carrinho */
.sa .sa-carrinho-pagina { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
.sa .sa-linhas { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sa .sa-linha { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto auto auto; grid-template-areas: "foto texto qtd total tirar"; gap: 16px;
  align-items: center; background: #fff; border: 1px solid var(--linha); border-radius: 24px; padding: 12px 16px 12px 12px; }
.sa .sa-linha__foto { grid-area: foto; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 16px; overflow: hidden; background: #EEF2F8;
  color: var(--suave); font-size: .7rem; font-weight: 700; text-align: center; padding: 4px; }
.sa .sa-linha__foto img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 12px; }
.sa .sa-linha__texto { grid-area: texto; display: grid; gap: .15rem; min-width: 0; }
.sa .sa-linha__texto b { color: var(--navy); line-height: 1.25; }
.sa .sa-linha__texto small { font-size: .82rem; }
.sa .sa-linha__qtd { grid-area: qtd; margin: 0; }
.sa .sa-linha__total { grid-area: total; min-width: 96px; text-align: right; color: var(--navy); }
.sa .sa-linha__tirar { grid-area: tirar; margin: 0; }
.sa .sa-linha__tirar button { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--linha); background: #fff; color: #8F1A1A; cursor: pointer; }
.sa .sa-linha__tirar button:hover { border-color: #8F1A1A; }
.sa .sa-linha__tirar svg { width: 18px; height: 18px; }
.sa .sa-resumo { background: #fff; border: 1px solid var(--linha); border-radius: 28px; padding: 1.4rem; display: grid; gap: .8rem; }
.sa .sa-resumo h2 { margin: 0; font-size: 1.2rem; color: var(--navy); }
.sa .sa-resumo__linha, .sa .sa-resumo__total { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.sa .sa-resumo__total { border-top: 1px dashed var(--linha); padding-top: .8rem; font-size: 1.15rem; }
.sa .sa-resumo__total b, .sa .sa-resumo__linha b { color: var(--navy); }
.sa .sa-resumo .sa-btn { width: 100%; }
.sa .sa-resumo__itens { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .9rem; }
.sa .sa-resumo__itens li { display: flex; justify-content: space-between; gap: 1rem; }
.sa .sa-resumo__itens li span { min-width: 0; }
.sa .sa-resumo__itens li b { white-space: nowrap; }
.sa .sa-vazio { display: grid; justify-items: center; gap: .6rem; text-align: center; background: #fff; border: 1px solid var(--linha); border-radius: 28px; padding: 3rem 2rem; }
.sa .sa-vazio b { font-size: 1.2rem; color: var(--navy); }
.sa .sa-vazio p { margin: 0 0 .6rem; }
/* (v161) O carrinho vazio com a última compra deste navegador: esperando o pagamento (Ver o Pix · Mudar a compra) ou
   cancelada pela oficina (Pôr os produtos de volta). No celular, os botões embaixo, na largura toda. */
.sa .sa-ultima { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.2rem 2rem; align-items: center; background: #fff;
  border: 1px solid var(--linha); border-radius: 28px; padding: 1.6rem 1.8rem; }
.sa .sa-ultima__texto { display: grid; gap: .5rem; justify-items: start; min-width: 0; }
.sa .sa-ultima__texto h2 { margin: 0; font-size: clamp(1.25rem, 2.4vw, 1.55rem); letter-spacing: -.02em; line-height: 1.2; color: var(--navy); }
.sa .sa-ultima__texto p { margin: 0; max-width: 62ch; }
.sa .sa-ultima__texto p b { color: var(--navy); }
.sa .sa-ultima__acoes { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end; }
.sa .sa-ultima__acoes form { margin: 0; }

/* fechar a compra */
.sa .sa-checkout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; margin: 0; }
.sa .sa-checkout__passos { display: grid; gap: 18px; }
.sa .sa-passo-compra h2 { display: flex; align-items: center; gap: .7rem; margin: 0; font-size: 1.2rem; color: var(--navy); }
.sa .sa-passo-compra h2 i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; background: var(--navy); color: #fff; font-style: normal; font-size: .9rem; }
.sa .sa-form .sa-l3 { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, .8fr); gap: 1rem; }
.sa .sa-form .sa-l2 .sa-l2 { gap: .8rem; }
.sa .sa-opcoes, .sa .sa-fretes { display: grid; gap: .6rem; }
.sa .sa-form .sa-opcao { display: flex; align-items: center; gap: .8rem; padding: .9rem 1.1rem; border: 1.5px solid var(--linha); border-radius: 20px;
  background: #FAFAF7; cursor: pointer; font-weight: 500; }
.sa .sa-form .sa-opcao:has(input:checked) { border-color: var(--botao); background: #fff; }
.sa .sa-form .sa-opcao input[type=radio] { appearance: auto; width: 20px; height: 20px; flex: 0 0 20px; margin: 0; padding: 0;
  border: 0; border-radius: 50%; background: none; accent-color: var(--botao); }
.sa .sa-opcao span { display: grid; gap: .1rem; flex: 1; min-width: 0; }
.sa .sa-opcao b { color: var(--navy); font-size: .95rem; }
.sa .sa-opcao small { color: var(--suave); font-size: .82rem; font-weight: 500; }
.sa .sa-opcao em { font-style: normal; font-weight: 800; color: var(--navy); white-space: nowrap; }
.sa .sa-endereco { display: grid; gap: 1rem; }
.sa .sa-cep { display: grid; grid-template-columns: minmax(0, 240px) auto; gap: .8rem; align-items: end; justify-content: start; }
.sa .sa-cep__msg { margin: 0; min-height: 1.3em; font-size: .86rem; color: var(--suave); }
.sa .sa-cep__msg.erro { color: #8F1A1A; }
.sa .sa-pagamento { display: grid; gap: .2rem; padding: 1rem 1.2rem; border-radius: 20px; background: #EEF2F8; }
.sa .sa-pagamento b { color: var(--navy); }
.sa .sa-pagamento span { color: var(--suave); font-size: .9rem; }
.sa .sa-resumo--fixo { position: sticky; top: 20px; }

/* o pedido (a página de quem comprou) */
.sa .sa-pedido__topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.2rem 2rem; flex-wrap: wrap; }
.sa .sa-pedido__topo .sa-loja__titulo { margin: .5rem 0 .4rem; }
.sa .sa-pedido__topo p { max-width: 640px; margin: 0; }
.sa .sa-pedido__acoes { display: flex; flex-wrap: wrap; gap: .6rem; }
.sa .sa-pedido__acoes form { margin: 0; }
.sa .sa-etapas { list-style: none; margin: 28px 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.sa .sa-etapas li { display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem; border-radius: 999px; background: #fff; border: 1px solid var(--linha);
  color: var(--suave); font-weight: 600; font-size: .9rem; }
.sa .sa-etapas i { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 999px; background: #EEF2F8; color: var(--navy); font-style: normal; font-size: .8rem; }
.sa .sa-etapas li.feito { color: var(--navy); background: #F1FAF4; border-color: #BFE3CB; }
.sa .sa-etapas li.feito i { background: #16A34A; color: #fff; }
.sa .sa-pedido__corpo { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.sa .sa-pedido__cartao { display: grid; gap: .7rem; align-content: start; background: #fff; border: 1px solid var(--linha); border-radius: 28px; padding: 1.4rem; }
.sa .sa-pedido__cartao h2 { margin: 0; font-size: 1.1rem; color: var(--navy); }
.sa .sa-pedido__cartao p { margin: 0; }
.sa .sa-pedido__guarde { margin-top: 1.2rem; font-size: .88rem; }

/* (v1.11) O Pix da oficina na página da compra: o QR num quadro branco, o valor com os botões e o passo a passo. No
   celular, o copia e cola vem primeiro (o QR da própria tela não serve) e o QR desce, menor, para quem paga de outro
   aparelho. */
.sa .sa-pix { display: grid; grid-template-columns: 216px minmax(0, 1fr) minmax(0, 1.15fr); grid-template-areas: "qr corpo passos";
  gap: 32px; align-items: center; margin: 26px 0 0; padding: 28px; border-radius: 28px; background: #fff;
  border: 1px solid var(--linha); box-shadow: 0 18px 40px -30px rgba(16,33,63,.45); }
.sa .sa-pix--sem-qr { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-areas: "corpo passos"; }
.sa .sa-pix__qr { grid-area: qr; margin: 0; display: grid; gap: .6rem; justify-items: center; }
.sa .sa-pix__quadro { width: 216px; aspect-ratio: 1; padding: 10px; border-radius: 22px; background: #fff; border: 1px solid var(--linha); }
.sa .sa-pix__quadro svg { display: block; width: 100%; height: 100%; }
.sa .sa-pix__qr figcaption { display: none; font-size: .86rem; color: var(--suave); text-align: center; }
.sa .sa-pix__corpo { grid-area: corpo; display: grid; gap: .9rem; min-width: 0; }
.sa .sa-pix__valor { margin: 0; display: grid; gap: .1rem; color: var(--navy); }
.sa .sa-pix__valor span { font-size: .95rem; font-weight: 700; color: var(--suave); }
.sa .sa-pix__valor b { font-size: clamp(1.9rem, 3.2vw, 2.4rem); line-height: 1.05; letter-spacing: -.01em; white-space: nowrap; }
.sa .sa-pix__botoes { display: grid; gap: .6rem; max-width: 340px; }
.sa .sa-pix__botoes .sa-btn { width: 100%; }
.sa .sa-pix__botoes .sa-btn.copiado { background: #16A34A; color: #fff; }
.sa .sa-pix__ver summary { width: max-content; cursor: pointer; color: var(--navy); font-weight: 700; font-size: .9rem; }
.sa .sa-pix__ver textarea { width: 100%; margin-top: .5rem; padding: .8rem 1rem; border: 1px solid var(--linha); border-radius: 18px;
  background: #F6F8FB; color: var(--texto); font: inherit; font-size: .82rem; line-height: 1.5; resize: none; word-break: break-all; }
.sa .sa-pix__passos { grid-area: passos; counter-reset: passo; list-style: none; margin: 0; padding: 20px 22px; display: grid; gap: .85rem;
  border-radius: 22px; background: #F4F6FA; }
.sa .sa-pix__passos li { counter-increment: passo; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: .75rem; align-items: start;
  color: var(--texto); font-size: .95rem; line-height: 1.5; }
.sa .sa-pix__passos li::before { content: counter(passo); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px;
  background: var(--navy); color: #fff; font-size: .8rem; font-weight: 800; }
.sa .sa-pix__passos b { color: var(--navy); }
.sa .sa-pix__passos li.sa-pix__passo--celular { display: none; }
@media (hover: none) and (pointer: coarse), (max-width: 640px) {
  .sa .sa-pix__passos li.sa-pix__passo--pc { display: none; }
  .sa .sa-pix__passos li.sa-pix__passo--celular { display: grid; }
}
@media (max-width: 1080px) {
  .sa .sa-pix { grid-template-columns: 196px minmax(0, 1fr); grid-template-areas: "qr corpo" "passos passos"; gap: 24px 28px; }
  .sa .sa-pix--sem-qr { grid-template-columns: minmax(0, 1fr); grid-template-areas: "corpo" "passos"; }
  .sa .sa-pix__quadro { width: 196px; }
}
@media (max-width: 640px) {
  .sa .sa-pix { grid-template-columns: minmax(0, 1fr); grid-template-areas: "corpo" "passos" "qr"; gap: 20px; padding: 20px; border-radius: 24px; }
  .sa .sa-pix__botoes { max-width: none; }
  .sa .sa-pix__passos { padding: 16px; }
  .sa .sa-pix__quadro { width: 176px; }
  .sa .sa-pix__qr figcaption { display: block; }
}

@media (max-width: 860px) {
  .sa .sa-topo__lado .sa-btn { display: none; }
  .sa .sa-carrinho span { display: none; }
  .sa .sa-carrinho { padding: 0 .85rem; }
  .sa .sa-loja { padding: 22px 0 60px; }
  .sa .sa-produto, .sa .sa-produto__texto, .sa .sa-carrinho-pagina, .sa .sa-checkout, .sa .sa-pedido__corpo { grid-template-columns: 1fr; gap: 22px; }
  .sa .sa-produto__texto { margin-top: 36px; }
  .sa .sa-galeria__foto { border-radius: 22px; }
  .sa .sa-compra-caixa__form { grid-template-columns: auto minmax(0, 1fr); }
  .sa .sa-compra-caixa__form .sa-btn--n { grid-column: 1 / -1; }
  /* (v161) O nome usa a linha toda até a lixeira (antes a coluna da lixeira tinha a largura do total, e o nome
     quebrava em 5 linhas estreitas com um vão do lado). */
  .sa .sa-linha { grid-template-columns: 64px minmax(0, 1fr) auto 40px; grid-template-areas: "foto texto texto tirar" "qtd qtd total total"; gap: 10px 12px; }
  .sa .sa-linha__foto { width: 64px; height: 64px; }
  .sa .sa-form .sa-l3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sa .sa-form .sa-l3 label:first-child { grid-column: 1 / -1; }
  .sa .sa-form .sa-l2 .sa-l2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sa .sa-cep { grid-template-columns: minmax(0, 1fr); }
  .sa .sa-resumo--fixo { position: static; }
  .sa .sa-etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sa .sa-pedido__acoes, .sa .sa-pedido__acoes form, .sa .sa-pedido__acoes .sa-btn { width: 100%; }
  .sa .sa-ultima { grid-template-columns: minmax(0, 1fr); padding: 1.3rem; border-radius: 24px; }
  .sa .sa-ultima__acoes { display: grid; grid-template-columns: minmax(0, 1fr); }
  .sa .sa-ultima__acoes form, .sa .sa-ultima__acoes .sa-btn { width: 100%; }
}
/* (v158) No celular, a quantidade e os dois botões um embaixo do outro, na largura toda: o "Colocar no carrinho"
   não cabia ao lado da quantidade e o texto saía cortado. */
@media (max-width: 640px) {
  .sa .sa-compra-caixa { padding: 1.2rem; gap: .9rem; }
  .sa .sa-compra-caixa__form { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
  .sa .sa-compra-caixa__form .sa-qtd { display: flex; width: 100%; justify-content: space-between; }
  .sa .sa-compra-caixa__form .sa-qtd button { width: 56px; }
  .sa .sa-compra-caixa__form .sa-qtd input[type=number]:not([type=checkbox]):not([type=radio]) { flex: 1 1 auto; width: auto; }
  .sa .sa-compra-caixa__form .sa-btn { width: 100%; }
}

/* (v1.8) O catálogo grande (dezenas de milhares de peças): a busca com o grupo numa pílula só, a contagem e as
   páginas. No celular, o grupo desce para a linha de baixo. */
.sa .sa-procurar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px) auto; gap: 6px; align-items: center;
  background: #fff; border: 1px solid var(--linha); border-radius: 999px; padding: 6px; margin-bottom: 18px; }
.sa .sa-procurar:focus-within { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(16,33,63,.08); }
.sa .sa-procurar input.sa-procurar__texto:not([type=checkbox]):not([type=radio]), .sa .sa-procurar select.sa-procurar__grupo {
  height: 48px; min-width: 0; width: 100%; border: 0; outline: 0; box-shadow: none; background-color: transparent;
  font: inherit; font-weight: 500; color: var(--texto); padding: 0 1.1rem; }
.sa .sa-procurar select.sa-procurar__grupo { border-left: 1px solid var(--linha); border-radius: 0; cursor: pointer;
  text-overflow: ellipsis; padding-right: 2.6rem; background-position: right 1rem center; }
.sa .sa-procurar input.sa-procurar__texto:focus { box-shadow: none; }
.sa .sa-procurar option { color: #0F172A; }
.sa .sa-contagem { margin: 0 0 18px; color: var(--suave); font-size: .95rem; }
.sa .sa-contagem b { color: var(--navy); font-variant-numeric: tabular-nums; }
.sa .sa-limpar { display: inline-block; margin-left: .15rem; white-space: nowrap; color: var(--navy); font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px; }
.sa .sa-paginas { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 28px; }
.sa .sa-paginas__onde { min-width: 110px; text-align: center; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.sa .sa-btn--parado { opacity: .45; pointer-events: none; }
.sa--galpao .sa-procurar { background: var(--galpao-2); border-color: rgba(255,255,255,.14); }
.sa--galpao .sa-procurar input.sa-procurar__texto:not([type=checkbox]):not([type=radio]),
.sa--galpao .sa-procurar select.sa-procurar__grupo { color: #fff; border-color: rgba(255,255,255,.14); }
.sa--galpao .sa-contagem b, .sa--galpao .sa-limpar, .sa--galpao .sa-paginas__onde { color: #fff; }
@media (max-width: 860px) {
  .sa .sa-procurar { grid-template-columns: minmax(0, 1fr) auto; border-radius: 26px; }
  .sa .sa-procurar select.sa-procurar__grupo { grid-column: 1 / -1; grid-row: 2; border-left: 0;
    border-top: 1px solid var(--linha); }
  .sa .sa-procurar .sa-btn { padding: 0 1.1rem; }
  .sa .sa-paginas { gap: 8px; }
  .sa .sa-paginas .sa-btn { flex: 1; padding: 0 .8rem; }
  .sa .sa-paginas__onde { min-width: 0; flex: 0 0 auto; }
}

/* (v158) O Bruno (15/10, olhando o site da oficina no celular): "coloca o ver catálogo lá em cima, na versão de
   celular, tá muito embaixo" e "remova essas imagens da versão de celular, enche muito a tela com coisa inútil".
   O "Ver o catálogo" vai na capa no celular e no tablet (ali o menu do topo some; no computador o menu já tem o
   Catálogo). E, no celular, as fotos de enfeite saem (as das seções, a faixa de foto, as dos cartões de serviço e as
   da capa dos layouts que têm foto ao lado): ficam o texto, as peças e o orçamento, com menos ar entre as partes. */
.sa .sa-capa-catalogo { display: none; }
@media (max-width: 860px) {
  .sa .sa-capa-catalogo { display: inline-flex; }
  .sa .sa-capa-h .sa-capa-catalogo, .sa .sa-capa-v .sa-capa-catalogo { width: 100%; margin-top: 12px; }
  .sa .sa-capa-v .sa-capa-catalogo { max-width: 560px; }
}
@media (max-width: 640px) {
  .sa .sa-lado .sa-foto, .sa .sa-banda, .sa .sa-card img, .sa .sa-vitrine-foto, .sa .sa-capa-g__foto,
  .sa--ficha .sa-visual, .sa .sa-capa-m__foto { display: none; }
  .sa .sa-sec { padding: 44px 0; }
  .sa .sa-sec--junta { padding-top: 0; }
  .sa .sa-cab { gap: .5rem; margin-bottom: 22px; }
  .sa .sa-lado, .sa .sa-lado--inv { gap: 0; }
  .sa .sa-capa-h { min-height: 0; padding-top: 112px; padding-bottom: 36px; }
  .sa--ficha .sa-capa .sa-w { gap: 0; padding-bottom: 8px; }
  .sa .sa-capa-g .sa-w { gap: 0; }
  .sa .sa-capa-m .sa-w { padding-top: 20px; padding-bottom: 8px; }
  .sa .sa-capa-m__cartao { margin: 0; box-shadow: none; border: 1px solid var(--linha); }
  .sa--mostruario .sa-catalogo { padding-top: 36px; }
  .sa .sa-acoes .sa-btn { flex: 1 1 100%; }
  .sa .sa-some-no-celular { display: none; }
}

/* (v201) O Bruno: "eu gosto de 3 produtos por linha no celular a menos que esteja em destaque" (como nos sites das
   lojas), e no celular nada de cartões um embaixo do outro. Os três cartões (a aeronave parada, as peças e o envio)
   viram três ícones lado a lado, cada um inteiro um botão (o mesmo link do cartão); os três números do Galpão ficam
   lado a lado, só com o título; e os dois destaques do Hangar também, com o desenho em cima. */
@media (max-width: 640px) {
  .sa .sa-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .sa .sa-card { position: relative; border-radius: 22px; }
  .sa .sa-card > div { padding: 16px 8px 14px; align-items: center; text-align: center; gap: 4px; }
  .sa .sa-card__icone { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 6px; border-radius: 999px;
    background: var(--laranja-claro-fundo); color: var(--laranja); }
  .sa .sa-card__icone svg { width: 24px; height: 24px; }
  .sa .sa-card small { font-size: .62rem; letter-spacing: .08em; }
  .sa .sa-card b { font-size: .84rem; line-height: 1.25; letter-spacing: 0; }
  .sa .sa-card p { display: none; }
  .sa .sa-card a { position: absolute; inset: 0; margin: 0; border-radius: inherit; font-size: 0; color: transparent; }
  .sa .sa-card a:focus-visible { outline: 3px solid var(--botao); outline-offset: 2px; }
  .sa .sa-numeros .sa-w { padding: 0; }
  .sa .sa-numeros .sa-w > div { padding: 1rem .7rem; text-align: center; }
  .sa .sa-numeros span { font-size: .92rem; line-height: 1.2; }
  .sa .sa-numeros small { display: none; }
  .sa .sa-faixa .sa-w > div { flex-direction: column; align-items: center; text-align: center; gap: .55rem; padding: 1.2rem .8rem; }
  .sa .sa-faixa svg { flex-basis: auto; width: 42px; height: 42px; padding: 10px; }
  .sa .sa-faixa b { font-size: .95rem; }
  .sa .sa-faixa span { font-size: .78rem; display: block; margin-top: .2rem; }
}


/* ------------------------------------------------------------ (v233) a busca fixa no topo
   Um cliente pediu a busca "lá em cima, fixa"; o Bruno, sem poluição visual. No topo da página nada muda. Quando a
   busca da página (a da capa, a do catálogo) ou o cabeçalho sai da tela, desce esta barra fina (64 px no computador,
   58 no celular): a logo, a busca e o carrinho. A cor segue o cabeçalho (o do layout ou o do Visual da página). */
.sa .sa-fixa { position: fixed; top: var(--sa-fixa-topo, 0px); left: 0; right: 0; z-index: 40; color: var(--navy);
  background: rgba(255,255,255,.95); border-bottom: 1px solid var(--linha); box-shadow: 0 8px 24px rgba(16,33,63,.08);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  transform: translateY(calc(-100% - var(--sa-fixa-topo, 0px) - 12px)); visibility: hidden;
  transition: transform .22s ease, visibility 0s linear .22s; }
.sa .sa-fixa.sa-fixa--on { transform: none; visibility: visible; transition: transform .22s ease; }
.sa .sa-fixa .sa-w { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px) minmax(0, 1fr); align-items: center;
  gap: 1.2rem; height: 64px; }
.sa .sa-fixa__marca { display: flex; align-items: center; gap: .6rem; min-width: 0; font-weight: 800; letter-spacing: -.01em; color: inherit; }
.sa .sa-fixa__marca img { width: 40px; height: auto; flex: none; }
.sa .sa-fixa__marca img.sa-logo { width: auto; max-width: 120px; height: 34px; object-fit: contain; }
.sa .sa-fixa__marca img.sa-logo.redonda { width: 34px; max-width: 34px; border-radius: 50%; object-fit: cover; }
.sa .sa-fixa__marca span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .95rem; }
.sa .sa-fixa__busca { display: flex; align-items: center; gap: 4px; height: 44px; margin: 0; padding: 3px; border-radius: 999px;
  background: #F1F4F8; border: 1px solid transparent; transition: border-color .15s ease, background .15s ease; }
.sa .sa-fixa__busca:focus-within { background: #fff; border-color: var(--navy); }
.sa .sa-fixa input.sa-fixa__q[name]:not([type=checkbox]) { flex: 1; width: auto; min-width: 0; height: 100%; margin: 0; padding: 0 .9rem 0 1.1rem;
  border: 0; border-radius: 999px; background: transparent; box-shadow: none; outline: 0; color: var(--texto);
  font-family: inherit; font-size: 1rem; font-weight: 500; line-height: 1.2; }
.sa .sa-fixa input.sa-fixa__q[name]::placeholder { color: #75839A; opacity: 1; }
.sa .sa-fixa__ir { flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 999px;
  background: var(--botao); color: var(--sobre-botao); cursor: pointer; transition: background .15s ease; }
.sa .sa-fixa__ir:hover { background: var(--botao-e); }
.sa .sa-fixa__ir:focus-visible { outline: 2px solid currentColor; outline-offset: -5px; }
.sa .sa-fixa__ir svg { width: 18px; height: 18px; }
.sa .sa-fixa__lado { display: flex; justify-content: flex-end; min-width: 0; }
.sa .sa-fixa .sa-carrinho { height: 40px; padding: 0 .85rem; }
/* Os cabeçalhos escuros (Hangar, Galpão e a loja deles): a barra no mesmo azul, a busca clara por cima. */
.sa--hangar .sa-fixa, .sa--galpao .sa-fixa, .sa--loja-escuro .sa-fixa { color: #fff; background: var(--navy-e);
  background: color-mix(in srgb, var(--navy-e) 95%, transparent); border-bottom-color: rgba(255,255,255,.08); box-shadow: 0 8px 24px rgba(0,0,0,.22); }
.sa--hangar .sa-fixa__busca, .sa--galpao .sa-fixa__busca, .sa--loja-escuro .sa-fixa__busca { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.14); }
.sa--hangar .sa-fixa__busca:focus-within, .sa--galpao .sa-fixa__busca:focus-within, .sa--loja-escuro .sa-fixa__busca:focus-within {
  background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.55); }
.sa--hangar .sa-fixa input.sa-fixa__q[name]:not([type=checkbox]), .sa--galpao .sa-fixa input.sa-fixa__q[name]:not([type=checkbox]),
.sa--loja-escuro .sa-fixa input.sa-fixa__q[name]:not([type=checkbox]) { color: #fff; }
.sa--hangar .sa-fixa input.sa-fixa__q[name]::placeholder, .sa--galpao .sa-fixa input.sa-fixa__q[name]::placeholder,
.sa--loja-escuro .sa-fixa input.sa-fixa__q[name]::placeholder { color: rgba(255,255,255,.62); }
/* O cabeçalho na cor do Visual da página: a barra na mesma cor e a busca branca (lê bem em qualquer cor). */
.sa.sa--topo-livre .sa-fixa { color: var(--topo-texto); background: var(--topo-fundo); border-bottom-color: var(--topo-linha); }
.sa.sa--topo-livre .sa-fixa__busca { background: #fff; border-color: var(--topo-linha); }
.sa.sa--topo-livre .sa-fixa__busca:focus-within { background: #fff; border-color: var(--topo-texto); }
.sa.sa--topo-livre .sa-fixa input.sa-fixa__q[name]:not([type=checkbox]) { color: var(--texto); }
.sa.sa--topo-livre .sa-fixa input.sa-fixa__q[name]::placeholder { color: #75839A; }
.sa.sa--topo-livre .sa-fixa .sa-carrinho { background: transparent; border-color: var(--topo-linha); color: var(--topo-texto); }
/* O resumo do carrinho, que gruda no topo ao rolar, desce para baixo da barra enquanto ela está na tela. */
.sa .sa-resumo--fixo { transition: top .22s ease; }
.sa.sa--com-fixa .sa-resumo--fixo { top: 84px; }
@media (max-width: 860px) {
  .sa .sa-fixa .sa-w { display: flex; gap: .55rem; height: 58px; }
  .sa .sa-fixa__marca { flex: none; }
  .sa .sa-fixa__marca span { display: none; }
  .sa .sa-fixa__marca img { width: 34px; }
  .sa .sa-fixa__marca img.sa-logo { max-width: 44px; height: 30px; }
  .sa .sa-fixa input.sa-fixa__q[name]:not([type=checkbox]) { padding: 0 .6rem 0 .95rem; }
  .sa .sa-fixa__marca img.sa-logo.redonda { width: 32px; max-width: 32px; height: 32px; }
  .sa .sa-fixa__busca { flex: 1; min-width: 0; height: 42px; }
  .sa .sa-fixa__ir { width: 34px; height: 34px; }
  .sa .sa-fixa__lado { flex: none; }
  .sa .sa-fixa__lado:empty { display: none; }
  .sa .sa-fixa .sa-carrinho { width: 42px; height: 42px; padding: 0; justify-content: center; }
  .sa .sa-fixa .sa-carrinho b { position: absolute; top: -4px; right: -4px; }
}
@media (prefers-reduced-motion: reduce) { .sa .sa-fixa, .sa .sa-fixa.sa-fixa--on, .sa .sa-resumo--fixo { transition: none; } }
@media print { .sa .sa-fixa { display: none; } }

/* ------------------------------------------------------------ (v233) a especialidade
   Um serviço em que a empresa é referência (Visual da página, "Especialidade"): o texto de um lado e até 3 fotos do
   outro (uma grande e duas menores; no celular, as três lado a lado, quadradas). Sem fotos, só o texto. */
.sa .sa-esp__grade { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 56px; align-items: center; }
.sa .sa-esp__grade--so-texto { grid-template-columns: minmax(0, 760px); }
.sa .sa-esp__texto .sa-acoes { display: flex; flex-wrap: wrap; gap: .7rem; }
.sa .sa-esp__p { color: var(--suave); font-size: 1.06rem; max-width: 54ch; margin: 0 0 1.6rem; white-space: pre-line; }
.sa .sa-esp__fotos { display: grid; gap: 12px; }
.sa .sa-esp__fotos figure { margin: 0; min-height: 0; border-radius: 24px; overflow: hidden; background: #E9EDF3; }
.sa .sa-esp__fotos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sa .sa-esp__fotos--1 figure { aspect-ratio: 4 / 3; }
.sa .sa-esp__fotos--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sa .sa-esp__fotos--2 figure { aspect-ratio: 3 / 4; }
.sa .sa-esp__fotos--3 { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); aspect-ratio: 5 / 4; }
.sa .sa-esp__fotos--3 figure:first-child { grid-row: 1 / 3; }
.sa .sa-esp + .sa-catalogo { padding-top: 0; }
.sa--galpao .sa-esp__p { color: rgba(230,235,243,.72); }
.sa--galpao .sa-esp__fotos figure { background: var(--galpao-2); }
@media (max-width: 860px) {
  .sa .sa-esp__grade, .sa .sa-esp__grade--so-texto { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .sa .sa-esp__p { font-size: 1rem; margin-bottom: 1.3rem; }
}
@media (max-width: 640px) {
  .sa .sa-esp__grade { gap: 20px; }
  .sa .sa-esp__fotos { gap: 8px; }
  .sa .sa-esp__fotos--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sa .sa-esp__fotos--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; aspect-ratio: auto; }
  .sa .sa-esp__fotos figure, .sa .sa-esp__fotos--2 figure { aspect-ratio: 1; border-radius: 18px; }
  .sa .sa-esp__fotos--3 figure:first-child { grid-row: auto; }
  .sa .sa-esp__fotos--1 { grid-template-columns: minmax(0, 1fr); }
  .sa .sa-esp__fotos--1 figure { aspect-ratio: 16 / 10; }
}

/* (v244) A página do produto com a busca no alto (antes, só a barra fixa, que descia ao rolar): no computador, o
   caminho à esquerda e a busca à direita, na mesma linha; no celular, a busca primeiro, na largura toda. */
.sa .sa-produto-topo { display: flex; align-items: center; justify-content: space-between; gap: .75rem 1.5rem;
  flex-wrap: wrap; margin-bottom: 1.2rem; }
.sa .sa-produto-topo .sa-trilha { margin-bottom: 0; min-width: 0; flex-wrap: wrap; }
.sa .sa-procurar--produto { grid-template-columns: minmax(0, 1fr) auto; flex: 0 1 460px; margin-bottom: 0; }
.sa .sa-procurar--produto input.sa-procurar__texto:not([type=checkbox]):not([type=radio]) { height: 44px; }
@media (max-width: 860px) {
  .sa .sa-produto-topo { flex-direction: column; align-items: stretch; }
  .sa .sa-procurar--produto { order: -1; flex: 0 0 auto; border-radius: 999px; }
}