/* =========================================================================
   Case de sucesso — pagina de detalhe (Hoogli)
   -------------------------------------------------------------------------
   Mesma paleta e tipografia de public/assets/css/service.css: os tokens sao
   declarados no root .cs exatamente como .svc os declara, para que as duas
   paginas sejam reconhecivelmente a mesma familia visual. Os recursos visuais
   sao adaptados de la, um por um:

     .svc--seo .svc-hero      -> wash diagonal atras do hero
     .svc-stats               -> faixa mint que quebra o branco (aqui, os KPIs)
     .svc--seo .svc-stats     -> filetes verticais de 1px entre os numeros
     .svc-journey__badge      -> ordinal 01/02/03 via counter(), fora do markup
     .svc-duo__item           -> filete + chip de icone
     .svc-chip / .svc__eyebrow-> pill azul do eyebrow
     .svc--seo .svc-cta--band -> banda de gradiente escuro com glow radial
     .svc-expert              -> gradiente azul->verde

   Regra do arquivo: ZERO animacao. Nenhum @keyframes, nenhuma transicao
   disparada por scroll, nenhum estado que dependa de JS. As unicas transicoes
   permitidas sao hover/focus em links e botoes, que sao interacao direta do
   usuario.

   Tudo esta prefixado .cs- e escopado dentro de .cs. O markup legado do
   Elementor (dentro de .cs-legacy) nao tem nenhuma classe .cs-*, portanto
   nenhuma regra deste arquivo o alcanca; ver o bloco no fim do arquivo.
   ========================================================================= */

.cs {
  --ink: #000000;
  --body: rgba(0, 0, 0, 0.7);
  --soft: rgba(0, 0, 0, 0.45);
  --paper: #ffffff;
  --paper-2: #f7f7fa;
  --mint: #e1eae0;
  --green: #6ed587;
  /* Verde da marca escurecido para uso como texto (AA sobre branco e sobre a
     faixa verde-clara). Mesmo valor de service.css. */
  --green-ink: #1a6b33;
  /* Azul do novo design (.svc--v2 em service.css). */
  --blue: #3490f3;
  --blue-dark: #2e7fd6;
  --blue-50: #e8f0fe;
  --line: rgba(0, 0, 0, 0.12);
  --hair: rgba(0, 0, 0, 0.09);

  --shadow: 0 18px 44px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 32px 70px rgba(0, 0, 0, 0.13);
  --radius: 16px;
  --radius-lg: 20px;

  --font: 'Poppins', sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --gut: clamp(20px, 5vw, 72px);
  --maxw: 1180px;

  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  overflow-x: clip;
}

.cs__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
}

/* color: inherit e obrigatorio — o tema fixa cor em h1..h3 e em p, o que
   ganharia da heranca das faixas de fundo. */
.cs h1,
.cs h2,
.cs h3 {
  font-family: var(--font);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0;
  color: inherit;
  text-wrap: balance;
}

.cs h1 { letter-spacing: -0.035em; }
.cs h3 { letter-spacing: -0.02em; line-height: 1.25; }

.cs p,
.cs li,
.cs blockquote,
.cs figcaption {
  margin: 0;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.5;
  color: inherit;
}

.cs ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cs figure { margin: 0; }

.cs img {
  display: block;
  max-width: 100%;
}

.cs__eyebrow {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green-ink);
}

.cs :focus-visible {
  outline: 3px solid var(--green-ink);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ------------------------------------------------------- faixas (surfaces) */

/* Ritmo vertical: cada secao e uma faixa full-bleed com sua propria superficie,
   como o alternar --paper / --paper-2 / --mint das secoes de service.css. O
   padding vive na faixa, nao em margens que colapsam — assim uma secao ausente
   (galeria, depoimento) nao deixa buraco nem cola duas faixas iguais. */
/* Ritmo do Gencyo (pt-120 pb-120): 120px de respiro no desktop, escalando para
   baixo no mobile pelo clamp. Antes era 96px de teto, e a pagina lida ao lado
   da referencia parecia comprimida. */
.cs-band { padding-block: clamp(64px, 9vw, 120px); }
.cs-band--paper { background: var(--paper); }
.cs-band--paper-2 { background: var(--paper-2); }
.cs-band--mint { background: var(--mint); }

/* Filete quando duas faixas de superficie identica ficam vizinhas (acontece
   quando galeria/depoimento estao vazios). */
.cs-band--paper + .cs-band--paper,
.cs-band--paper-2 + .cs-band--paper-2 { border-top: 1px solid var(--hair); }

.cs-sec__head { max-width: 52rem; margin-bottom: clamp(28px, 3.8vw, 44px); }
.cs-sec__head h2 { font-size: clamp(1.625rem, 1.3rem + 1.7vw, 2.75rem); margin-top: 14px; max-width: 24ch; }
.cs-sec__head p { margin-top: 16px; color: var(--body); max-width: 58ch; }

/* ------------------------------------------------------------------ chips */

.cs-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 15px;
  border-radius: 9999px;
  background: var(--blue-50);
  color: var(--blue);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Tags do hero: sao os servicos do case, entao levam o mesmo tratamento de pill
   azul dos chips (antes eram pills brancas de contorno cinza, que desapareciam
   sobre o wash). */
.cs-tag {
  display: inline-flex;
  align-items: center;
  padding: 7px 15px;
  border: 1px solid rgba(52, 144, 243, 0.28);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--blue-dark);
  font-size: 0.8125rem;
  font-weight: 500;
}

/* ---------------------------------------------------------------- botoes */

/* Preto, como todos os botoes do site. */
.cs .cs-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  /* Hover/focus apenas — interacao direta, nao scroll. */
  transition: background 0.2s ease, color 0.2s ease;
}

.cs .cs-btn:hover { background: #1c1c1c; }

/* Variante para uso sobre a banda escura do CTA. */
.cs .cs-btn--light { background: #fff; color: #0f172a; }
.cs .cs-btn--light:hover { background: var(--green); color: #0a2e14; }

/* ------------------------------------------------------------------ hero */

/* Faixa escura full-bleed com a foto do cliente atras do texto, no lugar do
   side-by-side anterior. Esta e a UNICA superficie escura da pagina.

   Escala tipografica do Gencyo (h1 64px / line-height 64px, ratio 1.0) adaptada
   ao clamp do site; padding-top generoso no lugar dos 220px de la.

   Sem foto: gradiente escuro montado com os mesmos valores da banda do CTA
   final (--cs-dark / #1e3a5f / #14532d). Nenhuma cor de marca nova. */
.cs {
  /* Navy mais escuro da pagina, ja usado na banda do CTA. Promovido a token
     porque agora dois componentes dependem dele. */
  --cs-dark: #0f172a;
}

.cs-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(84px, 13vw, 190px) clamp(72px, 10vw, 132px);
  background: var(--cs-dark);
  background-image: linear-gradient(160deg, var(--cs-dark) 0%, #1e3a5f 52%, #14532d 100%);
  color: #fff;
  text-align: center;
}

/* Camada da foto. object-fit: cover + object-position: center = o mesmo
   enquadramento de background-size: cover / background-position: center, mas
   com o alt preservado (ver o comentario no template). */
.cs-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.cs-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Escurecimento. Um unico gradiente cobre os dois papeis pedidos: escuro no
   topo o suficiente para o texto (0.72) e mais fechado embaixo (0.94), o que
   tambem costura a faixa com a caixa branca da ficha logo abaixo.

   Contraste medido no pior caso possivel (regiao 100% branca da foto):
     - overlay 0.72 sobre #fff  -> #47555F aprox., L = 0.0916
     - texto #fff               -> 7.4:1   (AA e AAA)
     - lead rgba(#fff, 0.9)     -> 6.0:1   (AA)
   Sobre qualquer regiao mais escura da foto o contraste so aumenta. */
.cs-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(15, 23, 42, 0.72) 0%,
    rgba(15, 23, 42, 0.86) 58%,
    rgba(10, 15, 28, 0.94) 100%);
  pointer-events: none;
}

/* Sem foto o gradiente da faixa ja e escuro; o scrim viraria lama. */
.cs-hero:not(.cs-hero--photo) .cs-hero__scrim { display: none; }

.cs-hero__copy {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ------------------------------------------------------------- breadcrumb */

.cs-crumbs { margin-bottom: 24px; }

.cs-crumbs__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 10px;
  font-size: 0.8125rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.72);
}

.cs-crumbs__item { font-size: inherit; font-weight: inherit; }

/* Separador em CSS: e ornamento, nao conteudo lido. */
.cs-crumbs__item + .cs-crumbs__item::before {
  content: '\203A';
  margin-right: 10px;
  color: rgba(255, 255, 255, 0.45);
}

.cs-crumbs__item a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  transition: color 0.2s ease;
}

.cs-crumbs__item a:hover { color: var(--green); }
.cs-crumbs__item[aria-current] { color: rgba(255, 255, 255, 0.62); }

/* --------------------------------------------------------- hero: conteudo */

.cs-hero h1 {
  font-size: clamp(2.5rem, 1.4rem + 5vw, 4rem);
  font-weight: 800;
  line-height: 1.05;
  margin-block: 20px 22px;
  color: #fff;
  max-width: 26ch;
}

.cs-hero__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 26px;
}

/* Sobre o escuro a pill clara de .cs-tag desapareceria; aqui ela vira contorno
   branco translucido. */
.cs-hero .cs-tag {
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.cs-hero__lead {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 400;
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.125rem);
  line-height: 1.7;
  max-width: 60ch;
}

/* O outline verde escuro do default nao aparece sobre o navy. */
.cs-hero :focus-visible { outline-color: #fff; }

/* -------------------------------------------------------- ficha do case */

.cs-metaband {
  background: var(--paper);
  padding-block: clamp(28px, 4vw, 44px);
}

.cs-meta {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0;
  margin: 0;
  padding: clamp(24px, 3vw, 38px) clamp(22px, 3vw, 40px);
  border-radius: var(--radius-lg);
  background: var(--paper);
  border: 1px solid var(--hair);
  box-shadow: var(--shadow);
}

.cs-meta__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Mobile (uma coluna): filete horizontal, como nos KPIs. */
  padding-top: 16px;
  border-top: 1px solid var(--hair);
}

.cs-meta__item:first-child { padding-top: 0; border-top: 0; }

.cs-meta__label {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--soft);
}

.cs-meta__value {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
}

.cs-meta__value--tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cs-meta__tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--blue-50);
  color: var(--blue-dark);
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* A partir de 640px: duas colunas com filete vertical. Este e o estado real de
   hoje (Cliente + Servicos) — duas metades de mesma largura, nao um item solto
   esticado. */
@media (min-width: 640px) {
  .cs-meta__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: clamp(22px, 2.8vw, 30px);
  }

  .cs-meta__item {
    padding-top: 0;
    border-top: 0;
    padding-inline: clamp(16px, 2.4vw, 30px);
    border-left: 1px solid var(--hair);
  }

  .cs-meta__item:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
}

/* Com 3 ou 4 slots preenchidos a linha abre inteira em tela larga, e o filete
   volta em todos menos no primeiro. Com 2 slots nada disso casa e a regra de
   duas colunas acima continua valendo. */
@media (min-width: 960px) {
  .cs-meta__grid:has(.cs-meta__item:nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cs-meta__grid:has(.cs-meta__item:nth-child(4):last-child) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .cs-meta__grid:has(.cs-meta__item:nth-child(3):last-child) .cs-meta__item,
  .cs-meta__grid:has(.cs-meta__item:nth-child(4):last-child) .cs-meta__item {
    border-left: 1px solid var(--hair);
    padding-left: clamp(16px, 2.4vw, 30px);
  }

  .cs-meta__grid:has(.cs-meta__item:nth-child(3):last-child) .cs-meta__item:first-child,
  .cs-meta__grid:has(.cs-meta__item:nth-child(4):last-child) .cs-meta__item:first-child {
    border-left: 0;
    padding-left: 0;
  }
}

/* Encavalamento leve na borda do hero, so onde ha altura para isso. */
@media (min-width: 900px) {
  .cs-metaband { padding-top: 0; }
  .cs-meta { margin-top: -56px; }
}

/* ------------------------------------------------------------- faixa KPI */

/* O momento chamativo da pagina: numeros grandes sobre a faixa mint (mesmo
   papel de .svc-stats), com filetes de 1px entre os itens. */
.cs-kpis {
  background: var(--mint);
  padding-block: clamp(52px, 7.5vw, 100px);
}

/* As contagens de KPI variam por entrada (3, 4 e 6 nas entradas reais), e a
   grade tem de parecer deliberada em todas. Por isso as colunas sao explicitas
   por breakpoint (nao auto-fit, que deixaria uma orfa esticada) e o caso de 4
   itens ganha 4 colunas em tela larga via :has(), abaixo:

     3 itens -> 1 / 2+1 / 3            (3 colunas: linha unica)
     4 itens -> 1 / 2x2 / 2x2 / 4      (nunca 3+1)
     6 itens -> 1 / 2x3 / 3x2          (linhas cheias)
*/
.cs-kpis__grid {
  display: grid;
  gap: clamp(24px, 3vw, 34px);
}

.cs-kpis__item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Mobile (uma coluna): o filete e horizontal. */
  padding-top: 22px;
  border-top: 1px solid rgba(0, 0, 0, 0.16);
}

/* A partir de 620px os filetes viram verticais, como em
   .svc--seo .svc-stats__grid > div. O primeiro item de cada linha nao leva
   filete — por isso as colunas precisam ser um numero conhecido. */
@media (min-width: 620px) {
  .cs-kpis__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0;
    row-gap: clamp(28px, 3.4vw, 42px);
  }

  .cs-kpis__item {
    border-top: 0;
    padding-top: 0;
    padding-inline: clamp(18px, 2.6vw, 34px);
    border-left: 1px solid rgba(0, 0, 0, 0.16);
  }

  .cs-kpis__item:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
}

@media (min-width: 900px) {
  .cs-kpis__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Reabre o filete que a regra de 2 colunas havia removido... */
  .cs-kpis__item:nth-child(2n + 1) {
    border-left: 1px solid rgba(0, 0, 0, 0.16);
    padding-left: clamp(18px, 2.6vw, 34px);
  }

  /* ...e remove no primeiro de cada linha de tres. */
  .cs-kpis__item:nth-child(3n + 1) { border-left: 0; padding-left: 0; }
}

/* Exatamente 4 KPIs em tela larga: uma linha de quatro em vez de 3+1. */
@media (min-width: 1040px) {
  .cs-kpis__grid:has(.cs-kpis__item:nth-child(4):last-child) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .cs-kpis__grid:has(.cs-kpis__item:nth-child(4):last-child) .cs-kpis__item:nth-child(3n + 1) {
    border-left: 1px solid rgba(0, 0, 0, 0.16);
    padding-left: clamp(18px, 2.6vw, 34px);
  }

  .cs-kpis__grid:has(.cs-kpis__item:nth-child(4):last-child) .cs-kpis__item:first-child {
    border-left: 0;
    padding-left: 0;
  }
}

.cs-kpis__value {
  font-weight: 800;
  font-size: clamp(2.5rem, 1.6rem + 3.8vw, 4rem);
  line-height: 0.95;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  /* Numeros longos como "482,71%" nao podem estourar a celula. */
  overflow-wrap: break-word;
}

.cs-kpis__label {
  color: var(--body);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.45;
  max-width: 26ch;
}

/* --------------------------------------------------------------- estrategia */

/* Split 5/7 do Gencyo (col-lg-5 / col-lg-7): titulo grande na coluna estreita,
   prosa e checklist na larga. Empilha no mobile com o titulo primeiro — que ja e
   a ordem do markup, portanto sem nenhum "order" para desfazer. */
.cs-strategy__row {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
}

/* Gencyo usa 40px/500/lh 60px no titulo dessa coluna; aqui na escala do site. */
.cs-strategy__head h2 {
  font-size: clamp(1.625rem, 1.15rem + 2.1vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  margin-top: 14px;
  max-width: 20ch;
}

.cs-strategy__lead {
  color: var(--body);
  font-weight: 400;
  font-size: clamp(1rem, 0.96rem + 0.3vw, 1.0625rem);
  line-height: 1.7;
  max-width: 62ch;
  margin-bottom: clamp(24px, 3vw, 34px);
}

@media (min-width: 960px) {
  .cs-strategy__row {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }
}

.cs-checklist {
  display: grid;
  gap: 14px;
}

/* Duas colunas so quando a coluna de 7/12 tem largura real para isso — abaixo
   disso os cards ficariam estreitos demais e o rotulo quebraria em cada palavra. */
@media (min-width: 1120px) {
  .cs-checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
}

/* Filete + chip de icone, no espirito de .svc-duo__item: menos moldura, mais
   hierarquia. */
.cs-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow);
  color: var(--ink);
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.45;
}

.cs-checklist__ico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--mint);
  color: var(--green-ink);
}

.cs-checklist__ico svg { display: block; }

/* ------------------------------------------------------------- resultados */

/* Aqui nasce o counter dos ordinais. */
.cs-results__list {
  counter-reset: csresult;
  display: grid;
  gap: clamp(30px, 4.5vw, 56px);
}

.cs-result {
  counter-increment: csresult;
  display: grid;
  gap: clamp(16px, 2.4vw, 28px);
  align-items: start;
  padding: clamp(22px, 3vw, 34px);
  border-radius: var(--radius-lg);
  background: var(--paper);
  border: 1px solid var(--hair);
  box-shadow: var(--shadow);
}

/* O rail e um elemento vazio no markup; o "01" sai daqui, exatamente como
   .svc--seo .svc-journey__badge::before faz com counter(step, ...). */
.cs-result__rail {
  display: flex;
  align-items: center;
  gap: 14px;
}

.cs-result__rail::before {
  content: counter(csresult, decimal-leading-zero);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 46px;
  padding-inline: 8px;
  border-radius: 12px;
  background: var(--blue-50);
  color: var(--blue-dark);
  font-family: var(--font);
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* Filete que continua a partir do badge, no mobile. */
.cs-result__rail::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--hair);
}

.cs-result__kicker {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green-ink);
  margin-bottom: 12px;
}

.cs-result h3 { font-size: clamp(1.25rem, 1.1rem + 0.9vw, 1.75rem); }

.cs-result__body {
  color: var(--body);
  font-weight: 400;
  line-height: 1.65;
  margin-top: 14px;
  max-width: 60ch;
}

/* O numero destacado precisa de peso tipografico ao lado da prosa: fica numa
   faixa propria, separada por filete. value e value_label sao independentes —
   uma entrada tem rotulo sem numero e outra tem bloco sem numero nenhum; nos
   dois casos o que sobra continua alinhado e proposital. */
.cs-result__stat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  margin-top: clamp(22px, 3vw, 30px);
  padding-top: clamp(18px, 2.4vw, 24px);
  border-top: 1px solid var(--hair);
}

.cs-result__value {
  font-weight: 800;
  font-size: clamp(2.25rem, 1.7rem + 2.4vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  color: var(--blue);
  overflow-wrap: break-word;
}

.cs-result__value-label {
  color: var(--body);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.4;
  max-width: 32ch;
}

/* Sem numero: o rotulo sozinho vira um label discreto, nao um orfao. */
.cs-result__stat > .cs-result__value-label:only-child {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--soft);
  max-width: 40ch;
}

.cs-result__media {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--paper-2);
}

.cs-result__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (min-width: 900px) {
  /* Sem imagem (caso de todas as entradas hoje): rail vira coluna estreita a
     esquerda e o texto ocupa o resto. */
  .cs-result {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: clamp(20px, 3vw, 40px);
    padding: clamp(28px, 3.4vw, 44px);
  }

  /* No desktop o filete do rail passa a ser vertical, descendo ao lado do
     numero — mesma leitura de "trilha" do journey da pagina de servicos. */
  .cs-result__rail {
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    gap: 16px;
  }

  .cs-result__rail::after { width: 1px; height: auto; }

  /* Com imagem: tres colunas, e as linhas pares invertem copy/media. O rail
     permanece sempre na primeira coluna. */
  .cs-result--media { grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1fr); }
  .cs-result--media .cs-result__rail { order: 1; }
  .cs-result--media .cs-result__copy { order: 2; }
  .cs-result--media .cs-result__media { order: 3; }

  .cs-result--media:nth-child(even) .cs-result__media { order: 2; }
  .cs-result--media:nth-child(even) .cs-result__copy { order: 3; }
}

/* ---------------------------------------------------------------- galeria */

/* Grade proposital em vez de celulas uniformes: a primeira foto ocupa duas
   colunas e duas linhas. Fotos reais do cliente: sem filtro, sem overlay. */
.cs-gallery__grid {
  display: grid;
  gap: clamp(12px, 1.8vw, 20px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
}

.cs-gallery__cell {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper-2);
  border: 1px solid var(--hair);
}

.cs-gallery__cell img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.cs-gallery__cell figcaption {
  padding: 14px 16px;
  color: var(--soft);
  font-size: 0.8125rem;
  line-height: 1.4;
}

/* O destaque so entra quando ha largura para duas colunas — no mobile todas as
   celulas ficam iguais e empilhadas, sem overflow. */
@media (min-width: 760px) {
  .cs-gallery__grid { grid-auto-rows: 1fr; }

  .cs-gallery__cell:first-child {
    grid-column: span 2;
    grid-row: span 2;
  }

  .cs-gallery__cell:first-child img { aspect-ratio: auto; min-height: 260px; }
}

/* ------------------------------------------------------------- depoimento */

.cs-quote {
  position: relative;
  max-width: 62rem;
  margin-inline: auto;
  padding: clamp(28px, 4vw, 52px) clamp(24px, 3.5vw, 48px);
  border-radius: var(--radius-lg);
  background: var(--paper);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-left: 3px solid var(--green);
  box-shadow: var(--shadow);
}

/* Aspa decorativa grande. aria-hidden no markup: e ornamento, nao conteudo. */
.cs-quote__mark {
  position: absolute;
  top: clamp(-6px, 0.5vw, 6px);
  left: clamp(14px, 2vw, 28px);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(5rem, 3rem + 8vw, 9rem);
  line-height: 1;
  color: var(--mint);
  pointer-events: none;
  user-select: none;
}

.cs-quote blockquote {
  position: relative;
  font-weight: 500;
  font-size: clamp(1.1875rem, 1.05rem + 0.9vw, 1.625rem);
  line-height: 1.45;
  letter-spacing: -0.02em;
}

.cs-quote figcaption {
  position: relative;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--hair);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  font-size: 0.875rem;
}

.cs-quote__author { font-weight: 600; }

.cs-quote__meta {
  color: var(--soft);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* -------------------------------------------------------------- CTA final */

/* Banda de gradiente escuro com glow radial, adaptada de
   .svc--seo .svc-cta--band. O CTA antigo era um retangulo mint plano; este
   fecha a pagina. */
.cs-cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: clamp(34px, 5vw, 64px);
  background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 45%, #14532d 100%);
  color: #fff;
  display: grid;
  gap: 28px;
  align-items: center;
}

.cs-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 50%, rgba(52, 144, 243, 0.18) 0%, transparent 60%),
    radial-gradient(circle at 80% 50%, rgba(110, 213, 135, 0.14) 0%, transparent 60%);
  pointer-events: none;
}

.cs-cta > * { position: relative; z-index: 1; }

.cs-cta__eyebrow { color: var(--green); }

.cs-cta h2 {
  font-size: clamp(1.625rem, 1.3rem + 1.5vw, 2.5rem);
  color: #fff;
  max-width: 22ch;
  margin-top: 14px;
}

.cs-cta p {
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 400;
  max-width: 46ch;
}

/* O outline padrao (verde escuro) desapareceria sobre o navy. */
.cs-cta :focus-visible { outline-color: #fff; }

@media (min-width: 860px) {
  .cs-cta { grid-template-columns: minmax(0, 1.4fr) auto; }
}

/* -------------------------------------------------- navegacao entre cases */

.cs-more__grid {
  display: grid;
  gap: clamp(16px, 2.4vw, 26px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.cs-more__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--hair);
  box-shadow: var(--shadow);
  color: var(--ink);
  text-decoration: none;
  /* Hover apenas. Sem transform, sem animacao. */
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cs-more__link:hover {
  border-color: rgba(52, 144, 243, 0.4);
  box-shadow: var(--shadow-lg);
}

.cs-more__media {
  display: block;
  background: var(--paper-2);
}

.cs-more__media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.cs-more__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
  padding: clamp(20px, 2.4vw, 26px);
}

.cs-more__name {
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.cs-more__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cs-more__tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--blue-50);
  color: var(--blue-dark);
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cs-more__cue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
  color: var(--blue-dark);
  font-size: 0.8125rem;
  font-weight: 600;
}

.cs-more__cue svg { flex: 0 0 auto; }

/* =========================================================================
   Conteudo legado
   -------------------------------------------------------------------------
   .cs-legacy embrulha o HTML original da entrada (Elementor exportado). O
   objetivo aqui e nao fazer nada: nenhuma regra nova pode vazar para dentro,
   e o markup legado nao pode empurrar nada para fora.

   Como o isolamento funciona: todas as regras acima usam classes .cs-* ou
   seletores de elemento escopados em .cs (h1..h3, p, li, ul, img, figure).
   Sao esses ultimos que poderiam alcancar o legado — por isso os blocos
   abaixo devolvem os elementos do legado ao comportamento do tema.
   ========================================================================= */

.cs-legacy {
  display: block;
  /* Cancela a heranca de tipografia/cor do root .cs. */
  font-family: inherit;
  color: initial;
}

/* Reverte os resets de elemento aplicados em .cs para o que o markup do
   Elementor espera (ele traz o proprio CSS, do kit do tema). */
.cs .cs-legacy h1,
.cs .cs-legacy h2,
.cs .cs-legacy h3 {
  font-weight: revert;
  line-height: revert;
  letter-spacing: revert;
  margin: revert;
  text-wrap: revert;
}

.cs .cs-legacy p,
.cs .cs-legacy li,
.cs .cs-legacy blockquote,
.cs .cs-legacy figcaption {
  margin: revert;
  font-weight: revert;
  font-size: revert;
  line-height: revert;
}

.cs .cs-legacy ul {
  margin: revert;
  padding: revert;
  list-style: revert;
}

.cs .cs-legacy figure { margin: revert; }

.cs .cs-legacy img {
  display: revert;
  max-width: revert;
}

/* ------------------------------------------- texto de ranqueamento (guia)

   O texto sai inteiro no HTML. O recolhimento e um clamp de altura em CSS,
   nao display:none nem hidden: o conteudo continua renderizado, dentro do
   layout e no DOM. A classe .is-collapsed vem do JS, entao o estado padrao
   do documento e "aberto" — sem JS ninguem perde o conteudo. */
.cs-guide {
  background: var(--paper-2);
  padding-block: clamp(52px, 7vw, 92px);
}

.cs-guide__body {
  max-width: 70ch;
  margin-inline: auto;
}

.cs-guide__wrap { position: relative; }

.cs-guide__wrap.is-collapsed {
  /* Mostra a abertura e o primeiro subtitulo — teaser suficiente para o
     leitor decidir se quer o texto inteiro. */
  max-height: 32em;
  overflow: hidden;
}

/* Esfumacado no corte, para o texto nao parecer cortado a faca. */
.cs-guide__wrap.is-collapsed::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 8em;
  background: linear-gradient(to bottom, rgba(247, 247, 250, 0), var(--paper-2));
  pointer-events: none;
}

.cs-guide__actions {
  margin-top: 22px;
  max-width: 70ch;
  margin-inline: auto;
  text-align: center;
}

.cs .cs-guide__toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: none;
  color: var(--ink);
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.cs .cs-guide__toggle:hover { background: var(--ink); color: #fff; }
.cs .cs-guide__toggle svg { transition: transform 0.25s ease; }
.cs .cs-guide__toggle[aria-expanded='true'] svg { transform: rotate(180deg); }

/* Tipografia do corpo do guia: hierarquia clara para texto longo. */
.cs-guide__body h2 {
  font-size: clamp(1.3125rem, 1.15rem + 0.8vw, 1.625rem);
  margin: 40px 0 14px;
}
.cs-guide__body h3 { font-size: 1.0625rem; margin: 26px 0 10px; }
.cs-guide__body p { margin-bottom: 16px; color: var(--body); }
.cs-guide__body ul,
.cs-guide__body ol { margin: 0 0 18px 1.15em; color: var(--body); }
.cs-guide__body li { margin-bottom: 8px; }
.cs-guide__body a { color: var(--green-ink); }
.cs-guide__body blockquote {
  margin: 0 0 18px;
  padding-left: 18px;
  border-left: 3px solid var(--line);
  color: var(--body);
}
.cs-guide__body table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 18px;
  font-size: 0.9375rem;
}
.cs-guide__body th,
.cs-guide__body td {
  padding: 10px 12px;
  border: 1px solid var(--line);
  text-align: left;
}
.cs-guide__body th { background: var(--paper); font-weight: 600; }

/* Impressao: cores planas, sem sombras. */
@media print {
  .cs { background: #fff; }
  /* Impressao e leitura sem tela: o guia sai sempre inteiro. */
  .cs-guide__wrap.is-collapsed { max-height: none; overflow: visible; }
  .cs-guide__wrap.is-collapsed::after { display: none; }
  .cs-guide__actions { display: none; }
  /* O hero escuro nao pode virar uma mancha de tinta na folha. */
  .cs-hero { background: #fff; background-image: none; color: #000; }
  .cs-hero h1 { color: #000; }
  .cs-hero__bg,
  .cs-hero__scrim { display: none; }
  .cs-hero__lead { color: #000; }
  .cs-crumbs__list,
  .cs-crumbs__item a { color: #000; }
  .cs-hero .cs-tag { border-color: #999; background: none; color: #000; }
  .cs-meta,
  .cs-result,
  .cs-quote,
  .cs-more__link,
  .cs-checklist__item { box-shadow: none; }
  .cs-cta { background: #fff; color: #000; }
  .cs-cta h2 { color: #000; }
  .cs-cta::before { display: none; }
}