/* A pagina de um servico — /servicos/<endereco>/.

   Recomposta em 2026-09-22 sobre as tres telas de referencia que Lucas mandou.
   E UMA folha para as tres paginas: o que muda por servico e a foto do heroi,
   a foto da faixa do fim e as frases de apoio, e tudo isso entra por
   `.sv-heroi--<slug>` e `.sv-conversa--<slug>`.

   Por que fora do `app.css`: e a composicao de tres paginas, com foto de fundo
   e faixas de borda a borda, e o gate de CSS morto audita o `app.css` contra
   TODAS as paginas. Mesma razao de `resultados.css`.

   As cores sao as do sistema. `--marca` no botao e no fio, `--cor-acento-quente`
   (o laranja do facho, o mesmo dos cartoes de servico) nas palavras em caixa
   alta e nos icones, `--cor-texto-luz` (ambar) na sobrancelha. Nada de literal
   fora do `@font-face`: o painel continua no controle pela ponte de `/brand.css`.

   AS FOTOS SAO FUNDO DE CSS, e nao <img>: nenhuma informacao da pagina esta
   nelas. O caminho e relativo (`../img/`) de proposito - em producao o
   `ManifestStaticFilesStorage` reescreve URLs relativas com o hash do arquivo.

   OS DEGRADES POR CIMA DAS FOTOS SAO CONTRASTE, NAO ENFEITE. Foram medidos
   pixel a pixel no Firefox contra o pior pixel de cada caixa de texto, em
   360, 768, 1440 e 1920, em 2026-09-22. Mexer neles exige medir de novo. */

/* A manuscrita, para a frase do presencial ("Mulheres mais fortes vivem mais
   livres"). E o mesmo arquivo do cartao do In Move (`efeitos/in-move/home.css`),
   declarado de novo aqui porque esta folha carrega sozinha; o navegador baixa
   a fonte uma vez so. Licenca Apache 2.0, ao lado do arquivo. */
@font-face {
  font-family: "Yellowtail";
  src: url("../fonts/yellowtail-latin.5394bcfe7a18.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.pagina-servico {
  --sv-quente: var(--cor-acento-quente);
  /* O acento de TEXTO (sobrancelhas, palavras, selos, descritor) e o ambar
     do menu, `--cor-texto-luz` (10,74:1 no escuro); o laranja `--sv-quente`
     fica para as pecas de "Outros servicos" e para os brilhos. Os fios
     verticais sao terracota, a cor da marca - e, desde 22/09 a tarde, tambem
     o numero e o icone dos passos de "Como funciona", como nas referencias
     (Lucas). */
  --sv-ambar: var(--cor-texto-luz);
  /* O terracota da marca: os fios verticais, e o numero e o icone dos passos. */
  --sv-terracota: var(--marca);
  --sv-fio-marca: var(--sv-terracota);
  --sv-fio: color-mix(in srgb, var(--cor-texto) 12%, transparent);
  --sv-fio-forte: color-mix(in srgb, var(--cor-texto) 20%, transparent);
  --sv-caixa: color-mix(in srgb, var(--cor-superficie) 55%, var(--cor-fundo));
  --sv-veu: var(--cor-fundo);
}
.pagina-servico__corpo { width: 100%; }

/* O HEROI, SOBRE A FOTO
   ========================================================================== */
.sv-heroi {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--cor-fundo);
  border-bottom: 1px solid var(--sv-fio);
}
.sv-heroi::before,
.sv-heroi::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* A foto. `--sv-foto` vem do modificador de slug; sem ele (um servico novo do
   painel) fica so o fundo de carvao com o halo, e a pagina continua inteira. */
.sv-heroi::before {
  z-index: -2;
  background: var(--sv-foto, none) var(--sv-foto-posicao, 70% 50%) / cover no-repeat;
}
/* Composicao unica em 3840x914: a foto original substitui a silhueta antiga,
   sem duas pessoas sobrepostas no navegador. */
.sv-heroi--lpf { --sv-foto: url("../img/servicos/lpf-topo-foto-original.5878a5b72571.webp"); --sv-foto-posicao: 70% 50%; }
/* 70%, e nao 58%: a foto e 4,2:1 e o heroi fica entre 2,4:1 e 3,9:1, entao o
   `cover` corta ate um terco da largura. A escrita termina a 86,5% da foto;
   ancorada a 70% ela entra inteira de 1024 a 1920 px, e a Bianca (a 60% da
   foto) fica entre 53% e 59% do heroi. Lucas viu a escrita cortada em ~1270. */
.sv-heroi--personal-presencial {
  --sv-foto: url("../img/servicos/presencial-topo.964003bff194.webp");
  --sv-foto-posicao: 66% 40%;
  /* A referencia tem a direita escura; a nossa foto tem quatro lampadas acesas
     exatamente onde a frase e a coluna caem - medido, a coluna dava 1,00:1
     sobre o vidro aceso. Em vez de um cartao atras de cada frase (Lucas
     recusou em 22/09, comparando com a referencia), o veu sobe de novo depois
     de 60%: as lampadas viram brilho quente, e as duas frases leem sobre
     escuro. Mexer neste degrade exige medir o contraste de novo. */
  --sv-veu-direita: linear-gradient(90deg,
    transparent 0%,
    transparent 50%,
    color-mix(in srgb, var(--sv-veu) 42%, transparent) 62%,
    color-mix(in srgb, var(--sv-veu) 68%, transparent) 74%,
    color-mix(in srgb, var(--sv-veu) 78%, transparent) 86%,
    color-mix(in srgb, var(--sv-veu) 82%, transparent) 100%);
}
.sv-heroi--consultoria-online { --sv-foto: url("../img/servicos/consultoria-topo.54210d3d9bad.webp"); --sv-foto-posicao: 60% 50%; }
/* O veu: escuro na coluna do texto, transparente sobre a pessoa. Dois
   degrades - o horizontal paga o contraste do texto, o vertical apaga a foto
   na base para a secao seguinte nao comecar num corte. */
.sv-heroi::after {
  z-index: -1;
  background:
    /* Camada opcional, por slug: escurece a FAIXA DA DIREITA quando a foto tem
       luz forte ali. Entra so no presencial; nos outros e `none`. */
    var(--sv-veu-direita, none),
    linear-gradient(90deg,
      color-mix(in srgb, var(--sv-veu) 95%, transparent) 0%,
      color-mix(in srgb, var(--sv-veu) 88%, transparent) 32%,
      color-mix(in srgb, var(--sv-veu) 55%, transparent) 54%,
      color-mix(in srgb, var(--sv-veu) 12%, transparent) 74%,
      transparent 84%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--sv-veu) 55%, transparent) 0%,
      transparent 22%,
      transparent 78%,
      color-mix(in srgb, var(--sv-veu) 70%, transparent) 100%),
    radial-gradient(60% 80% at 100% 100%,
      color-mix(in srgb, var(--sv-quente) 10%, transparent), transparent 70%);
}
.sv-heroi__interno {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  min-height: clamp(24rem, 44vw, 38rem);
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}
/* O heroi do LPF e mais baixo: a foto dele e uma tira de 4,2:1 (2570x612) e,
   com `cover`, cada pixel de altura a mais e zoom - a 607 px ela mostrava 56%
   da largura, cortava a escrita e borrava. Com ~480 px a escala fica em 0,78,
   a escrita "Corpo que funciona melhor vive mais." entra inteira em 1440 e a
   Bianca continua a direita do texto. (Lucas, 22/09: "tira um pouco no zoom".) */
.sv-heroi--lpf .sv-heroi__interno {
  min-height: clamp(20rem, 26vw, 26rem);
  padding-block: clamp(2rem, 3vw, 2.75rem);
}
.sv-heroi--lpf .volta-para { margin-bottom: var(--espaco-5); }
.sv-heroi--lpf .sv-heroi__palavras { margin-top: var(--espaco-5); }
.sv-heroi__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 36rem;
}
.volta-para {
  margin: 0 0 var(--espaco-8);
  font-size: var(--fs-15);
  font-weight: var(--peso-medio);
}
.volta-para a {
  color: var(--cor-texto);
  text-decoration: underline;
  text-decoration-color: var(--sv-ambar);
  text-decoration-thickness: 1px;
  text-underline-offset: .4em;
}
.volta-para a:hover,
.volta-para a:focus-visible { color: var(--sv-ambar); }
.sv-heroi__sobrancelha { color: var(--sv-ambar); }
.sv-heroi__titulo {
  margin: 0 0 var(--espaco-5);
  color: var(--cor-texto);
  /* 4.25rem no teto, e nao mais: "presencial" e "Consultoria" tem de caber
     INTEIRAS na coluna de 36rem. A 5.75rem com a largura display (125%) a
     palavra estourava a coluna e o Firefox partia "presencia|l" no meio. */
  font-size: clamp(2.75rem, 5.2vw, 4.25rem);
  font-weight: var(--peso-display);
  font-stretch: var(--largura-titulo);
  line-height: .98;
  letter-spacing: -.02em;
  overflow-wrap: normal;
}
.sv-heroi--lpf .sv-heroi__titulo { color: var(--sv-terracota); font-size: clamp(4.5rem, 7.2vw, 6.5rem); font-stretch: var(--largura-display); }
.sv-heroi__linha {
  margin: 0;
  max-width: 34rem;
  color: var(--cor-texto);
  font-size: clamp(var(--fs-16), 1.4vw, var(--fs-20));
  line-height: 1.55;
}
/* As tres palavras do LPF, e as colunas de palavras dos outros dois: caixa
   alta, espacadas, uma por linha. No LPF ficam sob o resumo, em laranja; nos
   outros vao a direita, em areia, ao lado da pessoa. */
.sv-heroi__palavras,
.sv-heroi__coluna,
.sv-conversa__palavras {
  /* `fit-content`: sao paragrafos de tres palavras, e um <p> de bloco iria ate
     o fim da coluna - por cima do halter, na medicao. A caixa acompanha o
     texto, e o veu so precisa pagar o que esta atras das letras. */
  width: fit-content;
  margin: 0;
  font-size: var(--fs-12);
  font-weight: var(--peso-forte);
  letter-spacing: .3em;
  line-height: 2.1;
  text-transform: uppercase;
}
.sv-heroi__palavras { margin-top: var(--espaco-8); color: var(--sv-ambar); }
/* A frase e a coluna de palavras ficam SOBRE a pessoa, como na referencia.
   Na CONSULTORIA a coluna teve um vidro escuro a 72% enquanto ficava sobre o
   aro claro do disco (sem ele, 1,07:1); no canto ela dispensa o vidro.

   No PRESENCIAL o cartao saiu: Lucas comparou com a referencia em 22/09 e ali
   nao ha caixa, so o fio vertical. O que entra no lugar NAO e um cartao mais
   claro - e um veu radial que morre antes da borda do proprio paragrafo: sem
   canto, sem raio e sem desfoque, ele le-se como sombra da foto. Ele e
   necessario, e nao enfeite: a foto daqui tem lampadas acesas exatamente onde
   as duas frases caem, e sem veu nenhum a coluna media 1,00:1 em 1440 (o "O"
   de EQUILIBRIO sobre o vidro aceso) e a frase 2,58:1 em 1100. */
/* Na CONSULTORIA a coluna mora no canto superior direito do heroi, rente ao
   fio de cima e ao fim da tela, e sem o vidro escuro que tinha: Lucas escolheu
   o canto na bancada de ajuste e pediu "so a escrita" (23/09). O `padding`
   fica - e ele que guarda a distancia das letras ate as duas bordas. Abaixo
   de 64rem a coluna nao aparece (ver o bloco do celular). A cor e o ambar das
   outras frases em caixa alta da pagina, tambem a pedido dele.

   Ambar puro sobre a foto nao fecha: medido no Firefox, a segunda e a terceira
   linha caiam a 2,95:1 em 1095 e 3,27:1 em 1440. O que paga o contraste e um
   veu radial que morre antes da borda do proprio paragrafo - sem canto, sem
   raio, sem desfoque: le-se como sombra da foto, nao como cartao. */
.sv-heroi--consultoria-online .sv-heroi__coluna {
  padding: var(--espaco-4) var(--espaco-5);
  color: var(--sv-ambar);
  background: radial-gradient(ellipse 60% 100% at center,
    color-mix(in srgb, var(--sv-veu) 90%, transparent) 85%,
    transparent);
}
/* Na consultoria a primeira palavra do titulo e terracota (Lucas, 23/09); o
   resto segue areia. O <span> vem do template. */
.sv-heroi__acento { color: var(--sv-terracota); }
@media (min-width: 64rem) {
  .sv-heroi--consultoria-online .sv-heroi__acento {
    color: color-mix(in srgb, var(--sv-terracota) 90%, var(--sv-ambar));
  }
  .sv-heroi--consultoria-online .sv-heroi__interno { position: static; }
  .sv-heroi--consultoria-online .sv-heroi__coluna {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
  }
}
.sv-heroi__coluna { color: var(--cor-texto); }
.sv-heroi__frase {
  margin: 0;
  /* O fio e terracota, e nao um branco a 20%: e o que a referencia tem, e a
     mesma regra dos outros fios verticais da pagina. */
  padding-left: var(--espaco-5);
  border-left: 1px solid var(--sv-terracota);
  color: var(--cor-texto);
  font-size: var(--fs-14);
  font-weight: var(--peso-semi);
  letter-spacing: .28em;
  line-height: 2;
  text-transform: uppercase;
}
.sv-heroi--personal-presencial .sv-heroi__interno { grid-template-columns: minmax(0, 1fr) auto auto; }
/* AS DUAS FRASES FICAM ONDE LUCAS AS POS com a bancada de ajuste (22-23/09):
   a frase a esquerda da cabeca dela, a coluna encostada na borda direita da
   tela, as duas pelo topo e na mesma linha, logo abaixo do comeco da foto.
   Nao cabem na grade do container - a coluna passa da calha -, entao saem
   dela e se posicionam contra o heroi inteiro (`position: static` na grade
   para o heroi ser o bloco de referencia; o `::before`/`::after` continuam
   atras porque tem z-index negativo). As medidas sao fracoes da largura
   porque a foto e `cover` pela largura de 1024 a 1920: a cabeca dela fica a
   ~59% da tela, e a frase a 35,7% cai sempre a esquerda dela. */
@media (min-width: 64rem) {
  .sv-heroi--personal-presencial .sv-heroi__interno {
    position: static;
    grid-template-columns: minmax(0, 1fr);
  }
  .sv-heroi--personal-presencial :is(.sv-heroi__frase, .sv-heroi__coluna) {
    position: absolute;
    z-index: 1;
    top: clamp(1.5rem, 1.75vw, 2.25rem);
  }
  .sv-heroi--personal-presencial .sv-heroi__frase { left: 35.7%; }
  .sv-heroi--personal-presencial .sv-heroi__coluna { right: clamp(1.5rem, 1.7vw, 2rem); }
}
.sv-heroi--personal-presencial .sv-heroi__coluna {
  padding-left: var(--espaco-5);
  border-left: 1px solid var(--sv-terracota);
}
/* Os tres selos do presencial: icone laranja e duas linhas em caixa alta. */
.sv-selos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-8);
  width: 100%;
  margin: var(--espaco-10) 0 0;
  /* Sem o fio de cima: Lucas tirou em 23/09. O respiro continua. */
  padding: var(--espaco-6) 0 0;
  list-style: none;
}
.sv-selo {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  color: var(--cor-texto);
  font-size: var(--fs-12);
  font-weight: var(--peso-forte);
  letter-spacing: .2em;
  line-height: 1.7;
  text-transform: uppercase;
}
/* Os tres icones sao terracota, como o numero e o icone dos passos; o texto
   ao lado continua em areia. Lucas, 22/09. */
.sv-selo svg { flex: none; width: 2rem; height: 2rem; color: var(--sv-terracota); }

/* AS SECOES DO CORPO
   ========================================================================== */
.sv-titulo {
  margin: 0 0 var(--espaco-6);
  color: var(--cor-texto);
  font-size: clamp(var(--fs-24), 2.6vw, var(--fs-36));
  font-weight: var(--peso-forte);
  font-stretch: var(--largura-titulo);
  line-height: 1.1;
}
.sv-como,
/* "Outros servicos" sobre a foto de lava (referencia de 22/09). A foto e
   fundo da secao com um veu que escurece o topo, onde ficam a sobrancelha e o
   titulo; os cartoes sao de vidro, com a moldura laranja e o brilho. */
.sv-outros {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(var(--espaco-10), 5vw, var(--espaco-16));
  border-top: 1px solid var(--sv-fio);
}
.sv-outros::before,
.sv-outros::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.sv-outros::before {
  z-index: -2;
  background: url("../img/servicos/outros-fundo.f2de778b694c.webp") 50% 100% / cover no-repeat;
}
/* O veu volta a fechar no FIM da secao. Antes ele clareava ate 40% na borda
   de baixo, e a foto de lava terminava a seco: uma faixa acesa cortada em
   linha reta contra o preto liso do respiro seguinte. Lucas apontou a emenda
   em 22/09. Agora a foto entra e sai escurecendo, e nao ha aresta. */
.sv-outros::after {
  z-index: -1;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--sv-veu) 92%, transparent) 0%,
    color-mix(in srgb, var(--sv-veu) 70%, transparent) 38%,
    color-mix(in srgb, var(--sv-veu) 42%, transparent) 72%,
    color-mix(in srgb, var(--sv-veu) 88%, transparent) 100%);
}
/* No LPF a lava fica mais acesa e mais aberta: posicao, brilho e o veu com
   41% da forca vieram da bancada de ajuste, com Lucas olhando a pagina
   (23/09). So no LPF: o presencial esta fechado e a consultoria nao entrou
   nessa rodada. Medido com estes valores e os de `.sv-conversa--lpf`, no
   Firefox, contra o percentil 95 de cada caixa de texto das duas faixas: nada
   abaixo de 4,5:1 em 360, 768, 1440 e 1920, com a foto de baixo no topo da
   propria secao. O pior e o paragrafo de "Vamos conversar" em 360 (4,64:1);
   "Outros servicos" fica acima de 8,7:1, porque a lava e escura no alto da
   faixa. */
.pagina-servico--lpf .sv-outros::before {
  background-position: 48% 49%;
  filter: brightness(1.37) contrast(1.1) saturate(1.07);
}
.pagina-servico--lpf .sv-outros::after { opacity: .41; }
.sv-outros__cabeca {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--espaco-8);
  margin-bottom: var(--espaco-8);
}
.sv-outros__sobrancelha {
  display: flex;
  align-items: center;
  gap: var(--espaco-5);
  width: 100%;
  margin-bottom: var(--espaco-3);
  /* O mesmo ambar da sobrancelha do heroi ("PRESENCIAL"), e nao o laranja:
     Lucas comparou as duas em 22/09. O fio ao lado continua laranja, que e a
     cor das pecas de "Outros servicos". */
  color: var(--sv-ambar);
}
.sv-outros__sobrancelha::before { display: none; }
.sv-outros__sobrancelha::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, var(--sv-quente), color-mix(in srgb, var(--sv-quente) 25%, transparent));
}
.sv-outros__titulo { margin: 0; }
.sv-outros__acento { color: var(--sv-quente); }
.sv-outros__texto {
  max-width: 24rem;
  margin: 0;
  color: var(--cor-texto);
  font-size: var(--fs-16);
  line-height: 1.5;
}
.sv-outros__riscos {
  color: var(--sv-quente);
  font-size: var(--fs-36);
  font-weight: var(--peso-forte);
  font-style: italic;
  line-height: 1;
}
.sv-como { border-bottom: 1px solid var(--sv-fio); }

/* LPF: duas colunas com o fio laranja a esquerda, e a marca fechando. */
.sv-duas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--espaco-8), 4vw, var(--espaco-16));
  align-items: start;
}
.sv-duas__coluna {
  padding-left: var(--espaco-5);
  border-left: 2px solid var(--sv-fio-marca);
}
.sv-prosa { max-width: 34rem; color: var(--cor-texto); font-size: var(--fs-16); line-height: 1.6; }
.sv-prosa p { margin: 0 0 var(--espaco-4); }
.sv-prosa p:last-child { margin-bottom: 0; }
.sv-trata {
  display: grid;
  gap: var(--espaco-3);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--cor-texto);
  font-size: var(--fs-16);
  line-height: 1.5;
}
.sv-trata > li { display: flex; align-items: center; gap: var(--espaco-4); }
.sv-trata__icone {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--sv-fio-marca); /* terracota, como os fios: Lucas, 22/09 */
}
.sv-trata__icone svg { width: 1.75rem; height: 1.75rem; }
.sv-trata__icone--ponto::before {
  content: "";
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: currentColor;
}
.sv-nota { margin: var(--espaco-5) 0 0; color: var(--cor-texto-suave); }
.sv-marca {
  display: none;
  grid-column: 1 / -1;
  justify-self: end;
  margin: 0;
  text-align: center;
  color: var(--cor-texto);
}
.sv-marca__simbolo { display: block; width: 3rem; height: 3rem; margin: 0 auto var(--espaco-2); object-fit: contain; }
.sv-marca__nome { display: block; font-size: var(--fs-14); font-weight: var(--peso-forte); letter-spacing: .28em; text-transform: uppercase; }
.sv-marca__descritor { display: block; color: var(--sv-ambar); font-size: var(--fs-12); font-weight: var(--peso-semi); letter-spacing: .3em; text-transform: uppercase; }

/* Presencial e consultoria: cinco passos numerados. */
.sv-como__cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--espaco-3) var(--espaco-8);
  margin-bottom: var(--espaco-8);
}
/* O fio terracota que abre a secao, acima do titulo (Lucas, 22/09). E
   `::before` de largura inteira dentro do flex, e nao `border-top` na secao:
   a secao ja tem borda propria de fio claro, e esta linha pertence ao
   cabecalho - some junto com ele se o titulo sair. */
.sv-como__cabeca::before {
  content: "";
  flex: 0 0 100%;
  height: 1px;
  margin-bottom: var(--espaco-6);
  background: linear-gradient(90deg,
    var(--sv-terracota),
    color-mix(in srgb, var(--sv-terracota) 30%, transparent));
}
.sv-como__cabeca .sv-titulo { margin: 0; }
/* NO PRESENCIAL (Lucas, 25/09) a frase "Um processo simples..." fica ACIMA
   do titulo e e a mesma sobrancelha de "Evolua do seu jeito": ambar, com o
   fio laranja que se apaga para a direita. O fio terracota largo que abre a
   secao sai ali - quem abre agora e o fio da sobrancelha -, e "funciona" e
   terracota, como "servicos". A consultoria nao tem a frase e segue igual. */
.pagina-servico--personal-presencial .sv-como__cabeca::before { display: none; }
.sv-como__sobrancelha {
  display: flex;
  flex: 0 0 100%;
  align-items: center;
  gap: var(--espaco-5);
  margin: 0;
  color: var(--sv-ambar);
}
.sv-como__sobrancelha::before { display: none; }
.sv-como__sobrancelha::after {
  content: "";
  flex: 1 1 auto;
  min-width: 2rem;
  height: 1px;
  background: linear-gradient(90deg, var(--sv-quente), color-mix(in srgb, var(--sv-quente) 25%, transparent));
}
.sv-como__acento { color: var(--sv-terracota); }
/* Em tela larga o fio tem o comprimento do de "Evolua do seu jeito"; a margem
   completa a linha para o titulo nao subir para o lado dele. */
@media (min-width: 80rem) {
  .sv-como__sobrancelha { flex-basis: 64%; margin-inline-end: 36%; }
}
.sv-passos {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: passo;
}
.sv-passo {
  padding: var(--espaco-2) var(--espaco-5) var(--espaco-2) var(--espaco-5);
  border-left: 1px solid var(--sv-fio);
  color: var(--cor-texto-suave);
  font-size: var(--fs-15);
  line-height: 1.55;
}
.sv-passo:first-child { padding-left: 0; border-left: 0; }
.sv-passo p { margin: 0; }
/* Numero e icone em terracota, a cor da marca (Lucas, 22/09; e o que as duas
   referencias mostram). O `--sv-ambar` fica para as sobrancelhas. */
.sv-passo__cabeca {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  margin-bottom: var(--espaco-4);
  color: var(--sv-terracota);
}
.sv-passo__icone { flex: none; width: 2.25rem; height: 2.25rem; }
.sv-passo__numero {
  font-size: var(--fs-24);
  font-weight: var(--peso-semi);
  font-stretch: var(--largura-titulo);
  letter-spacing: .02em;
  line-height: 1;
}
.sv-passo__titulo {
  margin: 0 0 var(--espaco-2);
  color: var(--cor-texto);
  font-size: var(--fs-18);
  font-weight: var(--peso-forte);
  line-height: 1.25;
  text-wrap: balance;
}

/* A CAIXA DE "OUTROS SERVICOS"
   ========================================================================== */
.sv-outros__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: var(--espaco-5);
}
.sv-caixa {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: var(--espaco-5) var(--espaco-6);
  padding: var(--espaco-5) var(--espaco-6) var(--espaco-6);
  border: 1px solid color-mix(in srgb, var(--sv-quente) 45%, transparent);
  border-radius: var(--raio-xl);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cor-texto) 4%, transparent), transparent 40%),
    color-mix(in srgb, var(--cor-fundo) 78%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sv-quente) 10%, transparent), 0 0 44px color-mix(in srgb, var(--sv-quente) 14%, transparent);
  backdrop-filter: blur(14px);
}
.sv-caixa__topo {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-4);
}
.sv-caixa__sobrancelha {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  margin: 0;
  color: var(--sv-quente);
  font-size: var(--fs-12);
  font-stretch: var(--largura-sobrancelha);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.sv-caixa__sobrancelha::before {
  content: "";
  width: 2rem;
  height: 1px;
  background: var(--sv-quente);
}
.sv-caixa__seta {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid color-mix(in srgb, var(--sv-quente) 55%, transparent);
  border-radius: 50%;
  color: var(--sv-quente);
  transition: background-color var(--dur-2, .2s), border-color var(--dur-2, .2s);
}
.sv-caixa__seta svg { width: 1.1rem; height: 1.1rem; }
.sv-caixa__seta:hover,
.sv-caixa__seta:focus-visible { border-color: var(--sv-quente); background: color-mix(in srgb, var(--sv-quente) 14%, transparent); }
.sv-caixa__icone {
  /* O quadro neon e a propria imagem (moldura, canto e brilho vem gravados);
     o CSS so garante o quadrado, o raio e o recorte. */
  display: block;
  align-self: center;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--raio-lg);
  background: var(--cor-fundo);
  /* O posicionamento, o isolamento e a transicao servem a luz que acende no
     quadro (abaixo). */
  position: relative;
  isolation: isolate;
  transition: box-shadow .35s ease;
}
.sv-caixa__icone img { display: block; width: 100%; height: 100%; object-fit: cover; transition: filter .35s ease; }

/* O QUADRO ACENDE (Lucas, 23/09): com o mouse em cima, uma luz laranja em
   degrade radial sobe de dentro do quadro e um halo aparece em volta. A luz e
   `mix-blend-mode: screen`, entao ela so clareia - o neon gravado na imagem
   fica mais vivo, e o preto do fundo vira brasa, sem tapar o desenho.
   O mesmo acontece quando o foco do teclado esta num link do cartao: efeito
   que so existe para o mouse deixa de fora quem navega por tecla. */
.sv-caixa__icone::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 55%,
    color-mix(in srgb, var(--sv-quente) 55%, transparent) 0%,
    color-mix(in srgb, var(--sv-quente) 22%, transparent) 42%,
    transparent 72%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity .35s ease;
}
.sv-caixa__icone:hover,
.sv-caixa:has(a:focus-visible) .sv-caixa__icone {
  box-shadow:
    0 0 1.25rem color-mix(in srgb, var(--sv-quente) 45%, transparent),
    0 0 3rem color-mix(in srgb, var(--sv-quente) 22%, transparent);
}
.sv-caixa__icone:hover::after,
.sv-caixa:has(a:focus-visible) .sv-caixa__icone::after { opacity: 1; }
.sv-caixa__icone:hover img,
.sv-caixa:has(a:focus-visible) .sv-caixa__icone img { filter: brightness(1.18) saturate(1.12); }
/* Sem animacao para quem pediu menos movimento: a luz acende de uma vez. */
@media (prefers-reduced-motion: reduce) {
  .sv-caixa__icone,
  .sv-caixa__icone::after,
  .sv-caixa__icone img { transition: none; }
}
.sv-caixa__corpo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espaco-3);
}
.sv-caixa__acento { color: var(--sv-quente); }
.sv-caixa__titulo {
  margin: 0;
  color: var(--cor-texto);
  font-size: var(--fs-24);
  font-weight: var(--peso-forte);
  line-height: 1.2;
}
.sv-caixa__resumo {
  margin: 0;
  color: var(--cor-texto);
  font-size: var(--fs-15);
  line-height: 1.55;
}
.sv-caixa .sv-caixa__acao {
  /* Laranja cheio com o texto escuro, como na referencia; o `.botao--principal`
     terracota fica para o resto do site. */
  margin-top: auto;
  min-height: 2.75rem;
  padding: 0 var(--espaco-6);
  border-color: var(--sv-quente);
  background: var(--sv-quente);
  color: var(--cor-fundo);
  font-size: var(--fs-15);
  letter-spacing: 0;
  text-transform: none;
}
.sv-caixa .sv-caixa__acao:hover:not(:disabled),
.sv-caixa .sv-caixa__acao:focus-visible { background: color-mix(in srgb, var(--sv-quente) 84%, var(--cor-texto)); box-shadow: none; }
.sv-caixa__acao > span[aria-hidden] { font-size: 1.1em; }

/* "OUTROS SERVICOS" NO PRESENCIAL (referencia de Lucas, 25/09)
   ==========================================================================
   O titulo com o texto de apoio embaixo, a esquerda, e os cartoes pequenos ao
   lado. As barras saem e "servicos" e terracota. Sobrancelha, titulo, texto e
   cartoes viram itens de uma grade so (`display: contents` nos dois
   involucros do cabecalho). */
.pagina-servico--personal-presencial .sv-outros__acento { color: var(--sv-terracota); }
.pagina-servico--personal-presencial .sv-outros__riscos { display: none; }
.pagina-servico--personal-presencial .sv-outros > .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--espaco-12);
}
.pagina-servico--personal-presencial :is(.sv-outros__cabeca, .sv-outros__abre) { display: contents; }
.pagina-servico--personal-presencial .sv-outros__sobrancelha { grid-column: 1 / -1; margin-bottom: var(--espaco-3); }
.pagina-servico--personal-presencial .sv-outros__titulo { margin: 0; }
.pagina-servico--personal-presencial .sv-outros__texto {
  max-width: 26rem;
  margin: var(--espaco-3) 0 0;
  color: var(--cor-texto-suave);
  font-size: var(--fs-16);
  line-height: 1.6;
}
.pagina-servico--personal-presencial .sv-outros__grade {
  width: 100%;
  max-width: 74rem;
  margin: var(--espaco-8) auto 0;
  gap: var(--espaco-6);
}
/* Os cartoes sobem para o lado do titulo so a partir de 80rem: abaixo disso
   nao ha largura para os tres sem espremer o texto dos cartoes. A quarta
   linha e flexivel - e ela que absorve a altura dos cartoes, e o texto fica
   colado no titulo em vez de descer junto. */
@media (min-width: 80rem) {
  .pagina-servico--personal-presencial .sv-outros > .container {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
    column-gap: var(--espaco-8);
  }
  .pagina-servico--personal-presencial .sv-outros__sobrancelha { width: 64%; }
  .pagina-servico--personal-presencial .sv-outros__titulo { grid-column: 1; grid-row: 2; }
  .pagina-servico--personal-presencial .sv-outros__texto { grid-column: 1; grid-row: 3; }
  .pagina-servico--personal-presencial .sv-outros__grade {
    grid-column: 2;
    grid-row: 2 / span 3;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-self: start;
    max-width: none;
    margin: var(--espaco-2) 0 0;
    gap: var(--espaco-5);
  }
  .sv-mini { grid-template-columns: 3rem minmax(0, 1fr) auto; gap: var(--espaco-3); padding: var(--espaco-4); }
  .sv-mini__seta { width: 2.5rem; height: 2.5rem; }
  .sv-mini__titulo { font-size: var(--fs-16); }
  .sv-mini__resumo { font-size: var(--fs-14); }
}

/* O cartao pequeno (`_servico_caixa_pequena.html`): o quadro, o nome, uma
   frase e a seta redonda. A seta estende a area dela por cima do cartao
   inteiro (`::after`), entao o cartao todo e o link. */
.sv-mini {
  position: relative;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--espaco-6);
  padding: var(--espaco-6);
  border: 1px solid color-mix(in srgb, var(--sv-quente) 35%, transparent);
  border-radius: var(--raio-lg);
  background: color-mix(in srgb, var(--cor-fundo) 72%, transparent);
  backdrop-filter: blur(10px);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.sv-mini__icone {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--raio-md);
  background: var(--cor-fundo);
}
.sv-mini__icone img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sv-mini__titulo {
  margin: 0 0 var(--espaco-2);
  color: var(--cor-texto);
  font-size: var(--fs-18);
  font-weight: var(--peso-forte);
  line-height: 1.25;
}
.sv-mini__resumo {
  margin: 0;
  color: var(--cor-texto-suave);
  font-size: var(--fs-15);
  line-height: 1.55;
}
.sv-mini__seta {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid color-mix(in srgb, var(--sv-quente) 55%, transparent);
  border-radius: 50%;
  color: var(--sv-quente);
  transition: background-color .2s ease, border-color .2s ease;
}
.sv-mini__seta svg { width: 1.1rem; height: 1.1rem; }
.sv-mini__seta::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--raio-lg);
}
.sv-mini:hover,
.sv-mini:has(.sv-mini__seta:focus-visible) {
  border-color: var(--sv-quente);
  box-shadow: 0 0 2rem color-mix(in srgb, var(--sv-quente) 14%, transparent);
}
.sv-mini:hover .sv-mini__seta,
.sv-mini__seta:focus-visible {
  border-color: var(--sv-quente);
  background: color-mix(in srgb, var(--sv-quente) 14%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .sv-mini,
  .sv-mini__seta { transition: none; }
}

/* "VAMOS CONVERSAR" E O FECHO
   ========================================================================== */
.sv-conversa,
.sv-fecho {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--cor-fundo);
  border-top: 1px solid var(--sv-fio);
  /* Uma respiracao de fundo liso entre "Outros servicos" e a faixa, e a faixa
     mais baixa: Lucas marcou os dois no LPF em 22/09. Quem recebe a respiracao
     e a PRIMEIRA faixa: no presencial e o fecho, e o cartao vem colado nele. */
  margin-top: clamp(var(--espaco-10), 5vw, var(--espaco-16));
}
.sv-fecho + .sv-conversa { margin-top: 0; }
.sv-conversa::before,
.sv-conversa::after,
.sv-fecho::before,
.sv-fecho::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.sv-conversa::before,
.sv-fecho::before {
  z-index: -2;
  background: var(--sv-foto, none) var(--sv-foto-posicao, 50% 50%) / cover no-repeat;
}
/* A posicao, o filtro e o veu com 28% da forca do LPF vieram da bancada de
   ajuste (Lucas, 23/09). */
.sv-conversa--lpf {
  --sv-foto: url("../img/servicos/lpf-pe.a1c09e5549b2.webp");
  --sv-foto-posicao: 38% 23%;
  /* A foto do fim do LPF comeca no topo da propria secao. Lucas testou sobe-la
     para dentro da faixa preta que separa as duas secoes (39 px, depois a
     faixa inteira) e voltou a 0 na bancada, 23/09; um degrade de emenda nessa
     faixa tambem foi tentado e saiu ("ficou feio"). Ela desce 1 px no pe da
     pagina (o `bottom` dos dois pseudo-elementos, abaixo), para nao sobrar fio,
     e por isso a secao deixa o conteudo transbordar. O fio claro de cima segue
     fora, como Lucas aprovou a pagina. */
  overflow: visible;
  border-top: 0;
}
.sv-conversa--lpf::before { filter: brightness(1.13) contrast(.97) saturate(.85); }
.sv-conversa--lpf::after { opacity: .28; }
.sv-conversa--lpf::before,
.sv-conversa--lpf::after { bottom: -.063rem; }
.sv-fecho { --sv-foto: url("../img/servicos/presencial-pe.d4fc44af62e5.webp"); --sv-foto-posicao: 50% 50%; }
.sv-conversa::after {
  z-index: -1;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--sv-veu) 88%, transparent) 0%,
      color-mix(in srgb, var(--sv-veu) 74%, transparent) 40%,
      color-mix(in srgb, var(--sv-veu) 62%, transparent) 100%),
    radial-gradient(50% 120% at 100% 50%,
      color-mix(in srgb, var(--sv-quente) 12%, transparent), transparent 70%);
}
.sv-fecho::after {
  z-index: -1;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--sv-veu) 96%, transparent) 0%,
      color-mix(in srgb, var(--sv-veu) 90%, transparent) 40%,
      color-mix(in srgb, var(--sv-veu) 34%, transparent) 60%,
      color-mix(in srgb, var(--sv-veu) 78%, transparent) 84%,
      color-mix(in srgb, var(--sv-veu) 82%, transparent) 100%);
}
/* O FIM DO PRESENCIAL: TRES BLOCOS SOBRE UMA FOTO SO (de 1024 px para cima)
   ==========================================================================
   Desde 25/09 (referencia de Lucas) "Outros servicos", a faixa "Disciplina
   tambem e liberdade" e o "Vamos conversar" sao um bloco so, sobre uma foto so
   do halter. Os tres continuam separados no HTML. Quem ganha a foto e o
   <main>: ele vira uma grade de uma coluna e dois pseudo-elementos ocupam da
   linha de "Outros servicos" ate o fim - a foto e o veu. Assim a foto cobre
   exatamente os tres, sem depender da altura de cada um.

   Historia: de 22/09 a 25/09 a foto era fundo do <body>, ancorada no pe da
   pagina, e cobria so a faixa e o cartao; "Outros servicos" tinha a lava.

   O TAMANHO NAO E `cover`. A foto e 3:1 e o bloco e quase quadrado, entao
   `cover` esticava pela altura e dava 1,5x de zoom na tela de Lucas ("ficou
   com mt zoom", e depois "deixa com menos zoom"). A altura fica em cerca de
   3/4 da que ele escolheu na bancada em 23/09, ancorada embaixo e a 71% na
   horizontal; em cima a foto se apaga no carvao, atras dos cartoes. O piso de
   34vw mantem a foto pelo menos da largura da tela: em 1920 o clamp sozinho
   deixaria uma borda sem foto do lado esquerdo.

   Abaixo de 64rem cada bloco segue com o fundo proprio (a lava e a foto da
   faixa), como era: numa coluna so, uma foto atras de tudo seria um recorte
   estreito e alto de uma imagem larga. */
@media (min-width: 64rem) {
  .pagina-servico--personal-presencial .pagina-servico__corpo {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
  }
  .pagina-servico--personal-presencial .pagina-servico__corpo::before,
  .pagina-servico--personal-presencial .pagina-servico__corpo::after {
    content: "";
    grid-column: 1;
    grid-row: 2 / -1;
    pointer-events: none;
  }
  /* A foto e o degrade que apaga o comeco dela: duas camadas com o mesmo
     tamanho e a mesma ancora. */
  .pagina-servico--personal-presencial .pagina-servico__corpo::before {
    --sv-foto-fim: max(clamp(32rem, 24rem + 14vw, 40rem), 34vw);
    z-index: -2;
    background-image:
      linear-gradient(180deg,
        var(--cor-fundo) 0%,
        color-mix(in srgb, var(--cor-fundo) 55%, transparent) 14%,
        transparent 32%),
      url("../img/servicos/presencial-pe.d4fc44af62e5.webp");
    background-repeat: no-repeat;
    background-position: 71% 100%, 71% 100%;
    background-size: 100% var(--sv-foto-fim), auto var(--sv-foto-fim);
  }
  /* O veu: escuro em cima (titulo e cartoes) e a esquerda (a coluna de
     texto); a direita, embaixo, fica o halter. */
  .pagina-servico--personal-presencial .pagina-servico__corpo::after {
    z-index: -1;
    background:
      linear-gradient(180deg,
        var(--cor-fundo) 0%,
        color-mix(in srgb, var(--cor-fundo) 70%, transparent) 24%,
        transparent 48%),
      linear-gradient(90deg,
        color-mix(in srgb, var(--cor-fundo) 94%, transparent) 0%,
        color-mix(in srgb, var(--cor-fundo) 84%, transparent) 34%,
        color-mix(in srgb, var(--cor-fundo) 36%, transparent) 58%,
        color-mix(in srgb, var(--cor-fundo) 10%, transparent) 78%);
  }
  .pagina-servico--personal-presencial .sv-como { grid-column: 1; grid-row: 1; }
  .pagina-servico--personal-presencial .sv-outros { grid-column: 1; grid-row: 2; padding-block: var(--espaco-12) 0; }
  .pagina-servico--personal-presencial .sv-fecho { grid-column: 1; grid-row: 3; padding-top: clamp(var(--espaco-12), 7vw, var(--espaco-24)); }
  .pagina-servico--personal-presencial .sv-conversa { grid-column: 1; grid-row: 4; }

  /* Os tres ficam transparentes e sem fundo, veu ou fio proprio: e uma
     superficie so, e um fio no meio dela marcaria onde um bloco acaba. */
  .pagina-servico--personal-presencial :is(.sv-outros, .sv-fecho, .sv-conversa) {
    margin: 0;
    border-top: 0;
    background: none;
  }
  .pagina-servico--personal-presencial :is(.sv-outros, .sv-fecho, .sv-conversa)::before,
  .pagina-servico--personal-presencial :is(.sv-outros, .sv-fecho, .sv-conversa)::after { display: none; }

  .pagina-servico--personal-presencial .sv-fecho__interno { padding-block: 0; }
  .pagina-servico--personal-presencial .sv-conversa__interno {
    padding-block: clamp(var(--espaco-10), 4vw, var(--espaco-12)) clamp(var(--espaco-12), 6vw, var(--espaco-20));
  }
}

.sv-conversa__interno { padding-block: clamp(var(--espaco-8), 3.5vw, var(--espaco-10)); }
/* A grade e um wrapper proprio, e nao o container: na consultoria ela vira o
   cartao com moldura, e o container tem de continuar sendo so a calha. */
.sv-conversa__grade {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) auto minmax(0, .8fr);
  align-items: center;
  gap: clamp(var(--espaco-6), 3vw, var(--espaco-12));
}
/* No presencial o convite fica em cima dos botoes, tudo a esquerda
   (referencia de Lucas, 25/09). */
.sv-conversa--personal-presencial .sv-conversa__grade {
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  gap: var(--espaco-8);
}
.sv-conversa__texto {
  padding-left: var(--espaco-5);
  border-left: 2px solid var(--sv-fio-marca);
  color: var(--cor-texto);
  font-size: var(--fs-16);
  line-height: 1.55;
}
.sv-conversa__texto p { margin: 0; }
.sv-conversa__titulo {
  margin: 0 0 var(--espaco-3);
  color: var(--cor-texto);
  font-size: clamp(var(--fs-30), 3.2vw, var(--fs-48));
  font-weight: var(--peso-forte);
  font-stretch: var(--largura-titulo);
  line-height: 1.05;
}
.sv-conversa__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-4);
}
.sv-conversa__acoes .botao { min-height: 3.25rem; padding-inline: var(--espaco-8); }
.sv-conversa__palavras { justify-self: end; color: var(--sv-ambar); }
.sv-conversa__palavras--fio { position: relative; padding-bottom: var(--espaco-4); }
.sv-conversa__palavras--fio::after,
.sv-fecho__frase::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2.75rem;
  height: 2px;
  background: var(--sv-ambar);
}
/* A manuscrita do presencial, logo abaixo da frase da faixa de fecho, em duas
   linhas (referencia de Lucas, 25/09). `letter-spacing: normal`: tracking
   positivo separaria as letras e desfaria as ligacoes, que sao o motivo da
   fonte. Reta e alinhada a esquerda.

   A largura e em `em` para quebrar no mesmo lugar em qualquer tamanho de
   letra: "Mulheres mais fortes" / "vivem mais livres".

   De 23/09 a 25/09 ela morou no canto superior direito da faixa, na posicao
   que Lucas escolheu arrastando a frase. */
.sv-fecho__escrita {
  max-width: 9em;
  margin: var(--espaco-6) 0 0;
  color: var(--sv-ambar);
  font-family: "Yellowtail", cursive;
  font-size: clamp(1.75rem, 2.4vw, 2.25rem);
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.15;
  text-align: left;
}
.sv-fecho__interno {
  /* A frase e a escrita, empilhadas a partir do topo. A coluna de palavras a
     direita saiu em 23/09/2026; a altura minima que centralizava a frase
     saiu em 25/09, quando a faixa virou parte de um bloco so. */
  display: grid;
  align-content: start;
  padding-block: clamp(var(--espaco-10), 5vw, var(--espaco-16));
}
.sv-fecho__frase {
  position: relative;
  width: fit-content;
  max-width: 14ch;
  margin: 0;
  padding-bottom: var(--espaco-5);
  color: var(--cor-texto);
  font-size: clamp(var(--fs-24), 3.4vw, var(--fs-48));
  font-weight: var(--peso-semi);
  letter-spacing: .1em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* REFLUXO
   ========================================================================== */
@media (min-width: 64rem) {
  .sv-duas { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.15fr) auto; }
  /* O fio da marca e terracota, como os das duas colunas (Lucas, 23/09);
     antes era o fio claro neutro. */
  .sv-marca { display: block; grid-column: auto; align-self: center; padding-left: var(--espaco-8); border-left: 1px solid var(--sv-fio-marca); }
}
@media (max-width: 80rem) {
  .sv-passos { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--espaco-8); }
  .sv-passo:nth-child(4) { padding-left: 0; border-left: 0; }
}
@media (max-width: 64rem) {
  .sv-heroi__interno,
  .sv-heroi--personal-presencial .sv-heroi__interno {
    grid-template-columns: minmax(0, 1fr);
    align-content: end;
  }
  .sv-heroi__frase,
  .sv-heroi__coluna { display: none; }
  /* As frases voltam no celular, sobre a faixa da foto (Lucas, 28/09, no iPhone:
     "as frases escritas ali"). Em larguras intermediarias, a frase fica a
     esquerda da cabeca dela e a coluna rente a borda direita. A faixa tem lampada acesa
     atras das duas, e o veu radial do desktop nao basta aqui: a elipse nao cobre
     o comeco e o fim das linhas (1,0:1 a 1,5:1 medido em 320/360/390). O fundo
     escuro vai ate a borda da caixa e a sombra da mesma cor o esfuma para fora:
     le-se como sombra da foto, sem aresta de cartao. */
  .sv-heroi--personal-presencial :is(.sv-heroi__frase, .sv-heroi__coluna),
  .sv-heroi--consultoria-online .sv-heroi__coluna {
    display: block;
    position: absolute;
    z-index: 1;
    top: var(--espaco-4);
    padding-block: var(--espaco-2);
    font-size: clamp(var(--fs-12), 2.8vw, var(--fs-14));
    letter-spacing: .22em;
    line-height: 1.9;
    background: color-mix(in srgb, var(--sv-veu) 78%, transparent);
    box-shadow: 0 0 var(--espaco-5) var(--espaco-3) color-mix(in srgb, var(--sv-veu) 78%, transparent);
  }
  .sv-heroi--personal-presencial .sv-heroi__frase { left: var(--espaco-4); }
  .sv-heroi--personal-presencial .sv-heroi__coluna { right: var(--espaco-4); }
  .sv-heroi--consultoria-online .sv-heroi__coluna { top: 0; right: 0; }
  /* No celular a foto vira uma FAIXA no alto, e o texto senta em fundo solido
     logo abaixo. Texto sobre a foto inteira nao fechava: em 360 o titulo caia
     a 1,4:1 sobre o rosto dela. A faixa apaga por degrade dentro de si mesma;
     o veu geral some. */
  .sv-heroi::before {
    inset: 0 0 auto;
    height: var(--sv-faixa);
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--sv-veu) 35%, transparent) 0%,
        transparent 22%,
        transparent 46%,
        var(--sv-veu) 88%),
      var(--sv-foto, none) var(--sv-foto-posicao-celular, 50% 20%) / cover no-repeat;
  }
  .sv-heroi::after { background: none; }
  /* `--sv-faixa` mora no `.sv-heroi`, e nao no `.sv-heroi__interno`: o
     `::before` e filho do heroi e nao enxerga o que um irmao declara. Na
     primeira versao a faixa ficou com altura zero e o topo do celular saiu
     preto, sem foto. */
  .sv-heroi { --sv-faixa: min(68vw, 26rem); }
  .sv-heroi--lpf {
    --sv-faixa: min(62vw, 24rem);
    --sv-foto-posicao-celular: 82% 0; /* preserva a escrita gravada dentro da faixa em 360–1024 */
  }
  .sv-heroi__interno,
  .sv-heroi--lpf .sv-heroi__interno {
    min-height: 0;
    padding-top: calc(var(--sv-faixa) - 2.75rem);
  }
  .sv-heroi--personal-presencial { --sv-foto-posicao-celular: 62% 12%; }
  .sv-heroi--consultoria-online { --sv-foto-posicao-celular: 62% 30%; }
  .sv-duas { grid-template-columns: minmax(0, 1fr); }
  .sv-conversa__grade { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .sv-conversa__palavras { justify-self: start; rotate: none; text-align: left; }
}
@media (max-width: 30rem) {
  /* Na faixa estreita a coluna a direita cobria o rosto. As duas frases ficam
     empilhadas a esquerda da foto; o texto principal comeca depois delas. */
  .sv-heroi--personal-presencial .sv-heroi__coluna {
    top: 6.75rem;
    right: auto;
    left: var(--espaco-4);
  }
  .sv-heroi--personal-presencial :is(.sv-heroi__frase, .sv-heroi__coluna) {
    box-shadow: 0 0 var(--espaco-3) var(--espaco-1) color-mix(in srgb, var(--sv-veu) 78%, transparent);
  }
  .sv-heroi--personal-presencial .sv-heroi__interno {
    padding-top: var(--sv-faixa);
  }
  /* O icone e a seta dividem a primeira linha; titulo e resumo usam toda a
     largura do cartao em vez de quebrar palavras na coluna espremida. */
  .pagina-servico--personal-presencial .sv-mini {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--espaco-3);
    padding: var(--espaco-4);
  }
  .pagina-servico--personal-presencial .sv-mini__icone {
    grid-column: 1;
    grid-row: 1;
    width: 3.5rem;
  }
  .pagina-servico--personal-presencial .sv-mini__texto { display: contents; }
  .pagina-servico--personal-presencial .sv-mini__titulo {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0;
  }
  .pagina-servico--personal-presencial .sv-mini__resumo {
    grid-column: 1 / -1;
    grid-row: 3;
  }
  .pagina-servico--personal-presencial .sv-mini__seta {
    grid-column: 2;
    grid-row: 1;
    width: 2.5rem;
    height: 2.5rem;
  }
}
@media (max-width: 21rem) {
  /* Em 320px, a primeira frase termina antes do cabelo/rosto da foto. */
  .sv-heroi--personal-presencial .sv-heroi__frase {
    padding-left: var(--espaco-2);
    letter-spacing: .12em;
  }
}
@media (max-width: 48rem) {
  /* A faixa de fecho no celular: o veu horizontal do desktop deixa o meio da
     foto aberto, e ali mora o brilho da anilha - a frase media 2,04:1 em 360.
     Numa coluna so o texto atravessa a faixa inteira, entao o veu tambem. */
  .sv-fecho::after {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--sv-veu) 88%, transparent) 0%,
      color-mix(in srgb, var(--sv-veu) 78%, transparent) 55%,
      color-mix(in srgb, var(--sv-veu) 86%, transparent) 100%);
  }
  .sv-passos { grid-template-columns: minmax(0, 1fr); row-gap: var(--espaco-6); }
  .sv-passo { padding: var(--espaco-5) 0 0; border-left: 0; border-top: 1px solid var(--sv-fio); }
  .sv-passo:first-child { padding-top: 0; border-top: 0; }
  .sv-selos { gap: var(--espaco-5); }
}
@media (max-width: 36rem) {
  .sv-caixa { grid-template-columns: minmax(0, 1fr); }
  .sv-caixa__icone { width: 7rem; }
  .sv-caixa .sv-caixa__acao { width: 100%; justify-content: space-between; }
  .sv-outros__cabeca { grid-template-columns: minmax(0, 1fr); gap: var(--espaco-4); }
  .sv-outros__riscos { display: none; }
  .sv-conversa__acoes { width: 100%; }
  .sv-conversa__acoes .botao { width: 100%; }
}

/* LPF: os servicos e o convite dividem a foto enviada para o novo fecho. */
.pagina-servico--lpf .sv-lpf-final {
  isolation: isolate;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--cor-fundo) 94%, transparent) 0%,
      color-mix(in srgb, var(--cor-fundo) 86%, transparent) 31%,
      color-mix(in srgb, var(--cor-fundo) 45%, transparent) 58%,
      color-mix(in srgb, var(--cor-fundo) 16%, transparent) 100%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--cor-fundo) 22%, transparent),
      color-mix(in srgb, var(--cor-fundo) 58%, transparent)),
    url("../img/servicos/fundo-novo-lpf.828dbea5bef5.png") 62% 50% / cover no-repeat;
  background-color: var(--cor-fundo);
}
.pagina-servico--lpf .sv-lpf-final :is(.sv-outros, .sv-conversa) {
  margin: 0;
  border: 0;
  background: transparent;
}
.pagina-servico--lpf .sv-lpf-final :is(.sv-outros, .sv-conversa)::before,
.pagina-servico--lpf .sv-lpf-final :is(.sv-outros, .sv-conversa)::after { display: none; }
.pagina-servico--lpf .sv-lpf-final .sv-outros {
  padding-block: clamp(var(--espaco-8), 4vw, var(--espaco-12)) 0;
}
.pagina-servico--lpf .sv-lpf-final .sv-outros__cabeca {
  display: block;
  margin-bottom: var(--espaco-5);
}
.pagina-servico--lpf .sv-lpf-final .sv-outros__sobrancelha {
  width: min(100%, 22rem);
  color: var(--sv-ambar);
}
.pagina-servico--lpf .sv-lpf-final .sv-outros__sobrancelha::after {
  background: linear-gradient(90deg, var(--sv-terracota), transparent);
}
.pagina-servico--lpf .sv-lpf-final .sv-outros__acento { color: var(--sv-terracota); }
.pagina-servico--lpf .sv-lpf-final .sv-outros__grade {
  width: min(100%, 39rem);
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
.sv-lpf-opcao {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) 1.5rem;
  align-items: center;
  gap: var(--espaco-5);
  min-height: 4.5rem;
  padding-block: var(--espaco-3);
  border-bottom: 1px solid var(--sv-fio);
  color: var(--cor-texto);
  text-decoration: none;
  transition: color .2s ease, background-color .2s ease;
}
.sv-lpf-opcao:last-child { border-bottom: 0; }
.sv-lpf-opcao:hover,
.sv-lpf-opcao:focus-visible {
  color: var(--cor-texto);
  background: color-mix(in srgb, var(--sv-terracota) 10%, transparent);
}
.sv-lpf-opcao:focus-visible { outline: 2px solid var(--sv-terracota); outline-offset: 2px; }
.sv-lpf-opcao__icone,
.sv-lpf-opcao__seta { color: var(--sv-terracota); }
.sv-lpf-opcao__icone svg { display: block; width: 2.25rem; height: 2.25rem; }
.sv-lpf-opcao__texto { display: grid; gap: .15rem; min-width: 0; }
.sv-lpf-opcao__texto strong { font-size: var(--fs-16); line-height: 1.25; }
.sv-lpf-opcao__texto > span { color: var(--cor-texto-suave); font-size: var(--fs-14); line-height: 1.4; }
.sv-lpf-opcao__seta { width: 1.5rem; height: 1.5rem; transition: translate .2s ease; }
.sv-lpf-opcao:hover .sv-lpf-opcao__seta,
.sv-lpf-opcao:focus-visible .sv-lpf-opcao__seta { translate: .25rem 0; }

.pagina-servico--lpf .sv-lpf-final .sv-conversa__interno {
  padding-block: clamp(var(--espaco-8), 3.5vw, var(--espaco-12)) clamp(var(--espaco-10), 5vw, var(--espaco-16));
}
.pagina-servico--lpf .sv-lpf-final .sv-conversa__grade {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--espaco-8);
}
.pagina-servico--lpf .sv-lpf-final .sv-conversa__texto {
  max-width: 30rem;
  padding: 0;
  border: 0;
}
.pagina-servico--lpf .sv-lpf-final .sv-conversa__titulo {
  width: max-content;
  max-width: 100%;
  font-size: clamp(var(--fs-30), 3vw, var(--fs-48));
}
.pagina-servico--lpf .sv-lpf-final .sv-conversa__titulo::before {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  margin-bottom: var(--espaco-5);
  background: linear-gradient(90deg, var(--sv-terracota) 0 22%, transparent 100%);
}
.pagina-servico--lpf .sv-lpf-final .sv-conversa__acento { color: var(--sv-terracota); }
.pagina-servico--lpf .sv-lpf-final .sv-conversa__acoes { justify-content: end; }

@media (max-width: 70rem) {
  .pagina-servico--lpf .sv-lpf-final {
    background:
      linear-gradient(90deg,
        color-mix(in srgb, var(--cor-fundo) 96%, transparent) 0%,
        color-mix(in srgb, var(--cor-fundo) 86%, transparent) 55%,
        color-mix(in srgb, var(--cor-fundo) 60%, transparent) 100%),
      url("../img/servicos/fundo-novo-lpf.828dbea5bef5.png") 61% 50% / cover no-repeat;
    background-color: var(--cor-fundo);
  }
}
@media (min-width: 48rem) and (max-width: 70rem) {
  .pagina-servico--lpf .sv-lpf-final .sv-outros__grade { width: min(100%, 21.5rem); }
  .pagina-servico--lpf .sv-lpf-final .sv-conversa__grade { gap: var(--espaco-4); }
  .pagina-servico--lpf .sv-lpf-final .sv-conversa__acoes .botao {
    padding-inline: var(--espaco-4);
    font-size: var(--fs-12);
  }
}
@media (max-width: 47.999rem) {
  .pagina-servico--lpf .sv-lpf-final .sv-conversa__grade { grid-template-columns: minmax(0, 1fr); }
  .pagina-servico--lpf .sv-lpf-final .sv-conversa__acoes { justify-content: start; }
}
@media (max-width: 36rem) {
  .sv-lpf-opcao { grid-template-columns: 2.25rem minmax(0, 1fr) 1.25rem; gap: var(--espaco-3); }
  .sv-lpf-opcao__icone svg { width: 2rem; height: 2rem; }
  .sv-lpf-opcao__seta { width: 1.25rem; height: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sv-lpf-opcao, .sv-lpf-opcao__seta { transition: none; }
}

/* Consultoria: fechamento continuo sobre o fundo fornecido em 25/09/2026.
   As proporcoes de 75vw e 90.4% seguem o enquadramento da referencia. */
.sv-online-final {
  display: flex;
  flex-direction: column;
  min-height: clamp(58rem, 75vw, 82rem);
  background: var(--cor-fundo) url("../img/servicos/fundo-novo-consultoria-online.d71618dbdb4d.png") center bottom / cover no-repeat;
}
.sv-online-final .container {
  width: min(90.4%, 100rem);
  max-width: none;
  padding-inline: 0;
}
.sv-online-final :is(.sv-outros, .sv-conversa) {
  margin: 0;
  border: 0;
  background: none;
}
.sv-online-final :is(.sv-outros, .sv-conversa)::before,
.sv-online-final :is(.sv-outros, .sv-conversa)::after { display: none; }
.sv-online-final .sv-outros {
  padding-block: clamp(4rem, 7.6vw, 7.5rem) clamp(2.5rem, 3.6vw, 4rem);
}
.sv-online-final .sv-outros__cabeca {
  align-items: end;
  gap: var(--espaco-6);
  margin-bottom: var(--espaco-8);
}
.sv-online-final .sv-outros__sobrancelha {
  gap: var(--espaco-6);
  margin-bottom: var(--espaco-5);
  font-size: var(--fs-14);
  letter-spacing: .2em;
}
.sv-online-final .sv-outros__titulo {
  font-size: clamp(2.25rem, 4.05vw, 4.5rem);
  line-height: 1.05;
}
.sv-online-final .sv-outros__texto {
  padding-bottom: var(--espaco-2);
  font-size: clamp(1rem, 1.4vw, 1.375rem);
}
.sv-online-final .sv-outros__riscos {
  padding-bottom: var(--espaco-3);
  font-size: 3rem;
}
.sv-online-final .sv-outros__grade {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espaco-4);
}
.sv-online-final .sv-mini--horizontal {
  grid-template-columns: clamp(4.5rem, 8.3vw, 8.5rem) minmax(0, 1fr) auto;
  gap: clamp(1rem, 1.65vw, 1.75rem);
  min-height: clamp(12.5rem, 14vw, 15rem);
  padding: clamp(1.25rem, 1.8vw, 2rem) clamp(1.25rem, 2vw, 2rem) clamp(1.25rem, 1.8vw, 2rem) clamp(1.25rem, 2.6vw, 2.75rem);
  border-color: color-mix(in srgb, var(--sv-quente) 85%, transparent);
  border-radius: var(--raio-lg);
  background: color-mix(in srgb, var(--cor-fundo) 68%, transparent);
  backdrop-filter: none;
}
.sv-online-final .sv-mini__icone { border-radius: var(--raio-md); }
.sv-online-final .sv-mini__texto {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: clamp(1rem, 1.8vw, 1.75rem);
  border-right: 1px solid color-mix(in srgb, var(--sv-quente) 24%, transparent);
}
.sv-online-final .sv-mini__titulo {
  font-size: clamp(1.125rem, 1.85vw, 1.875rem);
  margin-bottom: var(--espaco-3);
  letter-spacing: -.025em;
}
.sv-online-final .sv-mini__resumo {
  color: var(--cor-texto);
  font-size: clamp(.9375rem, 1.18vw, 1.125rem);
  line-height: 1.5;
}
.sv-online-final .sv-mini__seta {
  width: clamp(2.75rem, 4.3vw, 4.25rem);
  height: clamp(2.75rem, 4.3vw, 4.25rem);
  border-color: var(--sv-quente);
  box-shadow: inset 0 0 1rem color-mix(in srgb, var(--sv-quente) 8%, transparent);
}
.sv-online-final .sv-mini__seta svg { width: 1.5rem; height: 1.5rem; }
.sv-online-final .sv-mini__seta:focus-visible::after {
  outline: 2px solid var(--sv-ambar);
  outline-offset: 4px;
}
.sv-online-final .sv-conversa {
  overflow: visible;
  border-top: 1px solid color-mix(in srgb, var(--sv-quente) 65%, transparent);
}
.sv-online-final .sv-conversa__interno { padding-block: clamp(3rem, 4.7vw, 5rem); }
.sv-online-final .sv-conversa__grade {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 2.22fr) minmax(0, .75fr);
  align-items: start;
  gap: clamp(1.5rem, 2.8vw, 3rem);
}
.sv-online-final .sv-conversa__texto {
  padding: 0;
  border: 0;
  font-size: clamp(1rem, 1.3vw, 1.5rem);
  line-height: 1.45;
}
.sv-online-final__descricao > span { display: block; }
.sv-online-final .sv-conversa__titulo {
  margin-bottom: clamp(1rem, 1.05vw, 1.5rem);
  font-size: clamp(2.25rem, 4vw, 4.75rem);
  letter-spacing: -.025em;
  line-height: .87;
}
.sv-online-final .sv-conversa__acento { display: block; color: var(--sv-quente); }
.sv-online-final .sv-conversa__acoes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espaco-4);
  padding-top: clamp(2rem, 3.1vw, 3.5rem);
}
.sv-online-final .sv-conversa__acoes .botao {
  min-height: clamp(3.25rem, 4.45vw, 5rem);
  padding: var(--espaco-3) var(--espaco-4);
  border-radius: var(--raio-md);
  font-size: clamp(.75rem, 1.1vw, 1.25rem);
  letter-spacing: .12em;
  line-height: 1.35;
  text-align: center;
}
.sv-online-final .sv-conversa__acoes .botao--principal {
  background: linear-gradient(110deg, var(--sv-terracota), var(--marca-hover));
  box-shadow: 0 .5rem 2rem color-mix(in srgb, var(--sv-terracota) 20%, transparent);
}
.sv-online-final .sv-conversa__acoes .botao--principal:hover { background: var(--marca-hover); }
.sv-online-final .sv-conversa__acoes .botao--secundario { border-color: var(--sv-quente); }
.sv-online-final .sv-conversa__acoes svg { flex-shrink: 0; width: 1.5rem; height: 1.5rem; }
.sv-online-final .sv-conversa__acoes .botao--principal svg { width: 2rem; height: 2rem; }
.sv-online-final__mensagem {
  align-self: stretch;
  padding-left: clamp(1.5rem, 3.1vw, 3rem);
  border-left: 1px solid color-mix(in srgb, var(--sv-quente) 75%, transparent);
}
.sv-online-final__proximo {
  margin: 0 0 clamp(1.5rem, 2.4vw, 2.75rem);
  font-size: clamp(1.125rem, 1.58vw, 1.75rem);
  letter-spacing: .12em;
  line-height: 1.35;
}
.sv-online-final .sv-conversa__palavras {
  justify-self: start;
  margin: 0;
  font-size: clamp(.75rem, .97vw, 1.1rem);
  letter-spacing: .3em;
  line-height: 1.65;
}
.sv-online-final .sv-conversa__palavras::before {
  content: "";
  display: block;
  width: 3.5rem;
  height: 3px;
  margin-bottom: var(--espaco-5);
  background: var(--sv-ambar);
}
.sv-online-final .sv-online-final__base {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--espaco-8);
  margin-top: auto;
  padding-block: clamp(7rem, 11vw, 12rem) var(--espaco-10);
  font-size: clamp(.625rem, .83vw, 1rem);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.sv-online-final__base p { margin: 0; text-align: right; line-height: 1.75; }
.sv-online-final__valores { display: flex; flex-wrap: wrap; gap: clamp(1.25rem, 2vw, 2rem); margin: 0; padding: 0; list-style: none; }
.sv-online-final__valores li { display: flex; gap: clamp(1.25rem, 2vw, 2rem); }
.sv-online-final__valores li:not(:last-child)::after { content: "//"; color: var(--sv-ambar); font-weight: var(--peso-forte); }
@media (max-width: 70rem) {
  .sv-online-final .sv-mini--horizontal { grid-template-columns: 5rem minmax(0, 1fr) auto; gap: var(--espaco-3); padding: var(--espaco-5); }
  .sv-online-final .sv-mini__texto { padding-right: var(--espaco-3); }
}
/* O desktop ampliado ainda tem 960–1120 CSS px: as tres colunas devem
   continuar juntas. O reflow so entra quando o conteudo deixa de caber. */
@media (min-width: 60rem) and (max-width: 70rem) {
  .sv-online-final .sv-conversa__texto { font-size: clamp(.875rem, 1.3vw, 1rem); }
  .sv-online-final .sv-conversa__acoes { gap: clamp(.5rem, 1.1vw, 1rem); }
  .sv-online-final .sv-conversa__acoes .botao { min-height: 3rem; padding-inline: clamp(.5rem, 1.1vw, 1rem); font-size: .75rem; letter-spacing: .08em; }
  .sv-online-final .sv-conversa__acoes svg { width: 1.25rem; height: 1.25rem; }
  .sv-online-final .sv-conversa__acoes .botao--principal svg { width: 1.5rem; height: 1.5rem; }
  .sv-online-final__mensagem { padding-left: clamp(1rem, 2.4vw, 1.75rem); }
  .sv-online-final__proximo { font-size: clamp(1rem, 1.58vw, 1.125rem); letter-spacing: .1em; }
  .sv-online-final .sv-conversa__palavras { font-size: .75rem; letter-spacing: .23em; }
}
@media (max-width: 59.999rem) {
  .sv-online-final__descricao > span { display: inline; }
  .sv-online-final .sv-conversa__palavras { font-size: var(--fs-14); }
  .sv-online-final .sv-online-final__base { font-size: var(--fs-12); }
  .sv-online-final .sv-conversa__grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
  .sv-online-final__mensagem { grid-column: 2; padding-left: var(--espaco-5); }
  .sv-online-final .sv-conversa__acoes { padding-top: 0; align-self: center; }
}
@media (max-width: 50rem) {
  .sv-online-final {
    min-height: 0;
    background-image: linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--cor-fundo) 65%, transparent) 75%), url("../img/servicos/fundo-novo-consultoria-online.d71618dbdb4d.png");
    background-size: auto 100%;
  }
  .sv-online-final .container { width: auto; margin-inline: var(--espaco-6); }
  .sv-online-final .sv-outros__cabeca { grid-template-columns: minmax(0, 1fr); gap: var(--espaco-5); }
  .sv-online-final .sv-outros__riscos { display: none; }
  .sv-online-final .sv-outros__grade { grid-template-columns: minmax(0, 1fr); }
  .sv-online-final .sv-mini--horizontal { min-height: 0; padding-block: var(--espaco-6); }
  .sv-online-final .sv-mini__titulo { font-size: var(--fs-20); }
  .sv-online-final .sv-conversa__grade { grid-template-columns: minmax(0, 1fr); gap: var(--espaco-8); }
  .sv-online-final .sv-conversa__texto { max-width: 28rem; }
  .sv-online-final .sv-conversa__titulo { font-size: var(--fs-48); line-height: .95; }
  .sv-online-final__mensagem { grid-column: auto; display: flex; align-items: start; gap: var(--espaco-8); }
  .sv-online-final__proximo { margin-bottom: 0; }
  .sv-online-final .sv-online-final__base { flex-direction: column; align-items: start; padding-top: 8rem; }
  .sv-online-final__base p { text-align: left; }
}
@media (max-width: 30rem) {
  .sv-online-final .sv-mini--horizontal { grid-template-columns: 3.5rem minmax(0, 1fr) 2.75rem; padding: var(--espaco-4); }
  .sv-online-final .sv-mini__texto { display: contents; }
  .sv-online-final .sv-mini__icone { grid-column: 1; grid-row: 1; }
  .sv-online-final .sv-mini__titulo { grid-column: 2; grid-row: 1; margin: 0; font-size: var(--fs-18); }
  .sv-online-final .sv-mini__resumo { grid-column: 1 / -1; grid-row: 2; }
  .sv-online-final .sv-mini__seta { grid-column: 3; grid-row: 1; }
  .sv-online-final .sv-conversa__acoes { grid-template-columns: minmax(0, 1fr); }
  .sv-online-final .sv-conversa__acoes .botao { font-size: var(--fs-14); }
  .sv-online-final__mensagem { flex-wrap: wrap; }
  .sv-online-final__valores { gap: var(--espaco-4); }
  .sv-online-final__valores li { gap: var(--espaco-4); }
}
@media (forced-colors: active) {
  .sv-online-final { background: Canvas; }
  .sv-online-final :is(.sv-mini__texto, .sv-conversa, .sv-online-final__mensagem) { border-color: CanvasText; }
}
@media print {
  .sv-online-final { min-height: 0; background: none; }
  .sv-online-final .sv-online-final__base { padding-top: var(--espaco-8); }
}

/* PREFERENCIAS E MODOS
   ========================================================================== */
@media (forced-colors: active) {
  .sv-heroi::before,
  .sv-heroi::after,
  .sv-outros::before,
  .sv-outros::after,
  .sv-conversa::before,
  .sv-conversa::after,
  .sv-fecho::before,
  .sv-fecho::after,
  .sv-heroi,
  .sv-como,
  .sv-conversa,
  .sv-fecho,
  .sv-caixa,
  .sv-mini,
  .sv-passo,
  .sv-duas__coluna,
  .sv-conversa__texto { border-color: CanvasText; }
  .sv-conversa__palavras--fio::after,
  .sv-fecho__frase::after { background: CanvasText; }
}
@media print {
  .sv-heroi::before,
  .sv-heroi::after,
  .sv-outros::before,
  .sv-outros::after,
  .sv-conversa::before,
  .sv-conversa::after,
  .pagina-servico__corpo::before,
  .pagina-servico__corpo::after,
  .sv-fecho { display: none; }
  .sv-heroi__interno { min-height: 0; }
}