/* Catálogo de serviços com busca e filtro por área (/projetos e /terceirizacao,
 * 22/10/2026). Markup em src/components/CatalogoServicos.astro, lista em
 * src/config/servicos.ts, comportamento em catalogo.js (ao lado).
 *
 * Vem DEPOIS do lp.css (tokens e classes cs- e sv-: o cartão é o .sv-card) e
 * do site.css (o filtro é o .app-filter/.af-btn da grade de apps da /hub). O
 * que mora aqui é só o que o catálogo acrescenta, sempre escopado, para não
 * mexer na /setores, que usa os mesmos .sv-card e .sv-tag.
 *
 * Atenção: o reset do lp.css (.cs *{margin:0;padding:0}) vem depois do site.css
 * e empata em especificidade com o .af-btn, então zera o padding dele. Por isso
 * os espaçamentos do filtro são redeclarados aqui, com o escopo .sv-filtro. */

/* ------------------------------------------------------------- topo curto -- */
/* Rótulo, título, busca e filtro. O objetivo é medido: no celular (375 x 812)
   o primeiro cartão tem que aparecer na primeira tela. */
/* overflow:clip e não hidden: o .cs-hero corta a aurora com overflow:hidden,
   e caixa com hidden ainda rola por dentro quando o navegador traz um filho à
   vista (o foco no campo de busca, uma âncora). Aqui isso empurrava o título
   para fora da hero. Com clip ela só corta, sem virar área de rolagem; o
   hidden do lp.css fica como reserva para navegador antigo. */
.sv-topo{overflow:clip;padding:clamp(108px,10.5vw,152px) 0 clamp(30px,3.4vw,50px)}
.sv-topo h1{font-size:clamp(34px,4.6vw,66px)}
.sv-topo .cs-label{margin-bottom:14px}

.sv-controles{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:900px;margin:clamp(24px,2.6vw,36px) auto 0;scroll-margin-top:96px}
/* Sem JavaScript, nada de busca nem botão que não fazem nada: a lista inteira
   continua na tela, que é o estado que importa. */
@media (scripting:none){.sv-controles{display:none}}

.sv-busca{position:relative;width:100%;max-width:620px}
/* z-index: o backdrop-filter faz do campo um contexto de empilhamento pintado
   depois da lupa, e sem ele o vidro cobre o ícone. */
.sv-lupa{position:absolute;z-index:1;left:19px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:#9aa0bd;pointer-events:none}
/* Vidro no mesmo vocabulário do .af-btn logo abaixo. 16px de fonte: abaixo
   disso o Safari do iPhone dá zoom na página ao focar o campo. */
.sv-busca input{
  width:100%;min-height:52px;padding:14px 18px 14px 48px;border-radius:999px;
  font:400 16px/1.25 var(--font);color:var(--white);
  background:
    linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.012) 46%,rgba(5,9,24,.2)),
    rgba(10,14,31,.5);
  border:1px solid rgba(225,234,255,.14);
  -webkit-backdrop-filter:blur(12px) saturate(1.15);backdrop-filter:blur(12px) saturate(1.15);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  outline:none;-webkit-appearance:none;appearance:none;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.sv-busca input::placeholder{color:#8F98BC;opacity:1}
.sv-busca input:focus-visible{border-color:rgba(57,114,253,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 3px rgba(57,114,253,.28)}
/* O X nativo do campo de busca vem cinza-escuro e some no fundo navy: aqui
   ele ganha o mesmo cinza claro da lupa. Com o campo vazio ele sai do fluxo,
   senão reserva espaço e corta o exemplo da busca no celular. */
.sv-busca input::-webkit-search-cancel-button{
  -webkit-appearance:none;appearance:none;width:18px;height:18px;margin-left:8px;cursor:pointer;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9CFE6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E") center/18px no-repeat;
}
.sv-busca input:placeholder-shown::-webkit-search-cancel-button{display:none}

/* O filtro é o .app-filter da /hub. Os botões levam a cor da área em --af-c
   (trio RGB, vindo do servicos.ts); o "Todos" usa a do site.css. */
.sv-filtro{justify-content:center;width:100%;margin:0;padding:2px 0}
.sv-filtro .af-btn{padding:8px 15px}
.sv-af{white-space:nowrap}
.sv-filtro .af-n{display:inline-block;margin-left:3px;padding:3px 6px;font-variant-numeric:tabular-nums;vertical-align:1px}
/* Área sem resultado para a busca atual: continua clicável, só recua. */
.sv-filtro .af-btn.is-zero:not(.is-on){opacity:.5}
@media (max-width:640px){
  /* Grade de três, como a /hub no celular. O rótulo e a contagem são um texto
     só (.sv-af), então "Produtividade e Operações" quebra em duas linhas com o
     número no fim, e nenhum botão passa de duas linhas. */
  .sv-filtro{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .sv-filtro .af-btn{
    display:flex;align-items:center;justify-content:center;
    min-width:0;min-height:44px;padding:6px 7px;
    font-size:11.5px;line-height:1.2;text-align:center;
  }
  .sv-af{white-space:normal}
  .sv-filtro .af-n{margin-left:2px;padding:2px 5px;font-size:10px}
}

/* --------------------------------------------------------------- cartões -- */
/* #areas (o item "Áreas" do menu do topo) para aqui, com os cartões logo
   abaixo do menu fixo. */
.sv-cat{padding:clamp(22px,3.2vw,48px) 0 clamp(64px,7vw,104px);scroll-margin-top:72px}
.sv-grade{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.sv-grade > li{display:flex;min-width:0;scroll-margin-top:110px}
/* O display:flex acima venceria o [hidden] do navegador. */
.sv-grade > li[hidden]{display:none}
.sv-cat .sv-card{flex:1;min-width:0;padding:22px 22px 20px}
.sv-cat .sv-card:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

.sv-cat .sv-card-top{margin-bottom:16px}
.sv-apps{display:flex;gap:6px}
/* Os ícones de app (variante clara) em ladrilhos tingidos pela cor da área:
   é o que diz a área do cartão quando o filtro está em "Todos". */
.sv-app{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:none;background:color-mix(in srgb,var(--area-c,#3972FD) 8%,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--area-c,#3972FD) 20%,transparent)}
.sv-app img{width:20px;height:20px;object-fit:contain}
.sv-seta{width:18px;height:18px;flex:none;color:color-mix(in srgb,var(--area-c,#2557D6) 85%,#0B1220);transition:transform .35s var(--ease)}
.sv-cat .sv-card:hover .sv-seta{transform:translateX(3px)}

/* Os "p" do cartão: o .sv-card p do lp.css dá flex:1 e cor de apoio a todo
   parágrafo; aqui cada um volta ao tamanho do próprio texto. */
.sv-cat .sv-nome{font-size:18px;font-weight:600;letter-spacing:-.015em;line-height:1.3}
.sv-cat .sv-dor{font-size:15px;color:var(--v3-mut);line-height:1.5;margin-top:6px;flex:none}
.sv-cat .sv-fmt{flex:none;margin-top:14px;font-size:13.5px;line-height:1.5;color:var(--v3-ink)}
.sv-cat .sv-fmt b{display:block;margin-bottom:3px;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--v3-mut)}

/* O pé: o selo do par (o .sv-tag do lp.css) e em quantos setores o serviço
   aparece. Fica sempre no fundo do cartão, alinhado entre vizinhos. */
.sv-card-pe{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin-top:auto}
.sv-card-pe::before{content:"";flex-basis:100%;height:1px;margin-top:18px;margin-bottom:6px;background:rgba(11,13,24,.07)}
.sv-setores{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font-size:13px;font-weight:500;color:var(--v3-mut)}
.sv-setores svg{width:15px;height:15px}

/* Celular: só ícone, nome e dor. A lista inteira cabe em pouco mais de duas
   telas e o resto do cartão continua na página do serviço. */
@media (max-width:640px){
  .sv-grade{grid-template-columns:1fr;gap:8px}
  .sv-cat .sv-card{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px;align-items:start;padding:14px 16px 15px;border-radius:16px}
  .sv-cat .sv-card-top{display:contents}
  .sv-apps{grid-column:1;grid-row:1 / span 2}
  .sv-app{width:40px;height:40px;border-radius:12px}
  .sv-app img{width:22px;height:22px}
  .sv-app ~ .sv-app,.sv-seta,.sv-cat .sv-fmt,.sv-card-pe{display:none}
  .sv-cat .sv-nome{grid-column:2;font-size:16px;line-height:1.3}
  .sv-cat .sv-dor{grid-column:2;font-size:14px;line-height:1.45;margin-top:3px}
}

/* A dobra dos modos vem logo depois do catálogo, na mesma folha clara: sem o
   respiro de cima do .cs-pad, uma linha fina separa os dois assuntos. */
.sv-modos-sec{padding-top:0}
.sv-modos-sec > .cs-wrap::before{content:"";display:block;height:1px;margin-bottom:clamp(48px,6vw,88px);background:rgba(11,13,24,.08)}

/* Busca sem resultado: o caminho de volta e a saída para o especialista. */
.sv-vazio{max-width:620px;margin:8px auto 0;padding:28px 26px;border-radius:20px;background:#fff;box-shadow:var(--v3-hair);text-align:center}
.sv-vazio[hidden]{display:none}
.sv-vazio p{font-size:16px;line-height:1.55;color:var(--v3-mut)}
.sv-vazio b{display:block;margin-bottom:4px;font-size:18px;font-weight:600;color:var(--v3-ink)}
.sv-vazio-acoes{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 18px;margin-top:18px}
.sv-vazio-link{font-size:15px;font-weight:600;color:var(--blue-ink);text-decoration:underline;text-underline-offset:3px}