:root{
    --ground:#eef2f5;--panel:#fff;--panel-2:#e7edf2;--ink:#0f1e2b;--ink-soft:#43586a;
    --ink-faint:#7b8d9c;--line:#d3dde5;--brand:#007cc2;--brand-lite:#29abe2;--brand-pale:#4ab5e7;
    --amber:#fea500;--amber-ink:#8a5600;--steel:#5f7180;--good:#1f9d6b;
    --shadow:0 1px 2px rgba(15,30,43,.05),0 10px 30px rgba(15,30,43,.07);
    --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
    --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--maxw:1200px;
  }
  :root[data-theme="dark"]{--ground:#081320;--panel:#0f2130;--panel-2:#16293a;--ink:#e9eff4;--ink-soft:#a6bccb;--ink-faint:#6d8394;--line:#203547;--brand:#2fa5e6;--brand-lite:#4ab5e7;--brand-pale:#6cc6f0;--amber:#ffb42e;--amber-ink:#ffcf7a;--steel:#8298a8;--shadow:0 1px 2px rgba(0,0,0,.3),0 12px 34px rgba(0,0,0,.4);}
  @media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--ground:#081320;--panel:#0f2130;--panel-2:#16293a;--ink:#e9eff4;--ink-soft:#a6bccb;--ink-faint:#6d8394;--line:#203547;--brand:#2fa5e6;--brand-lite:#4ab5e7;--brand-pale:#6cc6f0;--amber:#ffb42e;--amber-ink:#ffcf7a;--steel:#8298a8;--shadow:0 1px 2px rgba(0,0,0,.3),0 12px 34px rgba(0,0,0,.4);}}

  *{box-sizing:border-box;}
  /* `hidden` é atributo, e regra de classe com display: o derruba sem avisar — foi o que
     deixou a caixa de erro do modal do WhatsApp visível e vazia. */
  [hidden]{display:none !important;}
  body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);line-height:1.55;-webkit-font-smoothing:antialiased;}
  a{color:inherit;text-decoration:none;}
  .mono{font-family:var(--mono);}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(16px,4vw,36px);}
  .demo-note{background:var(--brand);color:#fff;font-size:12px;text-align:center;padding:6px;font-family:var(--mono);letter-spacing:.02em;}
  .logo{height:34px;width:auto;color:var(--ink);display:block;}
  .eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--brand);font-weight:600;}

  /* utility bar */
  .util{background:var(--panel-2);border-bottom:1px solid var(--line);font-size:12.5px;}
  .util .wrap{display:flex;align-items:center;gap:18px;height:38px;color:var(--ink-soft);}
  .util a{display:inline-flex;align-items:center;gap:6px;}
  .util a:hover{color:var(--brand);}
  .util .sp{flex:1;}
  .socials{display:flex;gap:11px;}
  .socials a{color:var(--ink-faint);display:inline-flex;}
  .socials a:hover{color:var(--brand);}
  @media(max-width:760px){.util .hidesm{display:none;}}

  /* header */
  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);}
  .nav{display:flex;align-items:center;gap:22px;height:66px;}
  .nav .brand{flex:none;}
  /* `flex:1` + `justify-content:center`: o menu ocupa o vão entre o logo e os controles
     e se centraliza nele, em vez de ficar colado no logo com o spacer empurrando tudo. */
  nav.links{display:flex;flex:1;justify-content:center;align-items:center;gap:clamp(11px,1.5vw,19px);
    font-size:14px;font-weight:500;color:var(--ink-soft);}
  /* "Automação de Processos" e "Níveis de Automação" são rótulos longos por decisão do
     cliente. Sem nowrap eles quebram em duas linhas e desalinham a barra inteira. */
  nav.links > a,.subbtn{white-space:nowrap;}
  /* Entre ~960px e ~1320px o menu com os rótulos novos empurrava o botão do cabeçalho
     9px para fora da viewport — estouro horizontal na home inteira. Aperta a barra antes
     de chegar lá, em vez de deixar a página rolar de lado. */
  @media(max-width:1320px){
    .nav{gap:14px;}
    nav.links{font-size:13.2px;gap:clamp(9px,1.1vw,14px);}
  }
  @media(max-width:1080px){nav.links{font-size:12.6px;}.wa span{display:none;}}
  nav.links a:hover{color:var(--brand);}

  /* Submenu "Institucional". Abre no hover E no foco de teclado; o clique no botão é o
     caminho de quem chega por toque num aparelho que não dispara hover. */
  .hassub{position:relative;display:flex;align-items:center;}
  .subbtn{display:inline-flex;align-items:center;gap:5px;background:none;border:0;padding:0;cursor:pointer;
    font:inherit;color:inherit;}
  .subbtn:hover,.hassub:hover .subbtn,.hassub:focus-within .subbtn{color:var(--brand);}
  .subbtn svg{transition:transform .15s;}
  .hassub:hover .subbtn svg,.subbtn[aria-expanded="true"] svg{transform:rotate(180deg);}
  .sub{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(4px);
    display:none;flex-direction:column;min-width:158px;padding:7px;
    background:var(--panel);border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow);z-index:40;}
  .sub a{padding:9px 12px;border-radius:8px;font-size:14px;color:var(--ink-soft);white-space:nowrap;}
  .sub a:hover{background:var(--panel-2);color:var(--brand);}
  /* a faixa invisível cobre o vão entre o botão e a caixa: sem ela o menu fecha no meio
     do caminho do ponteiro */
  .hassub::after{content:"";position:absolute;top:100%;left:0;right:0;height:10px;}
  .hassub:hover .sub,.hassub:focus-within .sub,.subbtn[aria-expanded="true"] + .sub{display:flex;}
  /* sem o menu (<=960px) o spacer volta a ser quem empurra os controles para a direita */
  .nav .spacer{flex:1;}
  @media(min-width:961px){.nav .spacer{flex:0;}}
  .tgl{width:38px;height:38px;border-radius:9px;border:1px solid var(--line);background:var(--panel);color:var(--ink-soft);display:grid;place-items:center;cursor:pointer;flex:none;}
  .tgl:hover{color:var(--brand);border-color:var(--brand-lite);}
  .tgl .sun{display:none;}.tgl .moon{display:block;}
  :root[data-theme="dark"] .tgl .sun{display:block;}:root[data-theme="dark"] .tgl .moon{display:none;}
  @media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .tgl .sun{display:block;}:root:not([data-theme="light"]) .tgl .moon{display:none;}}
  .wa{display:inline-flex;align-items:center;gap:8px;background:var(--amber);color:#3a2600;font-weight:700;font-size:13.5px;padding:9px 15px;border-radius:9px;box-shadow:var(--shadow);white-space:nowrap;flex:none;}
  .wa:hover{filter:brightness(1.05);}
  @media(max-width:960px){nav.links{display:none;}}
/* menu mobile: substitui a navegação escondida acima. Sem ele, celular ficava só com
   breadcrumb e rodapé — achado da inspeção de jornada (tarefa 8). */
.mnav-btn{display:none;align-items:center;justify-content:center;width:42px;height:42px;
  border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:10px;cursor:pointer;}
.mnav-btn:hover{border-color:var(--brand);color:var(--brand);}
.mnav{display:none;border-top:1px solid var(--line);background:var(--panel);}
.mnav .wrap{display:flex;flex-direction:column;padding-block:6px;}
.mnav a{padding:13px 2px;font-size:15px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line);}
.mnav a:last-child{border-bottom:0;}
.mnav a:hover{color:var(--brand);}
@media(max-width:960px){
  .mnav-btn{display:inline-flex;}
  .mnav:not([hidden]){display:block;}
}
  @media(max-width:520px){.wa span{display:none;}.logo{height:30px;}}

  /* hero */
  .hero{position:relative;overflow:hidden;padding:clamp(36px,5vw,64px) 0 clamp(24px,4vw,40px);}
  /* Hero sem foto ganha presença por camada abstrata, não por foto de banco — ver a nota
     completa no servico.css. Aqui fica a versão da home/hub para quando não houver imagem. */
  .hero:not(.hero--foto){background:
      radial-gradient(120% 130% at 88% -10%, color-mix(in srgb,var(--brand) 16%,transparent), transparent 62%),
      linear-gradient(160deg, transparent 58%, color-mix(in srgb,var(--brand) 7%,transparent) 58.4%, transparent 78%),
      var(--ground);}
  /* camada de imagem de fundo (abaixo do pattern) — troque a var --hero-img por url('...') da imagem enviada */
  .hero-bg{position:absolute;inset:0;z-index:0;background-image:var(--hero-img,radial-gradient(120% 90% at 90% 10%,color-mix(in srgb,var(--brand) 22%,transparent),transparent 60%));background-size:cover;background-position:center right;}
  .hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,var(--ground) 32%,color-mix(in srgb,var(--ground) 55%,transparent) 60%,color-mix(in srgb,var(--ground) 20%,transparent));}
  .hero::before{content:"";position:absolute;inset:0;z-index:1;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:44px 44px;opacity:.4;mask-image:radial-gradient(ellipse 80% 70% at 72% 15%,#000,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 80% 70% at 72% 15%,#000,transparent 75%);}
  .hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.08fr .92fr;gap:38px;align-items:start;}
  .herocol{display:flex;flex-direction:column;gap:16px;}
  .herocta{display:inline-flex;align-items:center;gap:9px;margin-top:22px;background:var(--brand);color:#fff;font-weight:700;font-size:14.5px;padding:13px 22px;border-radius:11px;box-shadow:var(--shadow);}
  .herocta:hover{filter:brightness(1.06);}
  @media(max-width:900px){.hero .wrap{grid-template-columns:1fr;}}
  .kick{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.06em;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;}
  .hero h1{font-size:clamp(29px,4.8vw,48px);line-height:1.05;letter-spacing:-.025em;font-weight:800;margin:18px 0 0;text-wrap:balance;}
  .hero h1 em{font-style:normal;color:var(--brand);}
  .hero p.lede{font-size:clamp(15px,2vw,17.5px);color:var(--ink-soft);margin:15px 0 0;max-width:40ch;text-wrap:pretty;}
  .pnsearch{margin-top:24px;background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:16px;box-shadow:var(--shadow);}
  .pnsearch label{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);font-weight:600;}
  .pnsearch .field{display:flex;gap:9px;margin-top:9px;}
  .pnsearch input{flex:1;border:1px solid var(--line);background:var(--ground);border-radius:9px;padding:12px 14px;font-family:var(--mono);font-size:15px;color:var(--ink);min-width:0;}
  .pnsearch input:focus{outline:2px solid var(--brand);outline-offset:1px;}
  .pnsearch button{background:var(--brand);color:#fff;border:0;border-radius:9px;padding:0 20px;font-weight:700;font-size:14px;cursor:pointer;}
  .pnsearch .hint{margin-top:10px;font-size:12px;color:var(--ink-faint);display:flex;gap:7px;flex-wrap:wrap;align-items:center;}
  .pnsearch .hint b{color:var(--ink-soft);font-weight:600;}
  .pnsearch .tag{font-family:var(--mono);font-size:11.5px;background:var(--panel-2);border:1px solid var(--line);border-radius:6px;padding:2px 8px;color:var(--brand);}
  .prontocard{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);}
  .prontocard .big{font-size:42px;font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;}
  .prontocard .big span{color:var(--amber);}
  .prontocard .cap{font-size:13px;color:var(--ink-soft);margin-top:6px;}
  .prontocard hr{border:0;border-top:1px dashed var(--line);margin:15px 0;}
  .prontocard ul{margin:0;padding:0;list-style:none;display:grid;gap:9px;}
  .prontocard li{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink-soft);}
  .prontocard li svg{flex:none;color:var(--good);}

  /* authority — bigger numbers */
  .authority{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--panel);}
  .authority .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding-block:22px;}
  @media(max-width:640px){.authority .wrap{grid-template-columns:repeat(2,1fr);gap:20px 16px;}}
  /* `min-width:0` nos dois níveis: item de grid e item de flex nascem com `min-width:auto`,
     que impede encolher abaixo do conteúdo. No hub FESTO os rótulos são mais longos que os da
     home ("Distribuidor Autorizado · Official Partner") e empurravam a coluna além do 1fr —
     5px de estouro horizontal em 390px, só no hub. A home não acusava porque o texto dela é
     curto: o mesmo componente, quebrando em uma superfície e não na outra. */
  .auth-item{display:flex;align-items:center;gap:13px;min-width:0;}
  .auth-item .t{min-width:0;overflow-wrap:anywhere;}
  .auth-item .n{font-size:44px;font-weight:800;letter-spacing:-.03em;line-height:.9;font-variant-numeric:tabular-nums;color:var(--brand);}
  .auth-item .aico{width:44px;height:44px;border-radius:11px;background:color-mix(in srgb,var(--brand) 12%,transparent);color:var(--brand);display:grid;place-items:center;flex:none;}
  .auth-item .t{font-size:13px;color:var(--ink-soft);line-height:1.25;}
  .auth-item .t b{color:var(--ink);display:block;font-size:14px;font-weight:700;}

  /* padding-block, não `padding: X 0`: a forma curta zerava o padding LATERAL que o .wrap
     define, e todo elemento com as duas classes (<section class="block wrap">) perdia a
     margem lateral. Resultado: cabeçalho e rodapé começavam em x=389 e o miolo em x=353 —
     36px de desalinhamento na home, nas LPs a partir da 2ª seção, nos hubs, em /produtos e
     na busca. O hero escapava por ter o .wrap como filho, não na mesma tag. */
  section.block{padding-block:clamp(54px,7vw,100px);}

  /* ── Ritmo vertical entre blocos ────────────────────────────────────────────
     Antes cada template zerava o próprio topo com style="padding-top:0" inline (11
     arquivos). Funcionava enquanto a ordem das seções não mudasse — mas a ordem É
     curadoria por JSON, então bastava reordenar para o respiro sair errado, e não havia
     como corrigir centralmente porque inline vence o CSS.

     Regra: bloco colado em bloco não repete o padding de topo. Quem decide é a posição,
     não o template. */
  section.block + section.block{padding-block-start:0;}

  /* `.final` (bloco de fechamento) entra no ritmo: sem isto o respiro antes do fechamento
     dava 148px contra os 84px do resto — degrau visível justo antes do CTA. */
  section.block + section.final{padding-block-start:0;}

  /* ⚠️ `.dor + section.block` NÃO entra na regra de zerar.
     A regra de "bloco colado em bloco não repete o topo" pressupõe que o respiro do bloco
     ANTERIOR continue visível — o que só vale quando ele não tem fundo próprio. A `.dor`
     tem faixa, e o padding dela é do filho: o respiro morre dentro da faixa e o bloco
     seguinte encosta na borda dela. Media 26px do topo da seção até o título nas LPs de
     serviço e nas 8 setoriais — o eyebrow ficava grudado na faixa. */
  .dor + section.block{padding-block-start:clamp(54px,7vw,100px);}
  section.final{padding-block-start:clamp(54px,7vw,100px);}
  section.block + section.final{padding-block-start:0;}

  /* Seção com fundo próprio (.dor) precisa do respiro interno completo, senão o fundo
     encosta no conteúdo — por isso não entra na regra de cima. Mesmo valor das demais,
     que era a inconsistência: ela vinha com clamp(38px,5vw,56px) inline, quase metade. */
  .dor > .block{padding-block:clamp(54px,7vw,100px);}
  .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px;}
  .sec-head h2{font-size:clamp(21px,3vw,29px);letter-spacing:-.02em;font-weight:800;margin:6px 0 0;text-wrap:balance;}
  /* REGRA ÚNICA DE LARGURA DO DESCRITIVO (cliente, 27/07).
     Descritivo abaixo de título ocupa 100% do bloco, sempre. A única exceção é o cabeçalho
     CENTRALIZADO das LPs de serviço e setoriais, que é um eixo estreito de propósito e vive
     no servico.css.
     Antes: 56ch aqui, 60ch no .sol, 50ch no .final, 78ch no .pir-texto, 74ch no .conj-lead,
     62ch no .apres-txt. Seis larguras diferentes para o mesmo papel — e como `ch` depende do
     tamanho da fonte, cada bloco quebrava num ponto distinto do miolo. É o que o cliente viu
     como texto "quebrado no meio da largura". */
  .sec-head p{font-size:14px;color:var(--ink-soft);margin:6px 0 0;max-width:none;}
  .seelink{font-size:13.5px;font-weight:600;color:var(--brand);white-space:nowrap;}

  /* brand hubs 2-col */
  .brands{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
  @media(max-width:760px){.brands{grid-template-columns:1fr;}}
  .bcard{position:relative;overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:26px;box-shadow:var(--shadow);transition:transform .15s,border-color .15s;}
  .bcard:hover{transform:translateY(-3px);border-color:var(--brand-lite);}
  .bcard .wm{position:absolute;top:-8px;right:16px;font-weight:800;font-size:64px;letter-spacing:-.04em;color:color-mix(in srgb,var(--brand) 8%,transparent);}
  .bcard .seal{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--brand);background:color-mix(in srgb,var(--brand) 10%,transparent);border-radius:999px;padding:5px 11px;}
  .bcard h3{font-size:23px;font-weight:800;margin:14px 0 2px;letter-spacing:-.01em;}
  .bcard .hublogo{height:30px;width:auto;color:var(--brand);display:block;margin:15px 0 3px;position:relative;}
  .bcard .hublogo.festo{height:27px;}
  .bcard .disamb{font-size:12.5px;color:var(--ink-faint);font-family:var(--mono);position:relative;}
  .bcard p{font-size:14px;color:var(--ink-soft);margin:12px 0 16px;}
  .bcard .fams{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px;}
  .bcard .fams span{font-size:12px;background:var(--panel-2);border:1px solid var(--line);border-radius:7px;padding:4px 10px;color:var(--ink-soft);}
  .bcard .go{font-weight:700;font-size:14px;color:var(--brand);display:inline-flex;align-items:center;gap:7px;}

  /* categories */
  .cats{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;}
  @media(max-width:900px){.cats{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:480px){.cats{grid-template-columns:1fr;}}
  .cat{display:flex;flex-direction:column;justify-content:space-between;gap:15px;background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:16px;box-shadow:var(--shadow);transition:transform .15s,border-color .15s;min-height:112px;}
/* card de família macro com "pack": composição de produtos reais das 3 maiores
   subcategorias. Mesmo princípio do card de produto — o comprador reconhece o objeto
   antes de ler o rótulo. Sem o arquivo, o card mantém o pictograma e o layout antigo. */
.cat.com-pack{padding:0;overflow:hidden;gap:0;}
.cat.com-pack .cat-pack{display:block;background:#fff;border-bottom:1px solid color-mix(in srgb,var(--brand) 16%,var(--line));}
/* O card assume a proporção DA IMAGEM (16:9) em vez de altura fixa. Antes era
   `height:132px` numa caixa de largura fluida — ou seja ~2,8:1 — com `object-fit:contain` e
   padding: a imagem 16:9 entrava reduzida e sobrava fundo branco nas laterais. Com
   aspect-ratio igual ao do arquivo, `cover` preenche o quadro inteiro sem cortar nada. */
.cat.com-pack .cat-pack img{width:100%;aspect-ratio:16/9;height:auto;object-fit:cover;display:block;}
.cat.com-pack > div{padding:13px 16px 15px;}
  .cat:hover{transform:translateY(-3px);border-color:var(--brand-lite);}
  .cat .ico{width:32px;height:32px;color:var(--brand);}
  .cat .nm{font-size:14.5px;font-weight:700;letter-spacing:-.01em;}
  .cat .ct{font-family:var(--mono);font-size:12px;color:var(--ink-faint);}
  .cat .ct b{color:var(--amber-ink);font-weight:700;}

  /* solutions */
  .sol{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:clamp(22px,3vw,34px);box-shadow:var(--shadow);}
  .sol .top{margin-bottom:20px;}
  .sol h2{font-size:clamp(21px,3vw,29px);letter-spacing:-.02em;margin:6px 0 0;text-wrap:balance;}
  .sol h2 em{font-style:normal;color:var(--brand);}
  .sol p{font-size:14px;color:var(--ink-soft);margin:8px 0 0;max-width:none;}
  .sgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;}
  @media(max-width:900px){.sgrid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:520px){.sgrid{grid-template-columns:1fr;}}
  .sitem{display:flex;align-items:center;gap:10px;background:var(--ground);border:1px solid var(--line);border-radius:10px;padding:12px 13px;font-size:13px;font-weight:600;transition:border-color .15s,background .15s;}
  .sitem:hover{border-color:var(--brand-lite);background:var(--panel-2);}
  .sitem svg{flex:none;color:var(--brand);}
  .sol .allserv{margin-top:18px;display:inline-flex;align-items:center;gap:8px;background:var(--brand);color:#fff;font-weight:700;font-size:14px;padding:11px 18px;border-radius:10px;}

  /* product carousel with arrows */
  .carousel{position:relative;}
  .carhead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px;}
  .carhead .arrows{display:flex;gap:8px;}
  .carbtn{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--ink-soft);display:grid;place-items:center;cursor:pointer;transition:.15s;}
  .carbtn:hover{color:#fff;background:var(--brand);border-color:var(--brand);}
  .carbtn:disabled{opacity:.35;cursor:default;color:var(--ink-faint);background:var(--panel);border-color:var(--line);}
  .track{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(210px,64vw,238px);align-items:start;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px;scrollbar-width:none;-ms-overflow-style:none;}
  .track::-webkit-scrollbar{display:none;height:0;}
  .pcard{scroll-snap-align:start;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:13px;overflow:hidden;box-shadow:var(--shadow);transition:transform .15s ease,border-color .15s ease;}
  .pcard:hover{transform:translateY(-3px);border-color:var(--brand-lite);}
  /* Fundo BRANCO, igual ao grid de /produtos. O gradiente colorido daqui punha a foto de
     produto — que é recortada sobre branco — dentro de um retângulo branco flutuando num
     fundo azulado. Nos dois temas. A imagem tem de encostar no fundo dela. */
  .pcard .imgbox{position:relative;aspect-ratio:4/3;background:#fff;border-bottom:1px solid color-mix(in srgb,var(--brand) 18%,var(--line));display:grid;place-items:center;overflow:hidden;}
  .pcard .imgbox .ghost{position:absolute;width:44px;height:44px;color:var(--line);}
  /* inset:0, não height:100% — o .imgbox só tem altura via aspect-ratio, e percentual de
     filho não resolve contra pai de altura indefinida: a img virava quadrada e era decepada
     pelo overflow. Ver a mesma correção em .gmain img (produto.css). */
  .pcard .imgbox img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:12px;box-sizing:border-box;}
  .pcard .badge{position:absolute;top:9px;left:9px;z-index:2;display:inline-flex;align-items:center;background:rgba(10,22,34,.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);border:1px solid rgba(255,255,255,.28);padding:4px 8px;border-radius:6px;}
  .pcard .badge svg{height:11px;width:auto;color:#fff;display:block;}
  .pcard .body{padding:12px 13px 13px;display:flex;flex-direction:column;gap:6px;}
  .pcard .sku{font-family:var(--mono);font-size:11.5px;color:var(--amber-ink);font-weight:700;}
  .pcard .nm{font-size:13.5px;font-weight:600;line-height:1.3;letter-spacing:-.01em;min-height:2.6em;}
  .pcard .pcat{font-size:11.5px;color:var(--ink-faint);}
  .pcard .cot{margin-top:4px;display:inline-flex;align-items:center;justify-content:center;gap:6px;background:color-mix(in srgb,var(--amber) 16%,transparent);color:var(--amber-ink);border:1px solid color-mix(in srgb,var(--amber) 40%,transparent);font-weight:700;font-size:12.5px;padding:8px;border-radius:8px;}
  .pcard:hover .cot{background:var(--amber);color:#3a2600;}

  /* differentiator */
  .diff{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:clamp(22px,4vw,38px);box-shadow:var(--shadow);display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center;}
  @media(max-width:820px){.diff{grid-template-columns:1fr;}}
  /* Variante empilhada: texto em cima ocupando a largura toda, passos embaixo em
     linha. O layout de 2 colunas espreme os passos numa coluna de ~450px, o que só
     funciona com texto curto (é o caso do hub, com 6 palavras por passo). Quando o
     passo explica um conceito, ele precisa da largura inteira. */
  .diff--empilhado{grid-template-columns:1fr;gap:22px;}
  /* Um passo por LINHA (pedido do Herasmo, 27/07). Com a largura inteira do bloco, o
     título e a explicação cabem na mesma linha, sem quebra. */
  .diff--empilhado .steps{grid-template-columns:1fr;}
  .diff--empilhado .step{align-items:center;}
  .diff--empilhado .step .st{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;}
  .diff--empilhado .step .st b{white-space:nowrap;}
  .diff .lab-badge{font-family:var(--mono);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--amber-ink);font-weight:700;}
  .diff h2{font-size:clamp(21px,3vw,28px);letter-spacing:-.02em;margin:8px 0 12px;text-wrap:balance;}
  .diff p{font-size:14px;color:var(--ink-soft);margin:0 0 16px;}
  .diff .cta{display:inline-flex;align-items:center;gap:9px;background:var(--brand);color:#fff;font-weight:700;font-size:14px;padding:12px 20px;border-radius:10px;}
  .diff .steps{display:grid;gap:11px;}
  .diff .step{display:flex;gap:13px;align-items:flex-start;background:var(--ground);border:1px solid var(--line);border-radius:11px;padding:13px;}
  .diff .step .idx{font-family:var(--mono);font-weight:700;color:var(--brand);font-size:13px;flex:none;}
  .diff .step .st{font-size:13px;}
  .diff .step .st b{display:block;margin-bottom:2px;}

  /* blog */
  .blog{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
  @media(max-width:820px){.blog{grid-template-columns:1fr;}}
  .bpost{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:13px;overflow:hidden;box-shadow:var(--shadow);transition:transform .15s,border-color .15s;}
  .bpost:hover{transform:translateY(-3px);border-color:var(--brand-lite);}
  .bpost .cover{aspect-ratio:16/9;background:linear-gradient(135deg,var(--brand),color-mix(in srgb,var(--brand) 55%,#062a3f));position:relative;overflow:hidden;}
  /* A regra da <img> existia só no conteudo.css (blog) e faltava aqui (home): a capa
     1200x630 entrava em tamanho natural dentro de uma caixa 16/9 de 358px com
     overflow:hidden, e o card mostrava só um recorte do canto. Mesmo modo de falha de
     .rcard .rimg — caixa com aspect-ratio nunca segura filho maior sozinha. */
  .bpost .cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
  .bpost .cover::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:26px 26px;mask-image:radial-gradient(ellipse 70% 90% at 90% 10%,#000,transparent 70%);-webkit-mask-image:radial-gradient(ellipse 70% 90% at 90% 10%,#000,transparent 70%);}
  .bpost .cover .tagcat{position:absolute;left:12px;bottom:12px;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.04em;color:#fff;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.25);padding:3px 9px;border-radius:6px;}
  .bpost .pbody{padding:15px 16px 17px;display:flex;flex-direction:column;gap:8px;flex:1;}
  .bpost .date{font-family:var(--mono);font-size:11px;color:var(--ink-faint);}
  .bpost h3{font-size:15.5px;font-weight:700;line-height:1.3;letter-spacing:-.01em;margin:0;}
  .bpost .rd{margin-top:auto;font-size:13px;font-weight:600;color:var(--brand);}

  /* geo */
  .geo{background:var(--panel-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
  .geo .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding-block:18px;}
  .geo .lbl{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint);font-weight:600;}
  .geo .cities{display:flex;flex-wrap:wrap;gap:8px;}
  .geo .cities span{font-size:13px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:4px 12px;color:var(--ink-soft);}
  .geo .cities span.home{border-color:var(--brand-lite);color:var(--brand);font-weight:600;}

  /* final cta */
  .final{padding-block:clamp(40px,6vw,64px);}
  /* 2 colunas: texto à esquerda, botões à direita. Em 1 coluna o conteúdo ocupava metade
     do bloco e sobrava um vazio azul do mesmo tamanho (apontamento do cliente, 27/07). */
  .final .box{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--brand),color-mix(in srgb,var(--brand) 58%,#062a3f));color:#fff;border-radius:20px;padding:clamp(26px,4vw,46px);box-shadow:var(--shadow);
    display:grid;grid-template-columns:minmax(0,1.45fr) minmax(210px,.55fr);gap:clamp(22px,3.4vw,48px);align-items:center;}
  .final-txt{position:relative;min-width:0;}
  /* 🎯 pointer-events:none — ESTE ERA O DEFEITO DOS "BOTÕES INATIVOS".
     A grade decorativa é um ::after em inset:0. Sendo o último filho posicionado da caixa,
     ela é pintada POR CIMA de .actions e interceptava todo clique. Os botões nunca
     estiveram desabilitados: estavam cobertos. Valia para TODO CTA azul do site — LPs,
     hubs, central e setoriais —, e nenhuma checagem acusava: o href estava certo, o HTML
     estava certo, o console limpo. Só clicando de verdade. */
  .final .box::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:38px 38px;mask-image:radial-gradient(ellipse 60% 100% at 100% 0%,#000,transparent 70%);-webkit-mask-image:radial-gradient(ellipse 60% 100% at 100% 0%,#000,transparent 70%);}
  .final h2{position:relative;font-size:clamp(23px,3.5vw,33px);letter-spacing:-.02em;margin:0 0 10px;text-wrap:balance;}
  .final p{position:relative;font-size:15px;opacity:.92;margin:0;max-width:none;}
  .final .actions{position:relative;display:flex;flex-direction:column;gap:11px;}
  .final .actions a{text-align:center;}
  @media(max-width:860px){
    .final .box{grid-template-columns:1fr;gap:24px;}
    .final .actions{flex-direction:row;flex-wrap:wrap;}
    .final .actions a{text-align:left;}
  }
  .final .b1{background:var(--amber);color:#3a2600;font-weight:800;padding:13px 22px;border-radius:11px;font-size:14.5px;}
  .final .b2{background:rgba(255,255,255,.14);color:#fff;font-weight:700;padding:13px 22px;border-radius:11px;font-size:14.5px;border:1px solid rgba(255,255,255,.25);}

  /* footer */
  footer{background:var(--panel);border-top:1px solid var(--line);}
  .foot-main{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.15fr;gap:30px;padding:40px 0 30px;}
  @media(max-width:820px){.foot-main{grid-template-columns:1fr 1fr;gap:26px;}}
  @media(max-width:480px){.foot-main{grid-template-columns:1fr;}}
  .foot-about .logo{margin-bottom:14px;height:38px;}
  .foot-about p{font-size:13px;color:var(--ink-soft);max-width:34ch;margin:0 0 14px;}
  .foot-about .socials a{width:34px;height:34px;border-radius:8px;border:1px solid var(--line);display:grid;place-items:center;color:var(--ink-soft);}
  .foot-about .socials a:hover{color:var(--brand);border-color:var(--brand-lite);}
  .fcol h4{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint);font-family:var(--mono);margin:0 0 13px;font-weight:700;}
  .fcol ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;}
  .fcol a{font-size:13.5px;color:var(--ink-soft);}
  .fcol a:hover{color:var(--brand);}
  .fcol .contact{font-size:13.5px;color:var(--ink-soft);display:grid;gap:11px;}
  .fcol .contact a{display:flex;gap:9px;align-items:flex-start;}
  .fcol .contact .ico{flex:none;color:var(--brand);margin-top:1px;}
  .fcol .contact .wai{color:#25d366;}
  .foot-bot{border-top:1px solid var(--line);padding:16px 0;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;font-size:12px;color:var(--ink-faint);font-family:var(--mono);}
  .siteby{display:inline-flex;align-items:center;gap:7px;color:var(--ink-faint);}
  .siteby:hover{color:var(--ink);}
  .siteby .rbicon{width:20px;height:20px;color:currentColor;display:block;}

.crumb{padding:16px 0 4px;font-size:12.5px;color:var(--ink-faint);font-family:var(--mono);display:flex;flex-wrap:wrap;gap:7px;align-items:center;}
/* breadcrumb — compartilhado por produto, categoria, post, página e /produtos/.
   Estava só nos deltas de produto/categoria: no post saía sem estilo. */
.crumb a:hover{color:var(--brand);}
.crumb .sep{opacity:.5;}
.crumb .cur{color:var(--ink-soft);}

/* faq — compartilhado por produto, LP de serviço e hub de marca.
   Mesmo caso do breadcrumb acima: estava só no delta de produto e a LP, que não carrega
   produto.css, servia o FAQ como <details> cru do browser. O produto.css guarda só o
   cabeçalho com SKU (.faq-prod). */
.faq-layout{display:grid;grid-template-columns:minmax(210px,1fr) 3fr;gap:38px;align-items:start;}
@media(max-width:760px){.faq-layout{grid-template-columns:1fr;gap:16px;}}
.faq-head{position:sticky;top:84px;}
@media(max-width:760px){.faq-head{position:static;}}
.faq{display:grid;gap:10px;}
.faq details{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:0 18px;box-shadow:var(--shadow);}
.faq summary{cursor:pointer;padding:15px 0;font-weight:700;font-size:14.5px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;}
.faq summary::-webkit-details-marker{display:none;}
/* o seletor era `summary .ico`, mas nenhum dos três templates põe class no svg — a regra
   nunca casou e o chevron nunca girou. Casa no elemento. */
.faq summary svg{flex:none;color:var(--brand);transition:transform .2s;}
.faq details[open] summary svg{transform:rotate(180deg);}
.faq .ans{padding:0 0 16px;font-size:14px;color:var(--ink-soft);line-height:1.65;}

/* card de navegação (.fam) — compartilhado pelo hub de marca (famílias do catálogo) e pela
   central de soluções. Mesma regra do breadcrumb e do FAQ: componente usado por mais de um
   template não mora em delta, senão sai cru no template que não carrega aquele arquivo. */
/* .fams (sem sufixo) é outro componente: os chips do card de marca da home, scopados em
   .bcard. Por isso o grid aqui é .fams-grid. */
.fams-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;}
@media(max-width:820px){.fams-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.fams-grid{grid-template-columns:1fr;}}
.fam{display:flex;flex-direction:column;gap:11px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:var(--shadow);transition:transform .15s,border-color .15s;}
.fam:hover{transform:translateY(-3px);border-color:var(--brand-lite);}
.fam .ico{width:34px;height:34px;color:var(--brand);}
.fam h3{font-size:16px;font-weight:700;margin:0;letter-spacing:-.01em;}
.fam p{font-size:13px;color:var(--ink-soft);margin:0;flex:1;}
.fam .foot{display:flex;align-items:center;justify-content:space-between;}
.fam .ct{font-family:var(--mono);font-size:12px;color:var(--amber-ink);font-weight:700;}
.fam .go{font-size:13px;font-weight:600;color:var(--brand);display:inline-flex;align-items:center;gap:5px;}


/* Paginação — view própria (resources/views/vendor/pagination/pahc.blade.php).
   Substitui a view padrão do Laravel, que era Tailwind: sem as classes utilitárias, as setas
   SVG renderizavam a 1185px e estouravam o layout de /produtos, /blog e /categoria. */
.pag{display:flex;flex-direction:column;align-items:center;gap:14px;margin:34px 0 4px;}
.pag-info{margin:0;font-size:13.5px;color:var(--ink-soft);}
.pag-info strong{color:var(--ink);font-weight:700;}
.pag-links{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin:0;padding:0;}
.pag-btn{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 13px;font-size:14px;font-weight:600;color:var(--ink-soft);background:var(--panel);border:1px solid var(--line);border-radius:9px;transition:border-color .15s,color .15s;}
.pag-btn:hover{border-color:var(--brand);color:var(--brand);}
.pag-btn.is-atual{background:var(--brand);border-color:var(--brand);color:#fff;}
.pag-btn.is-off{opacity:.42;cursor:not-allowed;}
.pag-btn.is-off:hover{border-color:var(--line);color:var(--ink-soft);}
.pag-gap{padding:0 4px;color:var(--ink-faint);}
@media(max-width:560px){.pag-btn{min-width:36px;height:36px;padding:0 10px;font-size:13px;}}

/* conjunto de engenharia (campo 5 do item-ideal) — o bloco que separa catálogo de
   engenharia de aplicação: o que a aplicação exige junto, não irmão da mesma série.

   Mora AQUI, e não no produto.css, porque é componente COMPARTILHADO: a página de produto
   usa `product_assemblies`; a LP setorial usa o partial `conjunto_setor`. A LP não carrega
   produto.css — com o CSS lá, a grade saía como lista sem estilo, sem erro nenhum no
   console e sem falhar nenhuma checagem de DOM. Só o screenshot pegou. */
.block-conj{background:var(--ground);}
.conj-lead{font-size:14.5px;color:var(--ink-soft);line-height:1.7;margin:-8px 0 22px;max-width:none;}
.conj{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;}
@media(max-width:900px){.conj{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.conj{grid-template-columns:1fr;}}
.conj-item{display:flex;flex-direction:column;gap:5px;background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--brand);border-radius:12px;padding:15px 16px 14px;box-shadow:var(--shadow);transition:transform .15s,border-color .15s;}
a.conj-item:hover{transform:translateY(-3px);border-color:var(--brand-lite);border-top-color:var(--brand);}
.conj-item--sem-link{border-top-color:var(--amber);}
.conj-papel{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--brand);font-weight:700;}
.conj-item--sem-link .conj-papel{color:var(--amber-ink);}
.conj-label{font-size:14.5px;font-weight:800;letter-spacing:-.01em;line-height:1.3;color:var(--ink);}
.conj-motivo{font-size:12.5px;color:var(--ink-soft);line-height:1.5;}
.conj-link{display:inline-flex;align-items:center;gap:5px;margin-top:auto;padding-top:10px;font-size:12px;font-weight:700;color:var(--brand);}
.conj-link--cota{color:var(--ink-faint);font-weight:600;}

/* Pirâmide de automação (S3 · frente 4) — eixo de navegação por nível, na língua do
   engenheiro. Mora no app.css porque é componente de página de conteúdo, e a lição da S3 foi
   justamente esta: componente que pode aparecer em mais de um template não vai para delta. */
.pir{display:flex;flex-direction:column;gap:14px;}
.pir-nivel{display:grid;grid-template-columns:8px 1fr;gap:0;background:var(--panel);border:1px solid var(--line);border-radius:13px;overflow:hidden;box-shadow:var(--shadow);}
.pir-barra{background:var(--brand);opacity:calc(1 - var(--pir-i) * .13);}
.pir-corpo{padding:16px 20px 17px;}
.pir-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;}
.pir-rotulo{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--brand);font-weight:700;background:color-mix(in srgb,var(--brand) 10%,transparent);border:1px solid color-mix(in srgb,var(--brand) 26%,transparent);border-radius:6px;padding:3px 9px;}
.pir-corpo h3{font-size:16.5px;font-weight:800;letter-spacing:-.015em;margin:0;color:var(--ink);}
.pir-texto{font-size:13.5px;color:var(--ink-soft);line-height:1.6;margin:8px 0 0;max-width:none;}
.pir-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.pir-chip{display:inline-flex;align-items:center;gap:8px;background:var(--ground);border:1px solid var(--line);border-radius:8px;padding:6px 11px;font-size:12.5px;font-weight:600;color:var(--ink);transition:border-color .15s,transform .15s;}
.pir-chip:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-1px);}
.pir-chip-n{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--amber-ink);background:color-mix(in srgb,var(--amber) 16%,transparent);border-radius:5px;padding:1px 6px;}
@media(max-width:620px){.pir-corpo{padding:14px 15px 15px;}.pir-corpo h3{font-size:15px;}}

/* Foto do componente no card do conjunto. Sai do próprio catálogo — nenhuma imagem nova
   foi produzida para isto: é a mesma foto que o produto já usa na listagem.
   `inset:0` no filho pelo mesmo motivo de sempre: `aspect-ratio` não segura filho maior. */
.conj-foto{position:relative;display:block;aspect-ratio:4/3;background:#fff;border:1px solid var(--line);border-radius:9px;overflow:hidden;margin-bottom:11px;}
.conj-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:9px;box-sizing:border-box;}
a.conj-item--foto:hover .conj-foto{border-color:var(--brand-lite);}

/* Foto de setor. O hero já tinha `--hero-img` e o scrim em `.hero-bg::after`; aqui só
   reforçamos o contraste do lado da copy, porque foto industrial real tem muito detalhe
   claro e o degradê padrão foi calibrado para o gradiente da marca, não para foto. */
.hero--foto .hero-bg::after{background:linear-gradient(100deg,var(--ground) 24%,color-mix(in srgb,var(--ground) 58%,transparent) 50%,color-mix(in srgb,var(--ground) 12%,transparent));}
/* a grade de fundo compete com a textura da foto: quase apagada quando há imagem */
.hero--foto::before{opacity:.1;}

/* Miniatura no card da grade de setores. `inset:0` no filho pelo motivo de sempre. */
.fam-capa{position:relative;display:block;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:var(--panel-2);margin-bottom:13px;}
.fam-capa img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .35s ease;}
.fam--foto:hover .fam-capa img{transform:scale(1.045);}

/* Box de apresentação do setor: foto + contexto, entre a dor e o escopo. */
.apres{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(20px,3.2vw,44px);align-items:center;}
.apres-foto{position:relative;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:var(--panel-2);box-shadow:var(--shadow);}
.apres-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.apres-txt h2{font-size:clamp(20px,2.7vw,28px);letter-spacing:-.02em;font-weight:800;margin:8px 0 0;text-wrap:balance;}
.apres-txt p{font-size:15px;color:var(--ink-soft);line-height:1.75;margin:12px 0 0;max-width:none;}
.apres-nota{font-size:13.5px !important;border-left:3px solid var(--amber);padding-left:13px;}
@media(max-width:820px){.apres{grid-template-columns:1fr;}}

/* ── WIDGET FLUTUANTE + PORTÃO DO WHATSAPP (cliente, 27/07) ──────────────────
   O botão flutuante faltava; o portão qualifica o contato antes de abrir a conversa.
   Verde do WhatsApp de propósito — é o único lugar do site que usa a cor da plataforma, e
   é o que faz o botão ser reconhecido sem legenda. */
.wa-float{position:fixed;right:clamp(14px,3vw,26px);bottom:clamp(14px,3vw,26px);z-index:60;
  display:inline-flex;align-items:center;gap:10px;padding:13px 18px 13px 15px;border:0;cursor:pointer;
  background:#25d366;color:#04301a;font:700 14.5px/1 var(--sans);border-radius:999px;
  box-shadow:0 6px 22px rgba(0,0,0,.22),0 2px 6px rgba(0,0,0,.12);transition:transform .15s,box-shadow .15s;}
.wa-float:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.28);}
.wa-float svg{flex:none;}
/* no celular só o ícone: a legenda cobriria conteúdo numa tela estreita */
@media(max-width:560px){.wa-float{padding:15px;}.wa-float span{display:none;}}

.wa-modal{position:fixed;inset:0;z-index:80;background:rgba(6,16,26,.62);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:clamp(12px,4vw,32px);overflow-y:auto;}
.wa-modal[hidden]{display:none;}
.wa-card{position:relative;width:100%;max-width:560px;background:var(--panel);border:1px solid var(--line);
  border-radius:18px;padding:clamp(20px,3vw,30px);box-shadow:0 24px 60px rgba(0,0,0,.35);margin:auto;}
.wa-fechar{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:9px;
  border:1px solid var(--line);background:var(--panel);color:var(--ink-soft);display:grid;place-items:center;cursor:pointer;}
.wa-fechar:hover{color:var(--brand);border-color:var(--brand-lite);}
.wa-head{display:flex;gap:13px;align-items:flex-start;padding-right:38px;}
.wa-ico{flex:none;width:42px;height:42px;border-radius:12px;background:#25d366;color:#04301a;display:grid;place-items:center;}
.wa-head h2{font-size:19px;font-weight:800;letter-spacing:-.015em;margin:0;color:var(--ink);}
.wa-sub{font-size:13px;color:var(--ink-soft);line-height:1.5;margin:4px 0 0;}
.wa-card .pf{margin-top:18px;}
.wa-modal .wa-enviar{background:#25d366;color:#04301a;}
.wa-modal .wa-enviar:disabled{opacity:.6;cursor:progress;}