/* util + header (igual home) */
  .util{background:var(--panel-2);border-bottom:1px solid var(--line);font-size:12.5px;}
header{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--panel) 90%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}


/* product hero */
  .prod{display:grid;grid-template-columns:1fr 1fr;gap:34px;padding:14px 0 40px;}
@media(max-width:860px){.prod{grid-template-columns:1fr;gap:24px;}}
.gallery{position:sticky;top:84px;align-self:start;}
@media(max-width:860px){.gallery{position:static;}}
.gmain{position:relative;background:#fff;border:1.5px solid color-mix(in srgb,var(--brand) 42%,transparent);border-radius:16px;aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden;box-shadow:var(--shadow);}
/* Ancorada em inset:0, não em height:100%. O `.gmain` só tem altura via aspect-ratio, e
   altura percentual de filho não resolve contra pai de altura indefinida: a img caía no
   quadrado natural (545x545) dentro de um frame de 410 e era decepada pelo overflow.
   Não aparecia porque a imagem migrada traz o produto em ~4% do canvas — só o mar de branco
   era cortado. Com o master do fabricante normalizado (produto em ~83%) o corte come a peça. */
.gmain img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:26px;box-sizing:border-box;}
/* z-index porque o badge vem ANTES da img no DOM: com a img posicionada, ela passaria por cima. */
.gmain .blogo{position:absolute;top:14px;left:14px;z-index:2;display:inline-flex;align-items:center;background:rgba(10,22,34,.5);backdrop-filter:blur(3px);border:1px solid rgba(255,255,255,.28);padding:5px 10px;border-radius:7px;}
.gmain .blogo svg{height:13px;width:auto;color:#fff;display:block;}
.gthumbs{display:flex;gap:10px;margin-top:12px;}
.gthumb{width:64px;height:64px;border:1px solid color-mix(in srgb,var(--brand) 25%,var(--line));border-radius:9px;background:#fff;display:grid;place-items:center;cursor:pointer;overflow:hidden;}
.gthumb.active{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand);}
.gthumb img{width:100%;height:100%;object-fit:contain;padding:6px;}
.gthumb.ph{color:#aab6c1;}

/* zoom da imagem de produto — o comprador amplia para ler o type code gravado na peça.
   As imagens são 1200x1200 e aparecem a ~440px, então há detalhe real a mostrar; a classe
   .zoomable só é aplicada pelo JS quando o arquivo é mesmo maior que a caixa (senão o
   "zoom" seria interpolação e entregaria borrão no lugar de informação). */
.gmain.zoomable{cursor:zoom-in;}
.gmain .zhint{position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:5px;
  font-size:11.5px;font-weight:600;color:var(--ink-2,#5b6875);background:rgba(255,255,255,.86);
  border:1px solid var(--line);border-radius:7px;padding:4px 8px;pointer-events:none;
  opacity:0;transition:opacity .16s ease;}
.gmain.zoomable:hover .zhint{opacity:1;}
.gmain .zhint svg{width:13px;height:13px;}
/* lente: segue o cursor e mostra o recorte em resolução nativa */
.gmain .zlens{position:absolute;inset:0;background-repeat:no-repeat;background-color:#fff;
  opacity:0;transition:opacity .12s ease;pointer-events:none;}
.gmain.zooming .zlens{opacity:1;}
.gmain.zooming img{opacity:0;}

/* lightbox: caminho universal (toque, teclado e desktop) */
.zbox{position:fixed;inset:0;z-index:120;display:none;place-items:center;
  background:rgba(8,16,26,.82);backdrop-filter:blur(4px);padding:24px;}
.zbox[open],.zbox.on{display:grid;}
.zbox img{max-width:min(92vw,1100px);max-height:88vh;width:auto;height:auto;
  background:#fff;border-radius:14px;padding:18px;box-shadow:0 24px 60px rgba(0,0,0,.4);}
.zbox .zclose{position:absolute;top:18px;right:18px;width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.12);color:#fff;
  display:grid;place-items:center;cursor:pointer;}
.zbox .zclose:hover{background:rgba(255,255,255,.22);}
.zbox .zcap{position:absolute;left:0;right:0;bottom:20px;text-align:center;color:#e8eef5;
  font-size:13px;padding:0 24px;}
@media(prefers-reduced-motion:reduce){
  .gmain .zhint,.gmain .zlens{transition:none;}
}
.pinfo .brand-row{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.pinfo .fbadge{height:22px;width:auto;color:var(--brand);}
.pinfo .sku{font-family:var(--mono);font-size:12.5px;color:var(--amber-ink);font-weight:700;background:color-mix(in srgb,var(--amber) 14%,transparent);border:1px solid color-mix(in srgb,var(--amber) 34%,transparent);padding:2px 9px;border-radius:6px;}
.pinfo h1{font-size:clamp(23px,3.2vw,31px);letter-spacing:-.02em;font-weight:800;line-height:1.12;margin:0 0 10px;text-wrap:balance;}
.pinfo .lede{font-size:14.5px;color:var(--ink-soft);margin:0 0 18px;}
.pinfo .avail{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--good);background:color-mix(in srgb,var(--good) 12%,transparent);border:1px solid color-mix(in srgb,var(--good) 30%,transparent);padding:6px 12px;border-radius:999px;margin-bottom:18px;}
.avail .dot{width:8px;height:8px;border-radius:50%;background:var(--good);}
/* key specs */
  /* Faixa de destaque: ocupa 100% do miolo esticando conforme a contagem (data-n).
     2 boxes → 1/2, 3 → 1/3, 4 → 1/4. Teto de 4 (ver ExtrairSpecs::MAX_DESTAQUES) — mais
     que isso quebraria em 2 linhas e deixa de ser "o principal que diferencia o item". */
  .keyspecs-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:22px 0 40px;}
.keyspecs-strip[data-n="1"]{grid-template-columns:1fr;}
.keyspecs-strip[data-n="2"]{grid-template-columns:repeat(2,1fr);}
.keyspecs-strip[data-n="3"]{grid-template-columns:repeat(3,1fr);}
@media(max-width:640px){.keyspecs-strip[data-n]{grid-template-columns:repeat(2,1fr);}}
@media(max-width:380px){.keyspecs-strip[data-n]{grid-template-columns:1fr;}}
.kspec{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:12px 14px;}
.kspec .k{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);font-family:var(--mono);}
.kspec .v{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:3px;}
/* cotação box */
  .cotabox{background:linear-gradient(150deg,var(--panel),var(--panel-2));border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:15px;padding:20px;box-shadow:var(--shadow);}
.cotabox .price-note{font-size:13px;color:var(--ink-soft);margin-bottom:14px;}
.cotabox .price-note b{color:var(--ink);}
.cotabtns{display:flex;flex-wrap:wrap;gap:10px;}
.btn-wa{display:inline-flex;align-items:center;gap:9px;background:var(--amber);color:#3a2600;font-weight:800;font-size:14.5px;padding:13px 20px;border-radius:11px;flex:1;justify-content:center;min-width:180px;}
.btn-wa:hover{filter:brightness(1.05);}
.btn-quote{display:inline-flex;align-items:center;gap:9px;background:var(--panel);color:var(--ink);border:1px solid var(--line);font-weight:700;font-size:14px;padding:13px 18px;border-radius:11px;justify-content:center;}
.btn-quote:hover{border-color:var(--brand-lite);color:var(--brand);}
.cotabox .msg-preview{margin-top:13px;font-family:var(--mono);font-size:11.5px;color:var(--ink-faint);background:var(--ground);border:1px dashed var(--line);border-radius:8px;padding:9px 11px;}
.cotabox .msg-preview b{color:var(--brand);}
/* schema badge (didático — mostra o leapfrog) */
  .schemabadge{display:flex;align-items:center;gap:10px;margin-top:16px;font-size:12px;color:var(--ink-faint);}
.schemabadge svg{color:var(--brand);flex:none;}
.schemabadge code{font-family:var(--mono);color:var(--brand-pale);font-size:11px;}
/* `padding-block`, nunca a forma curta `padding: X 0` — ela zera a margem lateral do .wrap
   quando as duas classes estão na mesma tag. */
section.block{padding-block:clamp(54px,7vw,100px);border-top:1px solid var(--line);}

/* Aqui TODO bloco tem separador visual, então a regra global `section.block + section.block
   {padding-block-start:0}` não serve: ela deixa o respiro inteiro ACIMA da linha e zero
   abaixo, e o título encosta no traço. Medido: 84px em cima, 1px embaixo.
   Com separador, o respiro se divide nos dois lados — a linha fica centrada nele. */
section.block + section.block{padding-block:clamp(34px,4.4vw,58px);}
section.block + section.block + section.block{padding-block-start:clamp(34px,4.4vw,58px);}
.sec-eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--brand);font-weight:600;}
.sec-title{font-size:clamp(20px,2.6vw,26px);letter-spacing:-.02em;font-weight:800;margin:6px 0 20px;}
/* datasheet */
  .ds-wrap{display:grid;grid-template-columns:1fr 1fr;gap:14px 34px;}
@media(max-width:760px){.ds-wrap{grid-template-columns:1fr;}}
.ds-group h3{font-size:13px;text-transform:uppercase;letter-spacing:.05em;font-family:var(--mono);color:var(--brand);margin:0 0 6px;font-weight:700;}
.ds-table{width:100%;border-collapse:collapse;font-size:13.5px;margin-bottom:18px;}
.ds-table td{padding:8px 2px;border-bottom:1px solid var(--line);vertical-align:top;}
.ds-table td.k{color:var(--ink-soft);width:52%;}
.ds-table td.v{font-weight:600;font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:12.5px;text-align:right;}
/* ── SEÇÃO DESCRITIVA ────────────────────────────────────────────────────────
   Reescrita a partir dos apontamentos do cliente em 27/07. O que ele viu:
   "tópicos em cor e fonte diferentes", "espaçamento desproporcional entre o título
   Características e os tópicos", "subtópicos não respeitados", "não respeitam a margem",
   "tabelas OMRON desconfiguradas", "imagem explodindo o miolo".

   Causa única para quase tudo: aqui só existiam regras para `.descbox` e `.descbox p`.
   Lista, subtítulo, tabela e imagem NÃO TINHAM REGRA NENHUMA e caíam no padrão do
   navegador — outra fonte, outra cor, outro recuo, outra margem. O item FESTO expunha o
   problema porque tem `<ul>` de verdade; o OMRON escondia porque nunca teve lista (era
   parágrafo com bolinha digitada), e a normalização da descrição acabou de transformar os
   dois no mesmo formato. Sem estas regras, unificar o HTML deixaria TODO o catálogo com a
   aparência que ele reprovou no lado FESTO.

   Espaçamento: era `gap:16px` uniforme entre todos os filhos, então o título ficava tão
   longe da própria lista quanto do bloco anterior. Agora respira ANTES do subtítulo e
   fica colado no conteúdo dele. */
.descbox{display:block;font-size:15px;color:var(--ink-soft);line-height:1.75;}
.descbox > * + *{margin-top:16px;}
.descbox > *:first-child{margin-top:0;}
.descbox p{font-size:15px;color:var(--ink-soft);line-height:1.75;margin:0;}
.descbox b,.descbox strong{color:var(--ink);font-weight:700;}

/* 🎯 O respiro entre blocos irmãos MORAVA em `.descbox > * + *` (0,1,0) e era anulado por
   `.descbox p{margin:0}` e `.descbox ul{margin:0}` (0,1,1) — mais específicos. Medido:
   margin-top 0px em TODO parágrafo. Passava despercebido porque a descrição migrada tem
   <h3>, e o subtítulo é que gerava o espaço; descrição só de parágrafos virava bloco único.
   Aqui a regra empata em especificidade (0,1,1) e vem depois, então vale. */
.descbox > :is(p,ul,ol,table,div,figure) + :is(p,ul,ol,table,div,figure){margin-top:16px;}

/* Subtítulo da descrição. Mesma linguagem do cabeçalho de grupo da ficha técnica
   (`.ds-group h3`) — as duas seções falam do mesmo produto e não podem parecer de sites
   diferentes. */
.descbox h3{font-size:13px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em;
  color:var(--brand);font-weight:700;margin:0;}
.descbox > h3{margin-top:30px;}
.descbox > *:first-child.descbox h3{margin-top:0;}
.descbox > h3 + *{margin-top:10px;}

/* Lista. `padding-left` em vez do recuo de 40px do navegador: o marcador alinha com a
   margem do texto em volta, que é o que "respeitar a margem" quer dizer aqui. */
.descbox ul{margin:0;padding-left:19px;list-style:disc;}
.descbox li{font-size:15px;color:var(--ink-soft);line-height:1.7;margin:0 0 7px;}
.descbox li:last-child{margin-bottom:0;}
.descbox li::marker{color:var(--brand);}
/* subnível: o "- Safety Torque Off…" que morava solto dentro do mesmo parágrafo */
.descbox ul ul{margin:8px 0 0;padding-left:18px;list-style:circle;}
.descbox ul ul li{font-size:14.5px;margin-bottom:5px;}

/* Tabela dentro da descrição. As do lado OMRON entram cruas, com `rowspan` e `<strong>`
   nas células de cabeçalho e nenhuma classe — daí a desconfiguração. A rolagem é da caixa,
   nunca da página: tabela larga em telas estreitas era um dos pontos de estouro. */
.desc-tabela{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);
  border-radius:11px;background:var(--panel);}
.desc-table{width:100%;border-collapse:collapse;font-size:13.5px;}
.desc-table td,.desc-table th{padding:10px 14px;border-bottom:1px solid var(--line);
  border-right:1px solid var(--line);text-align:left;vertical-align:middle;color:var(--ink-soft);}
.desc-table tr:last-child td{border-bottom:0;}
.desc-table td:last-child,.desc-table th:last-child{border-right:0;}
/* célula de cabeçalho é a que veio em negrito — é o único sinal que a origem dá */
.desc-table td:has(strong),.desc-table th{background:var(--panel-2);color:var(--ink);font-weight:600;}
.desc-table td strong{font-weight:700;}
/* `<br>` solto dentro da célula de cabeçalho abria uma linha vazia embaixo do rótulo */
.desc-table td > br:last-child{display:none;}

/* Imagem no meio da descrição. Vinha sem regra nenhuma e entrava no tamanho natural do
   arquivo (o diagrama do servo 1SA tem 1.200px), estourando o miolo. */
.desc-img{margin:0;display:flex;justify-content:center;}
.desc-img img{max-width:min(520px,100%);height:auto;border:1px solid var(--line);
  border-radius:12px;background:#fff;cursor:zoom-in;display:block;}
.desc-img img:hover{border-color:var(--brand-lite);}
@media(max-width:620px){.desc-img img{max-width:100%;}}
/* conjunto de engenharia: o componente `.conj` mora no app.css, não aqui. Ele é usado na
   página de produto E na LP setorial (partial `conjunto_setor`), e a LP não carrega este
   arquivo — deixá-lo aqui rendia grade sem estilo, sem erro nenhum, só na LP. */
/* faq — o componente é compartilhado (produto, LP de serviço e hub) e mora no app.css.
   Aqui fica só o que é do produto: o cabeçalho com SKU + nome do item. */
.faq-head .sec-title{margin-bottom:8px;}
.faq-prod{display:flex;flex-direction:column;gap:9px;margin-top:4px;}
.faq-prod .sku{align-self:flex-start;font-family:var(--mono);font-size:12px;color:var(--amber-ink);font-weight:700;background:color-mix(in srgb,var(--amber) 14%,transparent);border:1px solid color-mix(in srgb,var(--amber) 34%,transparent);padding:2px 9px;border-radius:6px;}
.faq-prod .faq-prodname{font-size:14px;font-weight:700;color:var(--ink);line-height:1.4;letter-spacing:-.01em;}
/* related */
  .rel{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;}
@media(max-width:820px){.rel{grid-template-columns:repeat(2,1fr);}}
@media(max-width:460px){.rel{grid-template-columns:1fr;}}
.rcard{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow);transition:transform .15s,border-color .15s;}
.rcard:hover{transform:translateY(-3px);border-color:var(--brand-lite);}
/* `position:relative` + filho em `inset:0` — mesmo remédio de `.gmain` e `.pcard .imgbox`.
   Este card tinha regra só para o SVG de placeholder e NENHUMA para <img>: enquanto os
   relacionados não tinham foto, o ghost cabia e ninguém via o defeito. Quando as fotos de
   série entraram (1200x1200), a imagem passou a entrar em tamanho natural e esticava a
   caixa de 200px para 1201px — o retângulo vertical gigante. `aspect-ratio` só governa a
   altura enquanto nenhum filho força mais que isso. */
.rcard .rimg{position:relative;aspect-ratio:4/3;background:#fff;border-bottom:1px solid color-mix(in srgb,var(--brand) 20%,var(--line));display:grid;place-items:center;color:#aab6c1;overflow:hidden;}
.rcard .rimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:12px;box-sizing:border-box;}
.rcard .rimg svg{width:40px;height:40px;}
.rcard .rb{padding:11px 12px 13px;}
.rcard .rsku{font-family:var(--mono);font-size:11px;color:var(--amber-ink);font-weight:700;}
.rcard .rn{font-size:13px;font-weight:600;line-height:1.3;margin-top:3px;}
/* footer (igual home, resumido) */
  footer{background:var(--panel);border-top:1px solid var(--line);}
/* Item descontinuado — 2 funis nativos (equivalente atual / avaliar reparo). Substitui a
   caixa de cotação: quem chega por busca do código antigo é convertido, não some em 404. */
.descont{background:linear-gradient(150deg,var(--panel),var(--panel-2));border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:15px;padding:20px;box-shadow:var(--shadow);}
.descont-tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--amber-ink);background:var(--amber);border-radius:7px;padding:5px 10px;font-weight:800;}
.descont-lead{font-size:13.5px;color:var(--ink-soft);margin:12px 0 14px;}
.descont-funis{display:grid;gap:10px;}
.descont-funil{display:flex;flex-direction:column;gap:3px;background:var(--ground);border:1px solid var(--line);border-radius:11px;padding:13px 15px;transition:border-color .15s,transform .15s;}
.descont-funil:hover{border-color:var(--brand);transform:translateY(-1px);}
.descont-funil .descont-n{font-size:13.5px;font-weight:800;color:var(--brand);}
.descont-funil .descont-txt{font-size:13px;color:var(--ink-soft);line-height:1.4;}