/* LP de serviço — CSS do protótipo aprovado (Fase 1, artifact aa9cb716).
   Só o delta: tokens, header, footer e blocos comuns já vêm do app.css.

   ATENÇÃO ao vazamento de cascata: a home e a LP usam os MESMOS nomes de classe com
   sentidos diferentes (.sec-head, .hero, .sitem...). No protótipo isolado isso não
   aparecia; aqui o app.css carrega antes e as propriedades que a LP não redeclara
   sobrevivem — foi assim que `.sec-head{display:flex}` da home quebrou o cabeçalho
   centralizado da LP. Por isso os resets explícitos abaixo. */

/* --- resets contra o que vaza do app.css --- */
.sec-head{display:block;align-items:initial;justify-content:initial;gap:0;}

: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;--crit:#d1495b;
    --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;
  }
.util{background:var(--panel-2);border-bottom:1px solid var(--line);font-size:12.5px;}
.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;}
.crumb a:hover{color:var(--brand);}
.auth .badges .bl.festo{height:20px;}
/* hero */
  .hero{position:relative;overflow:hidden;padding:clamp(30px,4vw,50px) 0 clamp(24px,3vw,40px);}
/* `background-image` com a var, nunca o shorthand `background`. O shorthand sobrescrevia o
   `background-image:var(--hero-img,…)` do app.css e descartava a foto do hero setorial: o
   inline `--hero-img` ficava setado no elemento e sem nenhum efeito. Mesmo modo de falha do
   CSS de componente compartilhado — o delta vence o comum e some com a funcionalidade. */
.hero-bg{position:absolute;inset:0;z-index:0;background-image:var(--hero-img,radial-gradient(120% 90% at 88% 6%,color-mix(in srgb,var(--brand) 20%,transparent),transparent 60%));background-size:cover;background-position:center right;}
.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 74% 12%,#000,transparent 74%);-webkit-mask-image:radial-gradient(ellipse 80% 70% at 74% 12%,#000,transparent 74%);}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:38px;align-items:start;}
.hero .kick{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(--amber-ink);background:color-mix(in srgb,var(--amber) 14%,transparent);border:1px solid color-mix(in srgb,var(--amber) 32%,transparent);padding:5px 12px;border-radius:999px;}
.hero h1{font-size:clamp(27px,4.2vw,44px);line-height:1.05;letter-spacing:-.025em;font-weight:800;margin:16px 0 0;text-wrap:balance;}
.hero p.lede{font-size:clamp(15px,2vw,17px);color:var(--ink-soft);margin:15px 0 0;max-width:48ch;}
.hero .trust{display:flex;flex-wrap:wrap;gap:16px;margin-top:22px;}
.hero .trust div{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-soft);}
.hero .trust svg{color:var(--good);flex:none;}
/* form card */
  .leadcard{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:var(--shadow);}
.leadcard h2{font-size:18px;font-weight:800;margin:0 0 4px;letter-spacing:-.01em;}
.leadcard .sub{font-size:13px;color:var(--ink-soft);margin:0 0 16px;}
.leadcard label{font-size:12px;font-weight:600;color:var(--ink-soft);display:block;margin-bottom:5px;}
.leadcard .fld{margin-bottom:12px;}
.leadcard input,.leadcard select{width:100%;border:1px solid var(--line);background:var(--ground);border-radius:9px;padding:11px 13px;font-size:14px;color:var(--ink);font-family:var(--sans);}
.leadcard input:focus,.leadcard select:focus{outline:2px solid var(--brand);outline-offset:1px;}
.leadcard .btn{width:100%;background:var(--amber);color:#3a2600;font-weight:800;font-size:15px;border:0;border-radius:11px;padding:13px;cursor:pointer;margin-top:4px;display:inline-flex;align-items:center;justify-content:center;gap:9px;}
.leadcard .btn:hover{filter:brightness(1.05);}
.leadcard .or{text-align:center;font-size:12px;color:var(--ink-faint);margin:12px 0;position:relative;}
.leadcard .wabtn{width:100%;background:var(--panel);border:1px solid var(--line);color:var(--ink);font-weight:700;font-size:14px;border-radius:11px;padding:12px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:9px;}
.leadcard .wabtn:hover{border-color:var(--brand-lite);color:var(--brand);}
.leadcard .privacy{font-size:11px;color:var(--ink-faint);text-align:center;margin:12px 0 0;}
.sec-head{text-align:center;max-width:64ch;margin:0 auto 32px;}
.sec-head .eyebrow{display:block;margin-bottom:8px;}
.sec-head h2{font-size:clamp(22px,3vw,31px);letter-spacing:-.02em;font-weight:800;margin:0;text-wrap:balance;}
/* `max-width:none` de propósito. O app.css limita `.sec-head p` a 56ch para o layout da
   home, onde o cabeçalho é alinhado à esquerda. Aqui o `.sec-head` é CENTRALIZADO e já
   limitado a 64ch — herdar 56ch dava uma caixa de 511px encostada à esquerda dentro de um
   cabeçalho de 584px, com o texto centralizado dentro dela. Efeito: o lede parecia fora do
   eixo do título e dos cards (511 vs 584 vs 1185 = três larguras na mesma seção). */
.sec-head p{font-size:14.5px;color:var(--ink-soft);margin:10px 0 0;max-width:none;}
/* dor */
  .dor{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.pains{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
@media(max-width:820px){.pains{grid-template-columns:repeat(2,1fr);}}
@media(max-width:460px){.pains{grid-template-columns:1fr;}}
.pain{background:var(--ground);border:1px solid var(--line);border-radius:13px;padding:20px;border-top:3px solid var(--crit);}
.pain svg{color:var(--crit);margin-bottom:10px;}
.pain h3{font-size:15px;font-weight:700;margin:0 0 6px;}
.pain p{font-size:13px;color:var(--ink-soft);margin:0;}
/* metodologia */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:s;}
@media(max-width:820px){.steps{grid-template-columns:repeat(2,1fr);}}
@media(max-width:460px){.steps{grid-template-columns:1fr;}}
.mstep{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px 20px;box-shadow:var(--shadow);}
.mstep .num{font-family:var(--mono);font-size:13px;font-weight:700;color:#fff;background:var(--brand);width:30px;height:30px;border-radius:9px;display:grid;place-items:center;margin-bottom:13px;}
.mstep h3{font-size:15.5px;font-weight:700;margin:0 0 6px;letter-spacing:-.01em;}
.mstep p{font-size:13px;color:var(--ink-soft);margin:0;}
/* escopo */
  .scope{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
  .scope[data-n="1"]{grid-template-columns:1fr;}
  .scope[data-n="2"]{grid-template-columns:repeat(2,1fr);}
  /* 4 itens em 2x2 e não em 3+1: a linha órfã de um card lê como item de outra ordem */
  .scope[data-n="4"]{grid-template-columns:repeat(2,1fr);}
@media(max-width:760px){.scope{grid-template-columns:1fr;}}
.sitem{display:flex;gap:11px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:15px;box-shadow:var(--shadow);}
.sitem svg{flex:none;color:var(--brand);margin-top:1px;}
.sitem b{display:block;font-size:14px;margin-bottom:2px;}
.sitem span{font-size:12.5px;color:var(--ink-soft);}
/* Item de escopo que aponta para outra página (a mãe de cilindros alcança as duas filhas
   por aqui). Vira card clicável sem mudar o desenho do bloco. */
.sitem.linkado{transition:border-color .15s,transform .15s;}
.sitem.linkado:hover{border-color:var(--brand-lite);transform:translateY(-2px);}
.sitem-go{display:inline-flex;align-items:center;gap:5px;margin-top:8px;font-size:12px;font-weight:700;color:var(--brand);}
/* autoridade */
  .auth{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:clamp(24px,4vw,38px);box-shadow:var(--shadow);display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;}
@media(max-width:820px){.auth{grid-template-columns:1fr;}}
.auth h2{font-size:clamp(21px,3vw,27px);letter-spacing:-.02em;margin:8px 0 12px;text-wrap:balance;}
.auth p{font-size:14px;color:var(--ink-soft);margin:0 0 14px;}
.auth .badges{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.auth .badges .bl{height:22px;width:auto;color:var(--brand);}
.auth .stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.auth .stat{background:var(--ground);border:1px solid var(--line);border-radius:12px;padding:16px;}
.auth .stat .n{font-size:26px;font-weight:800;color:var(--brand);letter-spacing:-.02em;line-height:1;}
.auth .stat .t{font-size:12.5px;color:var(--ink-soft);margin-top:4px;}
/* prova social */
  .cases{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media(max-width:820px){.cases{grid-template-columns:1fr;}}
.case{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px;box-shadow:var(--shadow);}
.case .quote{font-size:14.5px;line-height:1.6;color:var(--ink);margin:0 0 16px;}
.case .who{display:flex;align-items:center;gap:11px;}
.case .av{width:38px;height:38px;border-radius:50%;background:var(--panel-2);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink-faint);font-weight:700;font-family:var(--mono);font-size:14px;}

/* --- Problema vs Solução (substitui a prova social; ver o partial) --- */
.ps-grid{display:grid;gap:16px;}
.ps-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);}
.ps-fotos{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);}
.ps-fotos figure{margin:0;background:#fff;position:relative;}
.ps-fotos img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;background:#fff;}
.ps-fotos figcaption{position:absolute;top:10px;left:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;background:var(--ink);color:#fff;border-radius:999px;padding:3px 9px;opacity:.85;}
.ps-corpo{display:grid;grid-template-columns:1fr 32px 1fr;align-items:center;gap:14px;padding:20px;}
@media(max-width:720px){.ps-corpo{grid-template-columns:1fr;gap:10px;}.ps-seta{transform:rotate(90deg);justify-self:center;}}
.ps-bloco h3{font-size:16px;font-weight:700;color:var(--ink);margin:4px 0 0;line-height:1.35;}
.ps-bloco p{font-size:13.5px;color:var(--ink-soft);line-height:1.55;margin:6px 0 0;}
.ps-rot{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;}
.ps-bloco.problema .ps-rot{color:#c0392b;}
.ps-bloco.solucao .ps-rot{color:var(--good);}
.ps-seta{color:var(--brand);justify-self:center;flex:none;}

/* --- tabela de referência técnica (LP de Reparo: viabilidade por família FESTO) --- */
/* As 280 linhas vêm todas no HTML; o JS só esconde <tr>. Sem JS, continua tudo legível. */
.tbl{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;}
.tbl-busca{display:flex;align-items:center;gap:9px;padding:13px 16px;border-bottom:1px solid var(--line);background:var(--panel-2);}
.tbl-busca svg{flex:none;color:var(--ink-faint);}
.tbl-busca input{flex:1;border:0;background:transparent;font-family:var(--mono);font-size:14px;color:var(--ink);min-width:0;padding:2px 0;}
.tbl-busca input:focus{outline:none;}
.tbl-busca input::placeholder{color:var(--ink-faint);font-family:var(--sans);}
.tbl-conta{font-family:var(--mono);font-size:12px;color:var(--brand);font-weight:700;white-space:nowrap;}
.tbl-abas{display:flex;flex-wrap:wrap;gap:6px;padding:12px 16px;border-bottom:1px solid var(--line);}
.tbl-abas button{display:inline-flex;align-items:center;gap:7px;background:transparent;border:1px solid var(--line);border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:600;color:var(--ink-soft);cursor:pointer;font-family:inherit;}
.tbl-abas button:hover{border-color:var(--brand-lite);color:var(--brand);}
.tbl-abas button.ativa{background:color-mix(in srgb,var(--brand) 12%,transparent);border-color:var(--brand);color:var(--brand);}
.tbl-abas button .n{font-family:var(--mono);font-size:11px;color:var(--ink-faint);font-weight:700;}
.tbl-abas button.ativa .n{color:var(--brand);}
.tbl-abas button.vazia{opacity:.45;}
/* A tabela é larga: rola dentro da caixa. O <body> nunca rola na horizontal. */
.tbl-scroll{overflow-x:auto;max-height:460px;overflow-y:auto;}
.tbl-scroll table{width:100%;border-collapse:collapse;font-size:13px;}
.tbl-scroll thead th{position:sticky;top:0;z-index:1;background:var(--panel-2);text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);font-weight:700;padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap;}
.tbl-scroll tbody td{padding:9px 14px;border-bottom:1px solid var(--line);color:var(--ink-soft);vertical-align:top;}
.tbl-scroll tbody tr:last-child td{border-bottom:0;}
.tbl-scroll tbody tr:hover td{background:color-mix(in srgb,var(--brand) 5%,transparent);}
/* A última coluna é o código da linha — part number em mono é a assinatura do projeto.
   :last-child em vez de classe: com 280 linhas, 840 atributos class= viravam peso de HTML
   para dizer o que a posição da célula já diz. */
.tbl-scroll tbody td:last-child{font-family:var(--mono);font-size:12.5px;color:var(--ink);font-weight:600;white-space:nowrap;}
.tbl-vazio{padding:26px 16px;text-align:center;}
.tbl-vazio p{margin:0 0 14px;font-size:13.5px;color:var(--ink-faint);}
.tbl-vazio-cta{display:inline-flex;align-items:center;gap:8px;background:var(--amber);color:#3a2600;font-weight:700;font-size:13.5px;padding:10px 18px;border-radius:9px;}
.tbl-vazio-cta:hover{filter:brightness(1.05);}
.tbl-nota{margin:14px 0 0;font-size:13px;color:var(--ink-soft);line-height:1.6;max-width:80ch;}
@media(max-width:640px){
  .tbl-scroll table{font-size:12.5px;}
  .tbl-scroll thead th,.tbl-scroll tbody td{padding:8px 11px;}
}

/* ── HERO SEM FOTO ───────────────────────────────────────────────────────────
   Apontamento do cliente: agora que home, hubs e setoriais têm foto, as páginas que não
   têm (Soluções, Níveis, e as LPs de serviço) ficaram "simples" em comparação.

   Caminho escolhido: NÃO licenciar uma foto por página. Seriam 10+ imagens, e foto de banco
   genérica para "Redes Industriais" ou "Montagem de Painéis" não diz nada sobre a página —
   vira enfeite, e enfeite genérico é o que este projeto vem recusando desde os packs.

   Em vez disso, três camadas abstratas que JÁ são a linguagem do site (a grade do hero da
   home e a do bloco azul de CTA), agora com presença:
     1. a grade técnica, um pouco mais visível
     2. um brilho de marca no canto onde a foto estaria
     3. uma faixa diagonal suave, que dá direção e tira a sensação de fundo chapado
   Zero asset novo, funciona em tema claro e escuro, e não compete com a leitura do título. */
.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);}
.hero:not(.hero--foto)::before{opacity:.62;}
.hero:not(.hero--foto)::after{content:"";position:absolute;right:-6%;top:-28%;width:46%;aspect-ratio:1;
  border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle, color-mix(in srgb,var(--brand-lite) 13%,transparent), transparent 68%);}