/* Hub de marca — CSS do protótipo aprovado (Fase 1, artifact b34ffa7f).
   Só o delta: tokens, header, footer, breadcrumb e FAQ já vêm do app.css.

   O hub e a home falam a MESMA linguagem visual, então a maior parte já está no app.css e
   é reuso de propósito, não coincidência: .hero/.hero-bg/.herocol/.herocta, .pnsearch
   inteiro (label, field, input, button, hint, tag), .authority/.auth-item/.n/.aico/.t,
   .diff com .lab-badge/.cta/.steps/.step, .final/.box/.b1/.b2 e o .pcard da vitrine
   (imgbox, badge, sku, nm, cot — todos scopados em .pcard no app.css).

   ATENÇÃO ao vazamento de cascata: o app.css carrega antes e toda propriedade que este
   delta não redeclara sobrevive. Foram conferidas as 77 classes que os dois arquivos têm
   em comum; das que o hub usa com sentido DIFERENTE do app.css, só duas vazam de verdade
   e estão resetadas logo abaixo. As demais coincidências são scopadas no app.css
   (.bcard .seal, .bcard .go, .cat .ct, .fcol .contact .ico) e não alcançam o hub. */

/* --- resets contra o que vaza do app.css --- */

/* app.css: .sec-head{display:flex;align-items:flex-end;justify-content:space-between} —
   é o cabeçalho da home, com o "ver todos" empurrado para a direita. No hub o cabeçalho
   é empilhado. Mesmo vazamento que já tinha quebrado a LP. */
.sec-head{display:block;align-items:initial;justify-content:initial;gap:0;}

/* app.css: .geo .wrap{display:flex;align-items:center;padding:18px 0} — é a faixa
   compacta da home (rótulo + chips na mesma linha). No hub o bloco tem h2 e parágrafo
   acima dos chips, então volta a ser fluxo normal. */
/* O hub usa a MESMA barra de breadcrumb da LP de serviço, mas herdava o `.crumb` do
   app.css (`padding:16px 0 4px`), desenhado para página SEM barra. Dentro da faixa isso
   jogava o caminho para baixo do eixo — o desalinhamento vertical apontado pelo cliente.
   Mesmo modo de falha de sempre: componente compartilhado com regra em dois arquivos. */
.crumb-bar{background:var(--panel-2);border-bottom:1px solid var(--line);}
.crumb{padding:10px 0;font-size:12.5px;color:var(--ink-faint);font-family:var(--mono);display:flex;flex-wrap:wrap;gap:7px;align-items:center;}

.geo-hub .wrap{display:block;flex-wrap:initial;align-items:initial;gap:0;padding-block:26px;}

/* --- hero do hub --- */
/* O hero da home é mais alto e o h1 maior; aqui a primeira dobra precisa caber a busca
   por part number e o cartão de confiança sem empurrar tudo para baixo da linha d'água. */
.hub-hero{padding:clamp(30px,4vw,52px) 0 clamp(22px,3vw,38px);}
.hub-hero .wrap{grid-template-columns:1.05fr .95fr;}
@media(max-width:900px){.hub-hero .wrap{grid-template-columns:1fr;}}
.hub-hero h1{font-size:clamp(26px,4vw,42px);line-height:1.06;margin:8px 0 0;}
.hub-hero p.lede{font-size:clamp(15px,2vw,17px);margin:14px 0 0;max-width:46ch;}
/* .seal existe no app.css só como .bcard .seal (card de marca da home) — não alcança aqui. */
.hub-hero .seal{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--brand);background:color-mix(in srgb,var(--brand) 10%,transparent);border:1px solid color-mix(in srgb,var(--brand) 26%,transparent);padding:5px 12px;border-radius:999px;}
.hub-hero .festologo{height:38px;width:auto;color:var(--brand);display:block;margin:18px 0 4px;}

.trustcard{background:linear-gradient(150deg,var(--panel),var(--panel-2));border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:15px;padding:22px;box-shadow:var(--shadow);}
.trustcard ul{margin:0;padding:0;list-style:none;display:grid;gap:13px;}
.trustcard li{display:flex;gap:12px;align-items:flex-start;}
.trustcard li svg{flex:none;color:var(--good);margin-top:2px;}
.trustcard li b{display:block;font-size:14px;}
.trustcard li span{font-size:12.5px;color:var(--ink-soft);}

/* --- vitrine --- */
/* .pgrid é o grid da página de categoria (categoria.css, que o hub não carrega). Nome
   próprio aqui para não amarrar os dois. O .pcard em si vem do app.css. */
.pgrid-hub{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;}
@media(max-width:1000px){.pgrid-hub{grid-template-columns:repeat(3,1fr);}}
@media(max-width:640px){.pgrid-hub{grid-template-columns:repeat(2,1fr);}}
/* No carrossel da home o .nm de 2 linhas (min-height:2.6em) dá conta. Em grade os cards
   esticam para a altura da linha e o nome de 3 linhas (MS9-LR-NG-D6-DI-AG-PSI-AS) desce
   o "Cotar item" 18px abaixo dos vizinhos. Botão colado no rodapé do card. */
.pgrid-hub .pcard .body{flex:1;}
.pgrid-hub .pcard .cot{margin-top:auto;}
.allwrap{text-align:center;margin-top:28px;}
.allbtn{display:inline-flex;align-items:center;gap:9px;background:var(--brand);color:#fff;font-weight:700;font-size:14.5px;padding:13px 24px;border-radius:11px;}
.allbtn:hover{filter:brightness(1.06);}

/* --- geo (bloco) --- */
.geo-hub h2{font-size:clamp(19px,2.5vw,24px);letter-spacing:-.02em;margin:0 0 6px;}
/* 100% do bloco, como o resto do site (regra única de 27/07). O 70ch parava na metade. */
.geo-hub p{font-size:13.5px;color:var(--ink-soft);margin:0 0 16px;max-width:none;}
.geo-hub .cities span{padding:5px 13px;}

/* --- por que comprar --- */
.whyboxes{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;}
@media(max-width:900px){.whyboxes{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.whyboxes{grid-template-columns:1fr;}}
.whybox{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px;box-shadow:var(--shadow);}
.whybox .wicon{width:44px;height:44px;border-radius:11px;background:color-mix(in srgb,var(--brand) 12%,transparent);color:var(--brand);display:grid;place-items:center;margin-bottom:14px;}
.whybox h3{font-size:15px;font-weight:700;margin:0 0 8px;color:var(--ink);letter-spacing:-.01em;}
.whybox p{font-size:13px;color:var(--ink-soft);line-height:1.6;margin:0;}

/* Foto de produto no card de família — padrão do fabricante (FESTO usa foto, não ícone).
   Fundo claro fixo: a foto do catálogo vem recortada em branco, então no tema escuro ela
   precisa da própria base clara para não virar retângulo flutuando. */
.fam-foto{display:flex;align-items:center;justify-content:center;height:150px;margin:-4px 0 14px;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;}
/* Sem recuo extra aqui: a imagem normalizada JÁ tem 100px de margem embutida no canvas
   (scripts/normalizar_imagens_produto.py). Somar max-width de 82% encolhia o produto a 24%
   do quadro — margem em cima de margem. */
.fam-foto img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply;}