/* Modelo PÁGINA DE SETOR (/setores/<setor>/). 1ª instância: _paginas/setor-associacoes-e-institutos.html.
   Carregado depois do previa.css; não depende de previa-servico.css, previa-case.css nem previa-projeto.css: o que veio
   desses arquivos foi copiado para cá com nome .setor-*, com os mesmos valores, para o bloco ficar igual nas outras páginas.
   A classe .setor (sem sufixo) é o cartão "Para quem" da Home e mora no previa.css; aqui, tudo tem sufixo.
   Cores sempre pelas variáveis de superfície (data-surf). Escrito do celular para cima: base 390, depois 621, 821, 981 e 1100.

   Blocos, na ordem (o que troca em cada setor está em _docs/paginas/setor-fatos.md, seção 4.3):
   1. Topo (hero): trilha, sobretítulo "Para quem · {setor}", H1 com o termo de busca, resposta de 40 a 60 palavras, dois botões,
      .setor-telas (duas janelas de navegador sobrepostas, com telas reais) e .setor-logos (linha de logos do setor).
   2. O que é particular (claro): .setor-mapa (portal ilustrado com marcadores numerados) + .setor-pontos (um cartão por marcador;
      carrossel no celular).
   3. O que fazemos (papel): .pilha/.camada da Home, com link para a solução no título e pílulas de prova.
   4. Cases do setor (roxo): .setor-cases com cartões .setor-case (imagem, cliente, etiqueta, frase, link); carrossel no celular.
      A última casa da grade é o cartão tracejado .setor-case-mais (hub de cases); no celular ele some e fica o link .setor-cases-todos.
   5. Como trabalhamos (claro): .setor-passos (passos numerados em linha) + .depo com foto + garantia e botões.
   6. Perguntas (papel): .faq em <details> com .setor-lembrete ao lado; depois "Do blog" e "Outros setores" em listas .setor-rel
      (linhas com fio e seta, o desenho do #relacionados da página de serviço).
   Depois, <!--@CONTATO-->. */

/* respiro das seções: a escala das páginas internas (a mesma dos cases e do hub) */
.pg-setor .sec{padding-block:clamp(48px,6vw,88px)}
.setor-nota{font-size:14.5px;color:var(--fg2)}
/* celulares de 360: o destaque do título cabe numa linha (o contato, bloco comum, fica como está) */
@media (max-width:380px){.pg-setor section:not(.contato) > .caixa > .h2{font-size:1.7rem}}
/* links dentro do texto (mesma regra do previa-servico.css) */
.pg-setor main section:not(.contato) :is(p,dd) > a:not(.btn):not(.link-seta){color:inherit;text-decoration-thickness:1px;text-underline-offset:3px;transition:text-decoration-color .15s ease,color .15s ease}
.pg-setor main section:not(.contato) :is(p,dd) > a:not(.btn):not(.link-seta):hover{text-decoration-thickness:2px;text-decoration-color:var(--acento)}

/* ---------- 1. topo ---------- */
.setor-topo .caixa{align-items:center;row-gap:26px;padding-bottom:clamp(32px,4vw,52px)}
/* H1 no tamanho do case e do hub (.case-topo h1, .hub-topo h1) */
.setor-topo h1{font-size:clamp(1.9rem,3.2vw,2.75rem)}
.setor-topo .garantia{margin-top:18px;font-size:14px;color:var(--fg2)}
.setor-topo .acoes .btn-s{background:transparent}
.setor-texto{min-width:0}
@media (max-width:620px){
  .setor-topo .acoes{display:grid;grid-template-columns:1fr}
  .setor-topo .acoes .btn{justify-content:center}
}
@media (min-width:981px){
  .setor-topo .caixa{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);column-gap:clamp(32px,4.5vw,64px);row-gap:32px}
}

/* duas janelas de navegador sobrepostas (desenho da .pj-janela dos projetos). As margens em % seguem a largura do bloco:
   a sobreposição encolhe junto com a tela e nada passa da largura da página */
.setor-telas{margin:0;min-width:0;width:100%;max-width:600px;justify-self:center}
.setor-telas-palco{display:grid}
.setor-janela{grid-area:1 / 1;min-width:0;overflow:hidden;border:1px solid #E3E1D6;border-radius:12px;background:#fff;box-shadow:0 14px 32px -20px rgba(42,8,40,.4),0 2px 6px rgba(42,8,40,.06)}
.setor-janela.tras{align-self:start;margin-left:15%}
.setor-janela.frente{margin-top:25%;margin-right:15%;box-shadow:0 24px 44px -20px rgba(42,8,40,.5),0 2px 8px rgba(42,8,40,.1)}
/* celular (até 620 px): a janela da frente desce um pouco, para o título do print de trás ("Dados ABEEólica") aparecer inteiro
   (Felipe, 06/10/2026, pergunta 63). A barra do navegador tem 26 px fixos e não encolhe com a tela: por isso a conta soma
   pixels à porcentagem. Em 620 px dá o mesmo que os 25% de cima; em 390, a janela desce 11 px */
@media (max-width:620px){.setor-janela.frente{margin-top:calc(20.5% + 27px)}}
.setor-barra{display:flex;align-items:center;gap:6px;height:26px;padding:0 12px;border-bottom:1px solid #E3E1D6;background:#F3F1EC}
.setor-barra i{width:8px;height:8px;flex:none;border-radius:50%;background:#D5D2C6}
.setor-barra span{min-width:0;margin-left:8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:500 11.5px var(--fonte);color:#6E6C63}
.setor-janela picture{display:block}
.setor-janela img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:50% 0}
/* a janela de trás mostra só o topo do print, até o fim da faixa da página (06/10/2026): a 16/10 sobrava, ao lado da janela
   da frente, um pedaço de texto cortado do print ("dPower") sobre uma área branca. O corte fica entre a faixa (49% da altura
   do print) e esse texto (58%); com outro print de trás, conferir se o corte ainda cai num trecho limpo */
.setor-janela.tras img{aspect-ratio:16/5.5}
.setor-telas figcaption{margin-top:12px;font-size:14px;line-height:1.45;color:var(--fg2)}
@media (min-width:981px){.setor-telas{justify-self:end}}

/* linha de logos do setor, no pé do topo (mesmo tratamento da faixa .logos da Home) */
.setor-logos{grid-column:1 / -1;display:grid;gap:16px;padding-top:20px;border-top:1px solid var(--linha)}
/* rótulo da faixa de logos: o mesmo do Sobre (.sb-logos-t) */
.setor-logos-t{font-size:13px;font-weight:600;letter-spacing:.12em;line-height:1.4;text-transform:uppercase;color:var(--fg2)}
.setor-logos ul{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:20px 24px}
.setor-logos li{display:grid;place-items:center;flex:0 0 calc((100% - 48px) / 3);min-width:0}
.setor-logos img{width:auto;max-width:100%;height:auto;max-height:36px;object-fit:contain;filter:grayscale(.15);opacity:.9}
.setor-logos img[alt="WWF-Brasil"]{max-height:48px}
.setor-logos img[alt="Ibá"],.setor-logos img[alt="Ranking dos Políticos"]{max-height:40px}
/* embrapii.png tem a marca na parte de cima e uma faixa vazia embaixo (a assinatura branca saiu do arquivo em 07/10/2026): o recorte centra o símbolo e o nome */
.setor-logos img[alt="Embrapii"]{max-height:50px;clip-path:inset(0 0 30% 0);transform:translateY(15%)}
@media (min-width:621px){
  .setor-logos ul{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);justify-items:center}
}
@media (min-width:821px){
  .setor-logos{grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:40px}
  .setor-logos ul{gap:24px 32px}
}

/* ---------- 2. o que é particular: portal ilustrado + cartões numerados ---------- */
.setor-grade{display:grid;gap:26px;margin-top:36px}
/* portal ilustrado, na linguagem dos cartões .ui da Home (cartão branco, cabeçalho escuro, pílulas) dentro de uma janela */
.setor-mapa{margin:0;min-width:0;width:100%;max-width:520px;justify-self:center}
.setor-mapa-janela{border:1px solid #E3E1D6;border-radius:12px;background:#fff;color:var(--tinta);box-shadow:var(--sombra);font-size:12px;line-height:1.35}
.setor-mapa-janela > .setor-barra{border-radius:11px 11px 0 0}
.sm-topo{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--roxo-900);color:#fff}
.sm-marca{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:12.5px;white-space:nowrap}
.sm-marca::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--oliva)}
/* o menu cabe até onde der: o item que não cabe desce para a segunda linha, que fica escondida (nunca um item cortado ao meio) */
.sm-menu{display:none;flex:1 1 0;flex-wrap:wrap;gap:0 12px;min-width:0;height:1.35em;overflow:hidden;font-size:11px;line-height:1.35;color:rgba(255,255,255,.82);white-space:nowrap}
.sm-idioma{position:relative;display:inline-flex;align-items:center;gap:2px;margin-left:auto;padding:2px;border-radius:999px;background:rgba(255,255,255,.14);font:600 10.5px var(--fonte)}
.sm-idioma > b,.sm-idioma > span{padding:2px 7px;border-radius:999px;font-weight:600}
.sm-idioma > b{background:#fff;color:var(--roxo-900)}
.sm-corpo{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:10px;padding:14px 12px 12px;background:var(--papel)}
.sm-bloco{position:relative;display:grid;align-content:start;justify-items:start;gap:7px;min-width:0;padding:11px 11px 12px;border-radius:10px;border:1px solid #E3E1D6;background:#fff}
.sm-t{font-weight:700;font-size:12.5px;color:var(--tinta)}
.sm-s{font-size:11.5px;color:var(--tinta-2)}
.sm-abas{display:flex;flex-wrap:wrap;gap:4px}
.sm-abas span{padding:2px 7px;border-radius:999px;border:1px solid #E3E1D6;font-size:10.5px;color:var(--tinta-2);white-space:nowrap}
.sm-abas .on{background:var(--roxo);border-color:var(--roxo);color:#fff}
.sm-busca{display:flex;align-items:center;gap:6px;width:100%;height:24px;padding:0 9px;border-radius:999px;border:1px solid #D5D2C6;font-size:10.5px;color:#6E6C63;white-space:nowrap;overflow:hidden}
.sm-busca::before{content:"";flex:none;width:8px;height:8px;border:1.5px solid #6E6C63;border-radius:50%}
@media (max-width:380px){.sm-busca{gap:4px;padding:0 7px;font-size:10px}}
.sm-capas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;width:100%}
.sm-capas i{aspect-ratio:3/4;border-radius:4px;background-color:var(--roxo-claro);background-image:linear-gradient(rgba(42,8,40,.28),rgba(42,8,40,.28)),linear-gradient(rgba(42,8,40,.14),rgba(42,8,40,.14));background-repeat:no-repeat;background-size:56% 3px,38% 3px;background-position:18% 72%,14% 84%}
.sm-capas i:nth-child(2){background-color:var(--oliva-suave)}
.sm-capas i:nth-child(3){background-color:#DDF1E6}
.sm-capas i:nth-child(4){background-color:#E3E1D6}
.sm-btn{padding:4px 14px;border-radius:999px;background:var(--oliva);color:var(--roxo-900);font-weight:700;font-size:11px}
.sm-lin{width:100%;height:6px;border-radius:3px;background:#E3E1D6}
.sm-lin.c{width:62%}
.sm-tag{padding:3px 8px;border-radius:6px;background:var(--roxo-claro);color:var(--roxo-700);font:600 10.5px/1.3 var(--fonte)}
.sm-dado .sm-tag{background:#DDF1E6;color:#155B38}
.sm-pe{position:relative;display:flex;align-items:center;gap:8px;padding:9px 12px;border-top:1px solid #E3E1D6;border-radius:0 0 11px 11px;font:500 11px/1.3 var(--fonte);color:var(--tinta-2)}
.sm-pe > span::before{content:"";display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:#2E9E62}
/* marcadores: o mesmo círculo oliva dos cartões ao lado */
.sm-n{display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;background:var(--oliva);color:var(--roxo-900);font:700 11.5px/1 var(--fonte);font-variant-numeric:tabular-nums;font-style:normal;box-shadow:0 0 0 2px #fff,0 4px 10px -4px rgba(42,8,40,.5)}
.sm-bloco > .sm-n{position:absolute;right:-7px;top:-9px}
.sm-idioma-g{display:inline-flex;flex:none;align-items:center;gap:7px;margin-left:auto}
.sm-idioma-g > .sm-idioma{margin-left:0}
.sm-idioma-g > .sm-n{box-shadow:0 0 0 2px var(--roxo-900)}
.sm-pe > .sm-n{order:2;margin-left:auto}
.setor-mapa figcaption{margin-top:12px;font-size:14px;line-height:1.45;color:var(--fg2)}
/* os marcadores acendem em sequência, uma vez (classes .armado e .vivo postas pelo script da página) */
.setor-mapa.armado .sm-n{opacity:0;transform:scale(.4)}
.setor-mapa.vivo .sm-n{animation:sm-acende .45s cubic-bezier(.3,1.4,.5,1) both;animation-delay:calc(var(--i,1) * .16s)}
@keyframes sm-acende{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.setor-mapa.armado .sm-n{opacity:1;transform:none}}

/* cartões numerados (visual do cartão .setor da Home, sem ser link) */
.setor-pontos{display:grid;gap:12px;counter-reset:ponto;min-width:0}
.setor-ponto{counter-increment:ponto;min-width:0;padding:20px 20px 18px;border-radius:var(--raio);border:1px solid var(--linha);background:var(--chip)}
.setor-ponto h3{position:relative;align-self:start;min-height:26px;padding:2px 0 0 38px;font-size:1.12rem;line-height:1.25;color:var(--titulo);text-wrap:balance}
.setor-ponto h3::before{content:counter(ponto);position:absolute;left:0;top:0;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--oliva);color:var(--roxo-900);font:700 13.5px/1 var(--fonte);letter-spacing:0;font-variant-numeric:tabular-nums}
.setor-ponto p{margin-top:10px;font-size:14.5px;line-height:1.5;color:var(--fg2)}
.setor-ponto .quem{margin-top:12px;font-size:14px;font-weight:600;color:var(--acento);word-spacing:4px}
/* área de toque de 44 px sem mudar o desenho: o padding cresce para fora e a margem negativa devolve o espaço */
.setor-ponto .quem a{display:inline-block;padding:14px 8px;margin:-14px -8px;word-spacing:0}
@media (max-width:620px){
  .setor-pontos.carrossel > .setor-ponto{display:flex;flex-direction:column}
  .setor-pontos.carrossel > .setor-ponto .quem{margin-top:auto;padding-top:12px}
}
@media (min-width:621px){
  .sm-menu{display:flex}
  .setor-mapa-janela{font-size:12.5px}
  .setor-pontos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .setor-ponto{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-content:start}
  .setor-ponto .quem{align-self:end}
}
/* até 1100 a ilustração fica em cima e os cartões em três colunas: ao lado, ela ficaria pequena e solta no meio da coluna */
@media (min-width:821px) and (max-width:1100px){.setor-pontos{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1101px){
  .setor-grade{grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);column-gap:clamp(32px,4vw,56px);align-items:center;margin-top:44px}
  .setor-mapa{max-width:none}
}
/* campos do login, na ilustração */
.sm-campo{display:flex;align-items:center;width:100%;height:22px;padding:0 9px;border-radius:6px;border:1px solid #D5D2C6;font-size:10.5px;color:#6E6C63}

/* ---------- 3. o que fazemos para o setor: .pilha/.camada da Home (previa.css), com link no título ---------- */
html[data-dir="a"] .pg-setor [data-surf="papel"] .camada:not(.destaque){background:var(--branco)}
.setor-solucoes .pilha{margin-top:36px}
.setor-solucoes .camada h3 a{display:inline-block;padding-block:11px;margin-block:-11px;color:inherit;text-decoration:none}
.setor-solucoes .camada h3 a::after{content:"→";display:inline-block;margin-left:.35em;font-weight:500;color:var(--acento);transition:transform .15s ease}
.setor-solucoes .camada.destaque h3 a::after{color:var(--roxo-900)}
.setor-solucoes .camada h3 a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.setor-solucoes .camada h3 a:hover::after{transform:translateX(4px)}
.setor-solucoes .camada.destaque p > a{color:var(--roxo-900)}
@media (prefers-reduced-motion:reduce){.setor-solucoes .camada h3 a:hover::after{transform:none}}

/* ---------- 4. cases do setor: cartão branco (imagem, etiqueta, cliente, frase, link) ----------
   É O CARTÃO DE CASE DAS PÁGINAS INTERNAS: também usado em /orcamento/obrigado/ (quatro por linha). /para-agencias/ não tem
   cartões de case (Felipe, 01/10/2026: agência parceira não é citada). A etiqueta é uma expressão normal ("Portal e manutenção
   desde 2022"), sem "tipo · ano". Variações por modificador, no fim deste bloco. No tema WordPress, vira um componente só. */
.setor-cases{display:grid;gap:16px;margin-top:36px}
.setor-case{display:flex;flex-direction:column;min-width:0;overflow:hidden;border-radius:var(--raio);background:var(--card);color:var(--card-fg);text-decoration:none;box-shadow:var(--sombra);transition:transform .18s ease,box-shadow .18s ease}
.setor-case-img{display:grid;place-items:center;aspect-ratio:16/10;padding:16px 16px 0;background:var(--papel);overflow:hidden}
.setor-case-img picture{display:contents}
/* multiply: a foto de portfólio com fundo branco assenta no papel, igual aos mockups de fundo transparente */
.setor-case-img img{display:block;width:100%;height:100%;object-fit:contain;object-position:50% 100%;mix-blend-mode:multiply;transition:transform .25s ease}
.setor-case-corpo{display:flex;flex-direction:column;flex:1;gap:8px;padding:18px 20px 20px}
.setor-case-corpo small{font:700 12px/1.35 var(--fonte);letter-spacing:.08em;text-transform:uppercase;color:var(--roxo)}
.setor-case-corpo h3{font-size:1.3rem;line-height:1.2;color:var(--roxo-900);transition:color .15s ease}
.setor-case-corpo p{font-size:14.5px;line-height:1.5;color:var(--tinta-2)}
.setor-case-link{margin-top:auto;padding-top:8px;font-size:14.5px;font-weight:700;color:var(--roxo)}
.setor-case-link::after{content:"→";display:inline-block;margin-left:.3em;transition:transform .15s ease}
.setor-case:hover{transform:translateY(-3px)}
.setor-case:hover h3{color:var(--roxo)}
.setor-case:hover .setor-case-link::after{transform:translateX(4px)}
.setor-case:hover .setor-case-img img{transform:scale(1.03)}
.setor-case:focus-visible{outline:3px solid var(--oliva);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.setor-case:hover,.setor-case:hover .setor-case-img img,.setor-case:hover .setor-case-link::after{transform:none}}
/* recorte de uma imagem de portfólio que ainda não foi tratada: no <img>, class="recorte" e style="--recorte:inset(…);--ajuste:…"
   (o recorte tira um aparelho da composição; o ajuste recentra e aproxima o que sobrou). Na publicação, recortar o arquivo. */
.setor-case-img img.recorte{clip-path:var(--recorte,none);transform:var(--ajuste,none)}
.setor-case:hover .setor-case-img img.recorte{transform:var(--ajuste,none)}
/* última casa da grade: leva ao hub de cases (mesma ideia do cartão tracejado "Seu setor não está aqui?" da Home) */
.setor-case-mais{display:none}
@media (min-width:621px){
  .setor-cases{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .setor-case-mais{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:10px;min-width:0;padding:28px;border-radius:var(--raio);border:1px dashed rgba(255,255,255,.45);color:var(--fg);text-decoration:none;transition:background .18s ease,border-color .18s ease}
  .setor-case-mais b{font-size:clamp(2.8rem,4.4vw,3.6rem);font-weight:800;line-height:1;color:var(--acento)}
  .setor-case-mais > span:not(.setor-case-link){max-width:24ch;font-size:1.08rem;line-height:1.45;color:var(--fg)}
  .setor-case-mais .setor-case-link{margin-top:12px;padding-top:0;font-size:15.5px;color:var(--acento)}
  .setor-case-mais:hover{background:rgba(255,255,255,.08);border-color:var(--acento)}
  .setor-case-mais:hover .setor-case-link::after{transform:translateX(4px)}
  .setor-case-mais:focus-visible{outline:3px solid var(--oliva);outline-offset:3px}
  .setor-cases-todos{display:none}
}
@media (prefers-reduced-motion:reduce){.setor-case-mais:hover .setor-case-link::after{transform:none}}
@media (min-width:981px){.setor-cases{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:44px}}
/* --- modificadores do cartão de case --- */
.setor-case[hidden]{display:none}
/* .foto: captura ou mockup com fundo próprio (escuro, colorido): ocupa a moldura de borda a borda, sem o multiply */
.setor-case-img.foto{padding:0}
.setor-case-img.foto img{object-fit:cover;object-position:50% 0;mix-blend-mode:normal}
/* .logo: sem imagem do trabalho, só a marca do cliente no centro */
.setor-case-img.logo{padding:16px}
.setor-case-img.logo img{width:auto;height:auto;max-width:52%;max-height:40%;object-position:50% 50%}
/* sobre fundo claro (papel), o cartão ganha o fio dos outros cartões claros */
[data-surf="papel"] .setor-case,[data-surf="claro"] .setor-case{border:1px solid var(--linha)}
/* .quatro: quatro cartões por linha a partir de 1101 (dois por linha até lá) */
@media (min-width:621px) and (max-width:1100px){.setor-cases.quatro{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1101px){.setor-cases.quatro{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}}
/* grade com três cartões, de 621 a 980: o terceiro ocupa a linha inteira, com a imagem ao lado do texto */
@media (min-width:621px) and (max-width:980px){
  .setor-cases > .setor-case:nth-child(3):last-child{grid-column:1 / -1;flex-direction:row}
  .setor-cases > .setor-case:nth-child(3):last-child > .setor-case-img{flex:0 0 46%;aspect-ratio:auto;min-height:100%}
}
/* três colunas estreitas (981 a 1100): a etiqueta mais longa cabe numa linha */
@media (min-width:981px) and (max-width:1100px){.setor-case-corpo small{letter-spacing:.04em}}
/* celular estreito (até 380): a etiqueta mais longa ("Plataforma e integração desde 2025") cabe numa linha a 360 e 375, sem deixar o ano sozinho */
@media (max-width:380px){.setor-case-corpo small{letter-spacing:.05em}}

/* ---------- 5. como trabalhamos: passos numerados (desenho das .etapas do serviço) + depoimento e garantia ---------- */
.setor-passos{display:grid;row-gap:22px;max-width:760px;margin-top:36px;counter-reset:passo}
.setor-passos > li{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;align-items:start;counter-increment:passo}
.setor-passos > li::before{content:counter(passo);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--oliva);color:var(--roxo-900);font-family:var(--fonte);font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.setor-passos > li:not(:last-child)::after{content:"";position:absolute;top:52px;bottom:-18px;left:21px;width:2px;background:repeating-linear-gradient(180deg,var(--oliva) 0 6px,transparent 6px 11px)}
.setor-passo{display:grid;align-content:start;row-gap:10px;min-width:0;padding:20px;border-radius:var(--raio);border:1px solid var(--linha);background:var(--chip)}
.setor-passo h3{font-size:1.15rem;line-height:1.25;color:var(--titulo)}
.setor-passo p{font-size:14.5px;line-height:1.5;color:var(--fg2)}
@media (min-width:1101px){
  .setor-passos{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:16px;max-width:none;margin-top:44px}
  .setor-passos > li{grid-template-columns:none;grid-row:span 3;grid-template-rows:subgrid;row-gap:14px;column-gap:0}
  .setor-passos > li:not(:last-child)::after{top:21px;bottom:auto;left:56px;right:-4px;width:auto;height:2px;background:repeating-linear-gradient(90deg,var(--oliva) 0 6px,transparent 6px 11px)}
  .setor-passo{grid-row:span 2;grid-template-rows:subgrid}
}
.setor-fecho{display:grid;gap:22px;margin-top:32px}
.setor-fecho > .depo{display:flex;grid-row:auto;grid-template-rows:none;border:1px solid var(--linha)}
.setor-garantia{display:grid;align-content:center;gap:20px;padding:24px;border-radius:var(--raio);background:var(--oliva-suave);border:1px solid #E7E1A6}
.setor-garantia-t{position:relative;padding-left:40px;font-size:1.15rem;font-weight:700;line-height:1.35;color:var(--roxo-900);text-wrap:balance}
/* cadeado desenhado em CSS: os acessos ficam com a entidade */
.setor-garantia-t::before{content:"";position:absolute;left:3px;top:.62em;width:22px;height:16px;border-radius:4px;background:var(--roxo)}
.setor-garantia-t::after{content:"";position:absolute;left:7px;top:.05em;width:14px;height:14px;border:3px solid var(--roxo);border-bottom:0;border-radius:8px 8px 0 0;box-sizing:border-box}
.setor-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
@media (max-width:620px){
  .setor-acoes{display:grid;justify-items:start}
  .setor-acoes .btn{width:100%;justify-content:center}
}
@media (min-width:821px){
  .setor-fecho{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:20px;margin-top:40px}
  .setor-garantia{padding:28px 32px}
  .setor-garantia-t{font-size:1.3rem}
}

/* ---------- 6. perguntas: .faq em <details> + lembrete ao lado (copiado do serviço); depois, blog e outros setores ---------- */
.setor-faq-grade{display:grid;gap:clamp(28px,4vw,56px);align-items:start;margin-top:32px}
.setor-faq-grade > div{min-width:0}
.setor-faq-grade .faq{margin-top:0;max-width:none}
.pg-setor .faq summary h3{display:inline;font-size:1.05rem;font-weight:700;line-height:1.4;color:inherit;letter-spacing:0}
.pg-setor .faq details > div p{max-width:70ch}
.pg-setor .faq details a{color:var(--titulo);text-underline-offset:3px}
.setor-faq-nota{margin-top:18px}
.setor-lembrete{display:none}
.setor-mais{display:grid;gap:28px;margin-top:32px;padding-top:28px;border-top:1px solid var(--linha)}
.setor-mini-t{font-size:13px;font-weight:800;line-height:1.12;letter-spacing:.1em;text-transform:uppercase;color:var(--acento)}
/* linhas com fio e seta (valores do .rel-col do previa-servico.css). A seta é absoluta, e não um item flex, para o texto do
   link nunca se partir em colunas quando o build embrulha uma palavra com hífen */
.setor-rel ul{margin-top:10px;border-top:1px solid var(--linha)}
.setor-rel a{position:relative;display:block;padding:12px 30px 12px 0;border-bottom:1px solid var(--linha);text-decoration:none;font-size:15.5px;font-weight:600;line-height:1.4;color:var(--titulo);transition:color .15s ease}
.setor-rel a::after{content:"→";position:absolute;right:0;top:12px;color:var(--acento);font-weight:800;transition:transform .15s ease}
.setor-rel a:hover{color:var(--acento);text-decoration:underline;text-underline-offset:3px}
.setor-rel a:hover::after{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){.setor-rel a:hover::after{transform:none}}
@media (min-width:621px){.setor-mais{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);column-gap:clamp(28px,4vw,48px);align-items:start}}
/* "Outros setores" saiu das páginas de setor (Felipe, 10/10/2026: o menu e o rodapé já têm a lista). "Do blog" sozinho ocupa a largura toda. */
.setor-mais > .setor-rel:only-child{grid-column:1 / -1}
@media (min-width:981px){
  .setor-faq-grade{grid-template-columns:minmax(0,8fr) minmax(0,4fr)}
  .setor-lembrete{display:block;position:sticky;top:96px;padding:26px;border-radius:var(--raio);background:radial-gradient(130% 160% at 90% 0%,#9B2C95 0%,var(--roxo) 40%,var(--roxo-900) 100%);color:#fff;box-shadow:var(--sombra)}
  .setor-lembrete-t{font-size:1.25rem;font-weight:800;line-height:1.2}
  .setor-lembrete p:not(.setor-lembrete-t){margin-top:8px;font-size:15px;opacity:.88}
  .setor-lembrete .btn{margin-top:18px;width:100%;justify-content:center}
}

/* ---------- carrosséis no celular ---------- */
/* este arquivo carrega depois do previa.css: sem esta regra, o display:grid de .setor-pontos e .setor-cases venceria o
   display:flex do .carrossel e os cartões ficariam empilhados */
@media (max-width:620px){
  .setor-pontos.carrossel,.setor-cases.carrossel{display:flex;gap:12px}
  .setor-cases.carrossel{margin-top:28px}
  .setor-grade{gap:22px;margin-top:28px}
}
/* passos no celular: lista enxuta (número, título e frase), sem a caixa, para a seção não ficar longa */
@media (max-width:620px){
  .setor-passos{row-gap:18px;margin-top:28px}
  .setor-passo{row-gap:6px;padding:9px 0 0;border:0;border-radius:0;background:none}
  .setor-passos > li:not(:last-child)::after{bottom:-14px}
  .setor-fecho{margin-top:28px}
}

/* passos entre 621 e 1100: dois por linha, sem o fio (a linha do tempo volta a ser uma só a partir de 1101) */
@media (min-width:621px) and (max-width:1100px){
  .setor-passos{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;max-width:none}
  .setor-passos > li:not(:last-child)::after{content:none}
  .setor-passos > li{grid-row:span 1}
  .setor-passo{height:100%}
}

/* ==========================================================================================
   ACRÉSCIMOS DA 2ª INSTÂNCIA (_paginas/setor-industria-e-distribuicao.html, 01/10/2026).
   Genéricos: servem a qualquer setor. Nada acima foi alterado.
   ========================================================================================== */

/* A. Topo de setor SEM tela real (sistema interno, site fora do ar): dentro da figure.setor-telas, no lugar do
   .setor-telas-palco, vai um .setor-ui com 2 a 4 cartões .ui (os da Home). Ficam em escada: a segunda coluna desce
   meio degrau, e um fio tracejado passa por trás dos cartões. A legenda da figura leva o rótulo "Ilustração". */
.setor-ui{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.setor-ui::before{content:"";position:absolute;inset:16% 24% 12%;border:2px dashed var(--oliva-esc);border-radius:22px}
.setor-ui > .ui{position:relative;inset:auto;width:auto;max-width:none;box-shadow:0 14px 32px -20px rgba(42,8,40,.4),0 2px 6px rgba(42,8,40,.06)}
.setor-ui > .ui:nth-child(even){margin-top:28px}
.setor-ui > .ui .linha{flex-wrap:wrap;row-gap:2px}
.setor-ui > .ui .linha > :last-child{margin-left:auto}
@media (min-width:621px){
  .setor-ui{gap:18px}
  .setor-ui > .ui{font-size:13.5px}
  .setor-ui > .ui header{padding:10px 14px;font-size:13.5px}
  .setor-ui > .ui .corpo{padding:12px 14px 14px;gap:8px}
  .setor-ui > .ui .pill{font-size:12px}
  .setor-ui > .ui:nth-child(even){margin-top:44px}
}

/* B. Cartão de case SEM imagem pública: em .setor-case-img.setor-case-ilustra, a marca do cliente (.setor-case-logo)
   e um cartão .ui ilustrado, com <small>ilustração</small> no cabeçalho, saindo da base como os mockups dos outros cartões */
.setor-case-ilustra{grid-template-rows:minmax(0,1fr) auto;row-gap:10px;place-items:end center}
.setor-case-logo{display:block;align-self:center;height:26px}
.setor-case-ilustra > .ui .corpo{padding:8px 12px 10px;gap:4px}
.setor-case-img .setor-case-logo img{width:auto;height:100%}
.setor-case-ilustra > .ui{position:relative;inset:auto;width:min(84%,280px);max-width:none;border-radius:12px 12px 0 0;box-shadow:0 -6px 24px -12px rgba(42,8,40,.35);transition:transform .25s ease}
.setor-case:hover .setor-case-ilustra .setor-case-logo img{transform:none}
.setor-case:hover .setor-case-ilustra > .ui{transform:translateY(-3px)}
@media (prefers-reduced-motion:reduce){.setor-case:hover .setor-case-ilustra > .ui{transform:none}}

/* C. Ilustração .setor-mapa com cinco blocos: o bloco .sm-larga ocupa as duas colunas */
.setor-mapa .sm-larga{grid-column:1 / -1}

/* ==========================================================================================
   INTEGRAÇÃO DAS PÁGINAS NOVAS (01/10/2026): celular mais curto
   ========================================================================================== */
@media (max-width:620px){
  /* "O que fazemos": cada linha fica com o rótulo, o título (link) e as pílulas de prova; a frase aparece a partir de 621 px */
  .setor-solucoes .camada > div:nth-child(2) > p{display:none}
  .setor-solucoes .camada .chips{margin-top:0}
  .setor-solucoes .camada{gap:8px}
  /* "Outros setores" em pílulas (como as "Páginas de setor" do hub de cases), no lugar de seis linhas com fio */
  .setor-rel.pilulas ul{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;border-top:0}
  .setor-rel.pilulas a{padding:12px 14px;border:1px solid var(--linha);border-radius:999px;background:var(--branco);font-size:14.5px;line-height:1.3}
  .setor-rel.pilulas a::after{content:none}
}

/* ==========================================================================================
   DOIS DEPOIMENTOS NO FECHO (01/10/2026). Genérico: serve a qualquer setor. Nada acima foi alterado.
   .setor-fecho.dois = dois .depo, em colunas iguais (Felipe, 10/10/2026: 50/50) + .setor-garantia. No celular, empilhados como na Home;
   a partir de 821 px, os depoimentos lado a lado e a garantia embaixo, na largura toda.
   ========================================================================================== */
@media (min-width:821px){
  .setor-fecho.dois{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .setor-fecho.dois > .setor-garantia{grid-column:1 / -1}
  /* lado a lado, os dois cartões voltam ao subgrid do .depo (frase em cima, pessoa embaixo): as fotos ficam na mesma linha,
     mesmo quando uma legenda tem duas linhas e a outra tem três */
  .setor-fecho.dois > .depo{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:18px}
  .setor-fecho.dois > .depo figcaption{align-self:stretch}
}
@media (min-width:1101px){
  .setor-fecho.dois > .setor-garantia{grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:40px}
  .setor-fecho.dois .setor-acoes{flex-wrap:nowrap}
}