/* ============================================================
   Domínio Médico — as páginas de serviço
   assets/css/servico.css

   Entra DEPOIS do landing.css e só acrescenta o que é destas páginas. A
   navegação, o rodapé, os botões, a chamada final e as dúvidas continuam
   vindo de lá — são as mesmas peças, e duplicá-las aqui significaria
   consertar cada coisa duas vezes.

   As três variáveis de cada página (`--esc`, `--cla`, `--foto`) chegam pelo
   `style` do <body>, escritas pelo gerador.
   ============================================================ */

/* ============================================================
   as medidas
   ============================================================
   Antes cada bloco tinha a sua: o texto em 780px, os passos em 820, os
   cartões e os prints em 1180. Na página inteira isso aparecia como uma
   coluna que encolhia e crescia a cada seção, e o olho lia aquilo como
   desalinho. Agora é uma medida só, e todo bloco a usa.

   O respiro vertical também: um valor, do herói ao último bloco.

   A largura do TEXTO é outra coisa, e continua limitada (`--sv-linha`): uma
   linha de 1000px tem quase cem caracteres, e ninguém acha a linha seguinte.
   O que alinha é a borda ESQUERDA, e essa é a mesma de tudo. */
.sv{
  --sv-larg:1000px;   /* a caixa de todo bloco */
  --sv-alto:76px;     /* o respiro de cima e de baixo */
  --sv-linha:66ch;    /* o comprimento máximo de uma linha de texto */
}
/* Uma classe só para a caixa, e todo bloco herda dela por composição.
   `min(100% - 40px, …)` é o que garante a margem lateral no celular. */
.sv-heroi-cx, .sv-migalhas, .sv-cx, .sv-grade, .sv-telas,
.sv-passos, .sv-outros, .sv-artigos, .sv-planos, .sv-duvidas .lp-faq-itens{
  width:min(100% - 40px, var(--sv-larg)); margin-inline:auto;
}

/* ============================================================
   o herói
   ============================================================
   A mesma receita de quatro camadas dos cartões de serviço da home: a foto
   duas vezes (a de cima em `overlay`, que estoura o contraste) e o degradê
   da cor por cima. É isso que faz a página parecer irmã do cartão que trouxe
   o visitante até ela. */
.sv-heroi{
  position:relative; overflow:hidden; color:#fff;
  padding:150px 0 78px;
  background:
    linear-gradient(var(--ga, 331.96deg), var(--esc) 19.06%, var(--cla) 40%, rgba(102,102,102,0) 85%),
    linear-gradient(100.48deg, rgba(0,0,0,0) .77%, rgba(13,42,141,0) 97.16%),
    var(--foto),
    var(--foto);
  background-blend-mode:normal, soft-light, overlay, normal;
  /* ---------- o degradê anda com o ponteiro ----------
     É o MESMO degradê de sempre; o que mudou é que ele deixou de ficar
     parado. Para uma posição poder correr é preciso haver folga: a camada
     da cor passa a ser maior que o herói (150%), e é dentro dessa folga que
     `background-position` a desloca. As fotos continuam em `cover`, cada
     uma com a sua posição — por isso os quatro valores separados.

     Em 150% o curso é meia largura do herói: dá para ver o degradê andar,
     e em nenhum dos extremos ele some ou afoga a foto — com 200% a ponta
     esquerda inundava o herói inteiro de cor.

     O ÂNGULO também anda: --ga gira em torno dos 331.96deg de origem, para
     a ponta densa do degradê pender para o lado do ponteiro. É o mesmo
     desenho inclinando, não um desenho novo.

     Quem escreve --gx, --gy e --ga é o degradeDoHeroi(), em
     assets/js/landing.js. Sem script, sem toque e com movimento reduzido
     eles ficam nos valores de origem daqui, e o herói é exatamente o de
     antes — inclusive no ângulo. */
  background-size:150% 150%, cover, cover, cover;
  background-position:var(--gx, 50%) var(--gy, 50%), 50% 35%, 50% 35%, 50% 35%;
  background-repeat:no-repeat;
}
/* Véu na base: o degradê da cor morre antes do rodapé do bloco, e sem isto
   o texto cai sobre a parte clara da foto. */
.sv-heroi::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg, rgba(8,11,40,.55), rgba(8,11,40,.12) 55%, transparent);
}
.sv-heroi-cx{ position:relative; z-index:2; }
.sv-heroi h1, .sv-frase{ max-width:22ch; }
.sv-olho{
  display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(255,255,255,.75); margin-bottom:16px;
}
.sv-heroi h1{
  font-size:clamp(2.1rem, 5vw, 3.6rem); line-height:1.1; color:#fff;
}
.sv-frase{
  font-family:var(--lp-serif); font-weight:400; letter-spacing:0;
  font-size:clamp(1.3rem, 2.6vw, 2rem); line-height:1.25;
  color:#fff; margin-top:14px;
}
.sv-resumo{
  margin-top:20px; max-width:60ch; font-size:1.04rem; color:rgba(255,255,255,.92);
}
.sv-heroi .lp-acoes{ margin-top:30px; }
.sv-preco{
  display:inline-block; margin-top:22px; font-size:.9rem; font-weight:600;
  padding:7px 15px; border-radius:999px;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28);
}

/* ---------- operado por ----------
   Fica no herói, ao lado do preço, porque é informação de compra: quem
   está decidindo contratar contabilidade quer saber de quem é o CRC antes
   de descer a página. Em letra miúda no rodapé seria ressalva; aqui em
   cima, com a marca à vista, é resposta.

   A marca do parceiro é colorida e o herói é escuro: por isso ela anda
   dentro de uma pastilha branca, que é o fundo em que ela foi desenhada. */
.sv-operado{
  display:inline-flex; align-items:center; gap:12px;
  margin-top:26px; padding:8px 16px 8px 18px; border-radius:999px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3);
  color:#fff; text-decoration:none;
  font-size:.82rem; font-weight:600; letter-spacing:.02em;
}
.sv-operado span{ text-transform:uppercase; opacity:.85; }
.sv-operado img{
  display:block; height:30px; width:auto;
  background:#fff; border-radius:9px; padding:5px 12px 5px 7px;
}
.sv-operado i{ font-style:normal; opacity:.7; transition:transform .2s; }
.sv-operado:hover{ background:rgba(255,255,255,.22); }
.sv-operado:hover i{ transform:translateX(3px); }
/* O preço vem logo abaixo e precisa da própria linha. */
.sv-operado + .sv-preco{ display:block; width:fit-content; }

/* ============================================================
   os blocos
   ============================================================ */
/* Todo bloco é branco. A separação é uma linha da largura do conteúdo, e
   não uma faixa cinza: com uma medida só, a faixa alternada virava um
   tabuleiro — e o que a página precisa é de continuidade, não de contraste.
   A linha nasce no topo do bloco, presa pelo `position:relative` dele. */
.sv-bloco{ padding:var(--sv-alto) 0; position:relative; }
.sv-bloco + .sv-bloco::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(100% - 40px, var(--sv-larg)); height:1px; background:var(--lp-borda);
}
/* Os blocos que já se separam sozinhos não levam linha: a frase de destaque
   e a chamada do meio têm forma própria, e um fio ali seria ruído. */
.sv-b-faixa::before, .sv-b-chamada::before, .sv-b-vitrine::before,
.sv-b-faixa + .sv-bloco::before, .sv-b-chamada + .sv-bloco::before,
.sv-b-vitrine + .sv-bloco::before{ content:none; }
.sv-bloco h2{
  font-size:clamp(1.6rem, 3.4vw, 2.4rem); line-height:1.15;
}
.sv-intro{
  margin-top:16px; color:var(--lp-tinta-2); font-size:1.04rem;
  max-width:var(--sv-linha);
}
.sv-intro + .sv-intro{ margin-top:12px; }

/* O remate é a frase que fecha o raciocínio — no site atual ela vem depois
   de um 👉. Aqui o lugar dela na página já diz isso, sem o emoji. */
.sv-remate{
  margin-top:24px; max-width:var(--sv-linha);
  font-size:1.08rem; font-weight:600; color:var(--lp-tinta);
  padding-left:16px; border-left:3px solid var(--cla);
}

/* ---------- as duas listas ----------
   A da DOR é marcada com ×, a das qualidades com ✓. São o mesmo formato
   visual com o sinal trocado — e o sinal é o que diz se aquilo é problema
   ou solução, sem precisar de uma frase explicando. */
.sv-dor, .sv-marcas{
  list-style:none; margin:26px 0 0; padding:0; display:grid; gap:12px;
  max-width:var(--sv-linha);
}
.sv-dor li, .sv-marcas li{
  display:flex; gap:12px; align-items:flex-start;
  font-size:1rem; color:var(--lp-tinta-2);
}
.sv-dor li::before{
  content:"×"; color:var(--lp-rosa); font-weight:800; font-size:1.15rem;
  line-height:1.35; flex:none;
}
.sv-marcas li::before{
  content:"✓"; color:var(--cla); font-weight:800; flex:none;
}

/* ============================================================
   quem executa
   ============================================================
   Duas colunas lado a lado porque a informação É a comparação: à esquerda
   a empresa que assina o serviço, à direita o que é da Domínio Médico.
   Em uma coluna só, o leitor lê como "dois parceiros"; em duas, lê como
   divisão de papéis, que é o que a página precisa dizer. */
.sv-quem-faz{
  width:min(100% - 40px, var(--sv-larg)); margin:34px auto 0;
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
}
.sv-executa{
  padding:28px 26px; border-radius:var(--lp-raio);
  background:#fff; border:1px solid var(--lp-borda);
  display:flex; flex-direction:column; gap:14px;
}
/* A coluna da Domínio Médico ganha o fundo da marca: é o que faz a leitura
   "este lado é deles, este lado é nosso" acontecer antes de ler o título. */
.sv-executa-dm{ background:var(--lp-roxo-fundo); border-color:transparent; }
.sv-executa-papel{
  font-size:.72rem; font-weight:800; letter-spacing:.09em;
  text-transform:uppercase; color:var(--lp-tinta-2);
}
/* `align-self` porque num flex a imagem esticaria na largura da coluna e
   a marca sairia deformada — o mesmo tropeço dos ícones dos planos. */
.sv-executa-logo{ align-self:flex-start; height:36px; width:auto; }
/* A nossa marca é só palavra, e a do parceiro tem símbolo: na mesma altura
   a nossa fica com o dobro da largura e a comparação vira hierarquia. A
   altura menor é o que iguala o peso das duas na linha. */
.sv-executa-dm .sv-executa-logo{ height:23px; margin:7px 0 6px; }
.sv-executa-tipo{
  margin:-6px 0 0; font-size:.86rem; font-weight:600; color:var(--lp-tinta-2);
}
.sv-executa p{ margin:0; font-size:1rem; color:var(--lp-tinta-2); line-height:1.65; }
.sv-executa .sv-marcas{ margin-top:auto; padding-top:4px; }
.sv-executa .sv-marcas li{ font-size:.94rem; }
.sv-executa-dm .sv-marcas li::before{ color:var(--lp-roxo); }

/* ---------- a cadeia, em três elos ---------- */
.sv-cadeia{
  width:min(100% - 40px, var(--sv-larg)); margin:34px auto 0;
  list-style:none; padding:0; counter-reset:elo;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;
}
.sv-cadeia li{
  counter-increment:elo; position:relative;
  padding:22px 22px 22px 24px; border-radius:var(--lp-raio);
  background:var(--lp-cinza);
}
.sv-cadeia li::before{
  content:counter(elo); display:grid; place-items:center;
  width:28px; height:28px; margin-bottom:12px; border-radius:9px;
  background:#fff; color:var(--cla); font-weight:800; font-size:.82rem;
}
/* A seta entre um elo e o outro só existe quando eles estão lado a lado;
   empilhados, ela apontaria para o lado errado. */
.sv-cadeia li + li::after{
  content:"→"; position:absolute; left:-14px; top:34px;
  color:var(--lp-borda); font-size:1.1rem;
}
.sv-cadeia b{ display:block; font-size:1rem; margin-bottom:6px; }
.sv-cadeia span{ font-size:.94rem; color:var(--lp-tinta-2); line-height:1.6; }

/* ---------- a lista de parceiros ---------- */
/* 210px e não 240: com 240 os quatro cartões somam 1008px e não cabem nos
   1000 da caixa — sobrava um sozinho na segunda linha. */
.sv-parceiros{
  width:min(100% - 40px, var(--sv-larg)); margin:16px auto 0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:16px;
}
.sv-parceiro{
  padding:24px 22px; border-radius:var(--lp-raio);
  background:#fff; border:1px solid var(--lp-borda);
}
.sv-parceiro img{ display:block; height:32px; width:auto; margin-bottom:14px; }
.sv-parceiro p{ margin:0; font-size:.95rem; color:var(--lp-tinta-2); line-height:1.6; }
.sv-parceiro .sv-executa-tipo{ margin-bottom:10px; }

@media (max-width:820px){
  .sv-quem-faz, .sv-cadeia{ grid-template-columns:1fr; }
  .sv-cadeia li + li::after{ content:none; }
  .sv-executa .sv-marcas{ margin-top:0; }
}

/* ---------- cartões ---------- */
.sv-grade{
  margin-top:34px;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:16px;
}
.sv-cartao{
  padding:26px 24px; border-radius:var(--lp-raio); background:#fff;
  border:1px solid var(--lp-borda);
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.sv-cartao:hover{
  transform:translateY(-4px); border-color:var(--cla);
  box-shadow:0 16px 36px rgba(11,16,51,.09);
}
.sv-cartao h3{ font-size:1.05rem; margin-bottom:9px; }
.sv-cartao p{ color:var(--lp-tinta-2); font-size:.95rem; }
/* Com a página toda branca, quem separa o cartão do fundo é a borda —
   o cinza de antes existia só para contrastar com os blocos cinzas. */

/* ---------- prints do sistema ---------- */
/* A moldura de janela existe para o visitante ler a imagem como "tela de
   software" no primeiro olhar, antes de ler a legenda. O topo com os três
   pontos é o sinal mais barato que existe para isso. */
.sv-telas{ margin-top:34px; display:grid; gap:26px; }
/* o min() é o que impede a coluna de 420px de estourar a tela do celular:
   sem ele o trilho continua com 420px numa janela de 375 */
.sv-telas-duas{ grid-template-columns:repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }

.sv-janela{
  border-radius:16px; overflow:hidden; background:#fff;
  border:1px solid var(--lp-borda);
  box-shadow:0 26px 60px rgba(11,16,51,.13), 0 4px 12px rgba(11,16,51,.05);
}
.sv-janela-topo{
  display:flex; gap:7px; align-items:center;
  padding:11px 14px; background:#F4F5F9;
  border-bottom:1px solid var(--lp-borda);
}
.sv-janela-topo i{
  width:10px; height:10px; border-radius:50%; background:#D5D8E2;
}
/* A imagem é a última coisa do bloco: `display:block` tira a linha de base
   que deixaria uma faixa branca entre ela e a borda da janela. */
.sv-janela img{ display:block; width:100%; height:auto; }

/* <figure> vem do navegador com margin:1em 40px. Sem zerar, cada print
   encolhia 80px e o vão entre os dois virava quase o triplo do gap. */
.sv-tela{ margin:0; }
.sv-tela figcaption{
  margin-top:12px; color:var(--lp-tinta-2);
  font-size:.92rem; line-height:1.55; text-align:center;
}

@media (max-width:760px){
  .sv-telas{ gap:22px; }
  .sv-janela-topo{ padding:8px 11px; }
  .sv-janela-topo i{ width:8px; height:8px; }
}

/* ---------- passos ---------- */
.sv-passos{
  margin-top:34px; padding:0; list-style:none; display:grid; gap:4px;
}
.sv-passos li{
  display:flex; gap:18px; align-items:flex-start;
  padding:18px 0; border-bottom:1px solid var(--lp-borda);
}
.sv-passos li:last-child{ border-bottom:0; }
.sv-passos b{
  flex:none; width:34px; height:34px; border-radius:11px;
  display:grid; place-items:center; font-size:.92rem;
  background:color-mix(in srgb, var(--cla) 16%, transparent);
  color:var(--esc); border:1px solid color-mix(in srgb, var(--cla) 34%, transparent);
}
.sv-passos h3{ font-size:1.02rem; margin-bottom:4px; }
.sv-passos p{ color:var(--lp-tinta-2); font-size:.95rem; }

/* ---------- quem apresenta ----------
   Duas pessoas, lado a lado. Cartão claro, monograma no lugar do retrato e
   um botão que já nomeia quem vai receber a mensagem — "Agendar com a
   Renata" diz mais do que "Agendar" repetido duas vezes. */
.sv-quem-grade{
  width:min(100% - 40px, var(--sv-larg)); margin:34px auto 0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap:16px;
}
.sv-quem{
  display:flex; flex-direction:column; gap:6px;
  padding:28px 26px; border-radius:var(--lp-raio);
  background:#fff; border:1px solid var(--lp-borda);
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.sv-quem:hover{
  transform:translateY(-4px); border-color:var(--cla);
  box-shadow:0 16px 36px rgba(11,16,51,.09);
}
.sv-quem-ini{
  width:56px; height:56px; border-radius:50%; margin-bottom:12px;
  display:grid; place-items:center;
  font-size:1.15rem; font-weight:800; letter-spacing:-.02em;
  background:color-mix(in srgb, var(--cla) 18%, transparent);
  color:var(--esc); border:1px solid color-mix(in srgb, var(--cla) 38%, transparent);
}
.sv-quem h3{ font-size:1.12rem; }
.sv-quem-papel{
  font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--cla);
}
.sv-quem-sobre{ color:var(--lp-tinta-2); font-size:.95rem; flex:1; }
.sv-quem .lp-btn{ margin-top:14px; width:100%; }

/* ---------- venda cruzada ----------
   Cada cartão leva para outra página de serviço, com a cor e a foto DELA —
   por isso as variáveis vêm no `style` do próprio link, e não do <body>. */
/* ---------- os outros serviços ----------
   A mesma peça dos cartões grandes de /solucoes — a foto é o cartão, o
   texto vive em cima dela —, só que lado a lado e numa altura que cabe
   três na mesma linha.

   A diferença é quando a COR aparece. Nos cartões grandes o degradê do
   serviço já vem de saída; aqui ele entra no hover. Três cartões parados,
   cada um pintado com a sua cor, brigavam entre si e com o serviço que a
   página está vendendo. Em repouso são três fotos sóbrias; a cor é a
   resposta ao ponteiro, e só uma acende por vez. */
.sv-outros{
  margin-top:34px;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:18px;
}
.sv-outro{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:340px; border-radius:18px;
  display:flex; align-items:flex-end;
  padding:26px 24px; color:#fff;
  background:var(--foto) 50% 42% / cover no-repeat;
  transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s;
}
.sv-outro:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 50px color-mix(in srgb, var(--esc) 40%, transparent);
}

/* ---------- o véu de leitura ----------
   Está sempre lá, e é ele que garante o texto legível sobre QUALQUER foto,
   inclusive antes de a cor entrar. Sem ele o cartão em repouso dependeria
   da sorte de a foto ser escura naquele canto. */
.sv-outro-veu{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top,
    rgba(6,9,26,.9) 0%, rgba(6,9,26,.55) 38%, rgba(6,9,26,.12) 100%);
}

/* ---------- a cor, no hover ----------
   O mesmo degradê dos cartões de /solucoes, com as mesmas paradas — o que
   muda é a opacidade, que sai de zero. Pintado por cima, sem mesclagem:
   testei com `multiply` e a cor ficava um tingido tímido — a foto continua
   aparecendo porque o próprio degradê morre em transparente aos 88%. */
.sv-outro::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(331.96deg,
    var(--esc) 19.06%, var(--cla) 42%, rgba(102,102,102,0) 88%);
  opacity:0; transition:opacity .35s;
}
.sv-outro:hover::after{ opacity:1; }

.sv-outro-txt{
  position:relative; z-index:3;
  display:flex; flex-direction:column; gap:7px;
}
.sv-outro h3{ font-size:1.32rem; line-height:1.2; color:#fff; margin:0; }
.sv-outro p{ font-size:.95rem; line-height:1.4; color:rgba(255,255,255,.88); margin:0; }
.sv-mais{
  display:inline-flex; align-items:center; gap:7px; margin-top:5px;
  font-weight:600; font-size:.9rem; color:#fff;
}
.sv-mais i{ font-style:normal; transition:transform .25s; }
.sv-outro:hover .sv-mais i{ transform:translateX(4px); }

/* Três cartões numa caixa de 1000px dão ~320px cada, que é o mínimo para o
   título caber em duas linhas. Abaixo disso a grade quebra antes de o
   texto ficar espremido. */
@media (max-width:900px){
  .sv-outros{ grid-template-columns:repeat(2, 1fr); }
  .sv-outro{ min-height:280px; }
}
@media (max-width:620px){
  .sv-outros{ grid-template-columns:1fr; }
  .sv-outro{ min-height:240px; }
}

@media (prefers-reduced-motion: reduce){
  .sv-outro, .sv-outro::after, .sv-mais i{ transition:none; }
  .sv-outro:hover{ transform:none; }
}

/* ============================================================
   do blog
   ============================================================
   O cartão é o MESMO do índice do blog e do carrossel da home — vem pronto
   de tools/gerar-posts.mjs, com as classes `lp-post` que já moram no
   landing.css. O que muda aqui é só o arranjo: no blog eles rolam de lado,
   nesta página ficam parados em três colunas, porque são três e não têm
   continuação.

   O `flex-basis` do cartão não precisa ser desfeito: item de grade ignora
   `flex`. Por isso não há nenhum `!important` nesta seção. */
.sv-artigos{
  margin-top:34px;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:26px;
}
.sv-artigos-pe{ margin-top:30px; display:flex; justify-content:center; }

@media (max-width:900px){
  .sv-artigos{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:620px){
  .sv-artigos{ grid-template-columns:1fr; }
}

/* ---------- dúvidas ----------
   O bloco usa `.lp-faq` do landing.css para os `details`; aqui só o
   espaçamento, porque lá a seção tem largura e grade próprias. */
.sv-duvidas{ padding:var(--sv-alto) 0; }
.sv-duvidas .lp-faq-itens{ margin-top:32px; }

@media (max-width:640px){
  .sv{ --sv-alto:60px; }
  .sv-heroi{ padding:130px 0 60px; }
  .sv-passos li{ gap:14px; }
}

/* ============================================================
   os planos
   ============================================================
   O preço de cada cartão é SOMADO pelo landing.js a partir das chaves do
   catálogo que estão no `data-plano`. Não há número escrito aqui nem no
   HTML: um reajuste no painel chega à página sem ninguém reescrever nada. */
.sv-planos{
  margin-top:34px;
  /* 200px, e não 240: com o vão de 16px, quatro colunas de 240 passavam dos
     1000px da caixa e o quarto plano caía sozinho numa segunda linha. */
  display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:16px;
  align-items:stretch;
}
/* ---------- o cartão, como no site atual ----------
   Fundo próprio por plano (--plano-cor, escrito pelo gerador), canto de 8px,
   fio de 1px e 40px de respiro — as medidas de lá.

   O efeito do mouse é o mesmo, e o truque dele é a fila inteira reagir: ao
   entrar na fila TODAS as colunas caem para 60%, e só a que está sob o
   ponteiro volta ao cheio e cresce. Por isso a regra do apagamento mora no
   contêiner e não no cartão — é o `:hover` do pai que dispara. */
.sv-plano{
  position:relative; display:flex; flex-direction:column; gap:12px;
  padding:40px 32px; border-radius:8px;
  background:var(--plano-cor, #fff); border:1px solid #E6E6E6;
  transition:.4s;
}
.sv-planos:hover .sv-plano{ opacity:.6; }
.sv-plano:hover,
.sv-planos:hover .sv-plano:hover{
  opacity:1; transform:scale(1.02); z-index:2;
  box-shadow:0 18px 40px rgba(11,16,51,.13);
}

/* O ícone em 3D é o arquivo do site atual. Altura fixa e largura livre: os
   quatro PNGs têm proporções diferentes, e travar a largura os achataria. */
.sv-plano-ico{
  /* `align-self` porque o cartão é uma coluna flex: sem isto a imagem
     estica até a largura toda e, com a altura fixa, sai achatada. */
  align-self:flex-start;
  display:block; width:auto; height:76px; margin-bottom:6px;
}


/* O destacado sobe um degrau e ganha a borda da cor — sem mudar de tamanho,
   para as quatro colunas continuarem alinhadas. */
.sv-plano-destaque{
  border-color:var(--cla); box-shadow:0 14px 34px rgba(11,16,51,.1);
}
.sv-plano-fita{
  position:absolute; top:-11px; left:26px;
  font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  padding:4px 11px; border-radius:999px; background:var(--cla); color:#fff;
}
.sv-plano h3{ font-size:1.2rem; }
.sv-plano-conta{ color:var(--lp-tinta-2); font-size:.92rem; }
.sv-plano-preco{
  font-size:1.45rem; font-weight:800; letter-spacing:-.02em; color:var(--esc);
  line-height:1.2;
}
.sv-plano-preco small{ display:block; font-size:.72rem; font-weight:600; color:var(--lp-tinta-2); letter-spacing:0; }
.sv-plano ul{ list-style:none; margin:4px 0 0; padding:0; display:grid; gap:9px; flex:1; }
.sv-plano li{
  display:flex; gap:10px; align-items:flex-start;
  font-size:.92rem; color:var(--lp-tinta-2);
}
.sv-plano li::before{ content:"✓"; color:var(--cla); font-weight:800; flex:none; }
.sv-plano .lp-btn{ margin-top:6px; width:100%; }

/* ---------- o cartão escuro ----------
   O Posicionamento tem fundo quase preto e o texto inteiro vira claro.
   Este bloco vem DEPOIS das regras genéricas do cartão de propósito: as
   duas têm a mesma especificidade, e quem fala por último ganha — com ele
   acima, o ✓ continuava azul e a lista, cinza, sobre o preto. */
.sv-plano-escuro{ color:#fff; }
.sv-plano-escuro h3{ color:#fff; }
.sv-plano-escuro .sv-plano-conta,
.sv-plano-escuro li{ color:rgba(255,255,255,.84); }
/* O ✓ segue a cor do serviço, que no escuro fica ilegível. Aqui ele é branco. */
.sv-plano-escuro li::before{ color:#fff; }
.sv-plano-escuro .sv-plano-preco{ color:#fff; }
.sv-plano-escuro .sv-plano-preco small{ color:rgba(255,255,255,.66); }
.sv-plano-escuro .lp-btn-linha{
  background:transparent; color:#fff; border-color:rgba(255,255,255,.5);
}
.sv-plano-escuro .lp-btn-linha:hover{ background:rgba(255,255,255,.12); color:#fff; }

/* O bloco cru não tem contêiner próprio: quem o usa já traz o seu. */
.sv-html{ }

/* O rótulo é curto, mas o nome do plano viaja no `data-zap` — e um nome
   comprido não pode empurrar o botão para fora do cartão. */
.sv-plano .lp-btn{ white-space:normal; padding-inline:14px; font-size:.9rem; }

/* ============================================================
   as migalhas
   ============================================================
   Quem chega pelo Google cai no meio do site sem saber onde está. A trilha
   dá o caminho de volta que não é o botão do navegador. */
.sv-migalhas{
  padding:18px 0 0; display:flex; gap:9px; align-items:center; flex-wrap:wrap;
  font-size:.84rem; color:var(--lp-tinta-2);
}
.sv-migalhas a:hover{ color:var(--cla); }
.sv-migalhas span{ opacity:.5; }
.sv-migalhas b{ color:var(--lp-tinta); font-weight:600; }

/* ============================================================
   os ícones dos cartões
   ============================================================
   Mesmo traço e mesmo brilho da home, e desenhados pelo mesmo código: o
   landing.js procura `.lp-ico, .sv-ico`. Eles existem para o olho ter onde
   pousar — sem eles a página é uma coluna de texto do herói ao rodapé. */
.sv-ico{
  display:grid; place-items:center;
  width:40px; height:40px; border-radius:12px; margin-bottom:14px;
  background:color-mix(in srgb, var(--cla) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--cla) 26%, transparent);
  transition:box-shadow .25s, transform .25s;
}
.sv-ico svg{ width:22px; height:22px; display:block; overflow:visible; }
.sv-ico path{
  fill:none; stroke:var(--cla); stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 3px color-mix(in srgb, var(--cla) 45%, transparent));
  transition:filter .3s, stroke-width .3s;
}
.sv-cartao:hover .sv-ico{ transform:translateY(-2px); }
.sv-cartao:hover .sv-ico path{
  filter:drop-shadow(0 0 7px color-mix(in srgb, var(--cla) 60%, transparent));
  stroke-width:1.7;
}

/* ============================================================
   a frase de destaque
   ============================================================
   Era uma faixa de largura inteira, na cor do serviço. Com a página toda
   branca ela passou a ser a única mancha de cor, e o que era ênfase virava
   interrupção. É a mesma frase, no mesmo serifado e no mesmo lugar, agora
   sobre branco: quem destaca é o tamanho e o traço curto acima dela, na cor
   do serviço. Não leva linha divisória — a forma da frase já separa. */
.sv-b-faixa{ padding:var(--sv-alto) 0; }
.sv-faixa-cx{
  width:min(100% - 40px, var(--sv-larg)); margin-inline:auto;
  text-align:center;
}
.sv-faixa-cx::before{
  content:""; display:block; width:44px; height:3px; border-radius:2px;
  margin:0 auto 26px; background:var(--cla);
}
.sv-faixa-frase{
  font-family:var(--lp-serif); font-weight:400; letter-spacing:0;
  font-size:clamp(1.5rem, 3.4vw, 2.5rem); line-height:1.24;
  color:var(--lp-tinta);
  max-width:24ch; margin-inline:auto;
}
.sv-faixa-apoio{
  margin-top:16px; font-size:1.02rem; color:var(--lp-tinta-2);
  max-width:52ch; margin-inline:auto;
}

/* ============================================================
   a chamada do meio
   ============================================================ */
.sv-chamada-cx{ text-align:center; }
.sv-chamada-cx .lp-acoes{ justify-content:center; margin-top:26px; }
.sv-chamada-cx .sv-intro{ margin-inline:auto; max-width:56ch; }

@media (max-width:640px){
  .sv-migalhas{ font-size:.78rem; }
}

/* ============================================================
   a vitrine
   ============================================================
   Os mesmos cartões grandes da home — mesmo markup, mesma pilha, mesmo
   encolhimento do GSAP. Este bloco só repinta.

   No lugar do degradê da cor de cada serviço entra uma CAMADA PRETA, igual
   para os cinco. Aqui a página apresenta o catálogo, e cinco cores
   competindo transformariam a lista num mostruário de tintas. Com o preto,
   o que diferencia um cartão do outro é a fotografia — que é o assunto. */
/* A pilha não tem largura própria: na home ela herda a do `.lp-larg` de
   1280px que a envolve, e aqui o pai é o bloco de largura inteira — os
   cartões saíam maiores que todo o resto da página. Mesma caixa de sempre. */
.lp-servicos-pilha.sv-vitrine{
  width:min(100% - 40px, var(--sv-larg)); margin-inline:auto;
  /* A pilha começava colada na linha de apoio do título. O respiro aqui
     separa o que é TEXTO do que é CATÁLOGO: em cima a frase que apresenta,
     embaixo os cinco cartões. Sem ele, a frase parecia legenda do primeiro
     cartão. */
  margin-top:52px;
}
/* ...e o título e a frase, ao contrário, andam juntos: são uma coisa só, e
   os 16px de todo bloco abriam demais para um par tão curto. */
.sv-b-vitrine .sv-cx .sv-intro{ margin-top:9px; }
.sv-vitrine .lp-servico-arte{
  /* O véu de baixo é mais forte porque é lá que mora o texto; o resto fica
     no preto chapado que dá a unidade. */
  background:
    linear-gradient(0deg, rgba(0,0,0,.78), rgba(0,0,0,.5) 52%, rgba(0,0,0,.44)),
    var(--foto);
  background-blend-mode:normal, normal;
  background-size:cover;
  background-position:50% 50%;
}
/* A foto não aproxima no hover: aqui são cinco cartões numa lista, e cinco
   coisas se mexendo ao passar o mouse é ruído, não resposta. */
.sv-vitrine .lp-servico:hover .lp-servico-arte{
  transform:none; background-size:cover;
  filter:brightness(1.06);
  box-shadow:0 24px 60px rgba(0,0,0,.3);
}
/* O brilho que atravessa continua — ele não depende de cor. */

/* Os dois botões também iguais em todos: branco cheio e branco de contorno.
   Usar a cor do serviço aqui traria de volta as cinco cores pela porta dos
   fundos. */
.sv-vitrine .lp-btn-saiba{ background:#fff; color:var(--lp-tinta); --brilho:rgba(255,255,255,.95); }
.sv-vitrine .lp-btn-msg{
  background:transparent; color:#fff; border-color:rgba(255,255,255,.55);
}
.sv-vitrine .lp-btn-msg:hover{ background:rgba(255,255,255,.14); }
.sv-vitrine .lp-servico-preco{ color:#fff; }