/* =========================================================
   PAGINA DE CASE INDIVIDUAL  (/cases/<slug>)
   Complementa critical.css + rest.css, nao substitui.
   Depende dos tokens :root definidos em critical.css.

   POR QUE NAO CARREGA O solucao.css
   O que esta pagina reusaria de la sao ~300 linhas (os cards
   numerados, a secao de CTA e o bloco .cta-form-*), e o
   arquivo tem 556 KB (82 KB gzip) e entra render-blocking.
   Numa LP que existe para converter trafego frio de orgao
   publico no 4G a troca nao fecha, entao o que e usado esta
   copiado aqui, com a origem anotada em cada bloco. E a mesma
   decisao do assets/css/links.css: pagina autonoma duplica de
   proposito, e o que transforma a duplicacao em cache e a
   anotacao mais o teste que compara os dois lados
   (tests/cases/test_case_css_compartilhado.py).
   Ao divergir, corrija ESTE arquivo para o valor do solucao.css,
   nunca o contrario.

   PALETA
   Mesma paleta unica das paginas de solucao: a cor de assinatura
   e o ciano, e a diferenciacao vem do conteudo. As secundarias do
   manual entram por papel semantico fixo, laranja = risco e
   esmeralda = resultado, e o tom sai do fundo da secao (os
   vividos reprovam contraste como texto).
   ========================================================= */

.case-page {
  /* Assinatura (espelha --bd-cyan* do solucao.css). */
  --case-cyan:         #06b6d4;
  --case-cyan-bright:  #22d3ee;
  --case-cyan-soft:    rgba(6, 182, 212, 0.12);
  --case-cyan-border:  rgba(6, 182, 212, 0.32);
  --case-ink:          #051536;
  --case-ink-2:        #0b1f4d;

  /* Secundarias com papel semantico. Origem: .sol-page no solucao.css. */
  --sol-laranja:          #FF7A00;
  --sol-laranja-mid:      #D96200;
  --sol-laranja-ink:      #B04E00;
  --sol-laranja-soft:     rgba(255, 122, 0, 0.12);
  --sol-laranja-border:   rgba(255, 122, 0, 0.35);
  --sol-esmeralda:        #00D26A;
  --sol-esmeralda-ink:    #0E8F53;
  --sol-esmeralda-deep:   #0A7A45;
  --sol-esmeralda-bright: #5FEBA4;
  --sol-esmeralda-soft:   rgba(0, 210, 106, 0.12);
  --sol-esmeralda-border: rgba(0, 210, 106, 0.35);

  /* Acento do mini form (origem: .cta-form-mini no solucao.css, onde cada
     .sol-page--<slug> sobrescreve com a propria --<slug>-cyan). */
  --cta-accent:        var(--case-cyan-bright);
  --cta-accent-bright: var(--case-cyan-bright);
  --cta-accent-glow:   rgba(6, 182, 212, 0.20);
}

/* Tipografia comum das secoes. Os tamanhos saem dos tokens --fs-* de
   critical.css: nenhum clamp escrito a mao nesta folha. */
.case-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--azul-profundo);
  margin: 0 0 20px;
}
.case-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--azul-profundo);
  margin: 0 0 12px;
}
.case-p {
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--texto-sec-escuro);
  margin: 0 0 16px;
}
.case-p:last-child { margin-bottom: 0; }
.case-p strong { color: var(--azul-profundo); font-weight: 600; }

.case-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--coral-text);
  margin: 0 0 18px;
}
/* Em secao escura o eyebrow troca de tom: --coral-text (#007a91) nao passa
   contraste sobre azul profundo. */
.case-sec--dark .case-eyebrow { color: var(--case-cyan-bright); }
.case-sec--dark .case-h2,
.case-sec--dark .case-h3 { color: #fff; }
.case-sec--dark .case-p { color: var(--texto-sec-claro); }
.case-sec--dark .case-p strong { color: #fff; }

.case-accent { color: var(--case-cyan-bright); }
/* Em fundo claro o ciano vivido nao passa como texto: usa o azul medio. */
.case-accent-dark { color: var(--azul-medio); }

.case-sec-head {
  max-width: 760px;
  margin: 0 auto 56px;
  text-align: center;
}
.case-sec-head .case-p { font-size: var(--fs-lead); }

/* =========================================================
   1. HERO
   Sem foto de propósito: nao existe imagem autorizada do
   cliente, e foto de acervo neste contexto seria lida como se
   fosse do orgao. O peso visual vem do gradiente, do glow de
   assinatura e da tipografia.
   ========================================================= */
.case-hero {
  position: relative;
  padding: 148px 0 88px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 55% at 78% 18%, rgba(6, 182, 212, 0.22) 0%, transparent 62%),
    radial-gradient(ellipse 60% 50% at 8% 92%, rgba(8, 86, 177, 0.30) 0%, transparent 60%),
    linear-gradient(165deg, var(--case-ink-2) 0%, var(--case-ink) 55%, #030d24 100%);
}
/* Conteudo CENTRADO, e nao coluna a esquerda como nos heros de solucao.
   Aqueles sao de duas colunas: texto a esquerda e foto ou mockup a direita.
   Aqui nao existe imagem autorizada do cliente (ver docs/pendencias), e uma
   coluna de texto a esquerda com a metade direita vazia se le como imagem que
   nao carregou. Centrado, o vazio vira respiro e acompanha o ritmo do resto
   da pagina, que e centrado em todas as secoes. */
.case-hero-inner {
  position: relative;
  z-index: 1;
  text-align: center;
}
.case-hero-inner .case-breadcrumb { justify-content: center; }

.case-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: var(--fs-meta);
  color: var(--texto-sec-claro);
  margin-bottom: 28px;
}
.case-breadcrumb a { color: var(--texto-sec-claro); }
.case-breadcrumb a:hover { color: #fff; text-decoration: underline; }
.case-breadcrumb span[aria-hidden] { opacity: 0.45; }
.case-breadcrumb [aria-current] { color: rgba(255, 255, 255, 0.92); }

.case-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px;
  margin-bottom: 24px;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--case-cyan-bright);
  background: var(--case-cyan-soft);
  border: 1px solid var(--case-cyan-border);
  border-radius: 999px;
}
.case-hero-tag-dot {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--case-cyan-bright);
  animation: case-pulse 2.4s ease-in-out infinite;
}
@keyframes case-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.82); }
}

/* --fs-h1 e nao --fs-article-title. Os dois existem em critical.css e a
   escolha nao e de gosto: --fs-article-title (ate 60px) e o titulo de POST
   do blog, usado so em blog.css, e --fs-h1 (ate 44px) e o hero, usado nos
   16 heros do site sem uma excecao. Um H1 de 60px aqui faria esta ser a
   unica pagina cujo hero foge da escala. */
.case-hero-h1 {
  max-width: 22ch;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0 auto 22px;
}
.case-hero-sub {
  max-width: 62ch;
  font-size: var(--fs-lead);
  line-height: 1.62;
  color: var(--texto-sec-claro);
  margin: 0 auto 34px;
}

.case-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.case-hero-nota {
  max-width: 54ch;
  margin: 18px auto 0;
  font-size: var(--fs-meta);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.62);
}

/* Botoes. .btn/.btn-primary/.btn-ghost vem de critical.css; aqui so o
   gradiente de assinatura e a variante grande. */
.case-btn--primary {
  background: linear-gradient(135deg, var(--case-cyan) 0%, var(--azul-medio) 100%);
  color: #fff;
  border: none;
  box-shadow: 0 6px 20px rgba(6, 182, 212, 0.28);
}
.case-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(6, 182, 212, 0.38);
  filter: brightness(1.06);
}
.case-btn--lg { padding: 18px 40px; font-size: 16px; }

/* Faixa de credibilidade. E texto e nao logo porque nenhum dos orgaos pode
   ser identificado (ver docs/pendencias): rotulo generico e o que esta
   autorizado, e ele nao promete o que a pagina nao pode mostrar. */
.case-credib {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.case-credib-label {
  display: block;
  margin-bottom: 16px;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.case-credib-lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.case-credib-lista li {
  padding: 9px 16px;
  font-family: var(--font-display);
  font-size: var(--fs-meta);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
}

/* =========================================================
   2. RECONHECIMENTO DO PROBLEMA
   Um dos dois blocos que convertem, entao leva o maior peso
   visual da pagina junto do case. Papel semantico: risco.
   ========================================================= */
.case-sintomas {
  padding: 104px 0;
  background:
    radial-gradient(ellipse 50% 40% at 50% 0%, var(--sol-laranja-soft) 0%, transparent 70%),
    var(--offwhite);
}
.case-sintomas .case-eyebrow { color: var(--sol-laranja-ink); }
.case-sintomas-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.case-sintoma {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 24px 26px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--azul-profundo);
  background: #fff;
  border: 1px solid var(--cinza-suave);
  border-left: 3px solid var(--sol-laranja);
  border-radius: 12px;
  transition: box-shadow 0.3s var(--ease-out-expo), transform 0.3s var(--ease-out-expo);
}
.case-sintoma:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.case-sintoma-marca {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 5px;
  border: 2px solid var(--sol-laranja-border);
  background: var(--sol-laranja-soft);
}
.case-sintomas-fecho {
  max-width: 760px;
  margin: 48px auto 0;
  padding: 28px 32px;
  text-align: center;
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--azul-profundo);
  background: #fff;
  border: 1px solid var(--sol-laranja-border);
  border-radius: 14px;
}
.case-sintomas-fecho strong {
  display: block;
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.3;
  color: var(--sol-laranja-ink);
}

/* =========================================================
   3. A VIRADA CONCEITUAL   (secao CLARA)
   4. COMO FUNCIONA         (secao CLARA)

   As duas nasceram escuras e ficaram claras a pedido: com o
   hero, elas e as duas ultimas, a pagina tinha 4 blocos de
   azul profundo e pesava. Hoje o azul fica so nas pontas, no
   hero e na conversao, e o meio da pagina respira.

   O QUE ISSO OBRIGA: o ciano de assinatura NAO PODE SER TEXTO
   aqui. Medido sobre branco, #06b6d4 da 2,43:1 e #22d3ee da
   1,81:1, ou seja reprovam WCAG 1.4.3 inclusive no limite de
   texto grande, que e 3:1. Em fundo claro ele sobrevive como
   BORDA e como fundo tenue, que nao sao texto, e quem carrega
   o acento passa a ser o --azul-medio (7,06:1). Mesma regra
   que o solucao.css escreve como "o tom sai do fundo da
   secao": os vividos reprovam contraste como texto.

   O painel do diagrama continua ESCURO de proposito. E a
   convencao da casa para mockup (o .sol-panel e um gradiente
   azul dentro da .sol-overview, que e offwhite), e manter o
   contraste invertido ali separa "desenho de produto" de
   "conteudo da pagina".
   ========================================================= */
/* NAO AUMENTE A OPACIDADE DESTE TINTE. O ponto mais tingido do gradiente
   e rgb(230, 248, 251), e ali o eyebrow em --coral-text mede 4,57:1 contra
   o minimo de 4,5 de WCAG 1.4.3 para texto miudo: a margem e de 0,07, e o
   eyebrow tem 11px. Subir de 0,10 reprova a secao. Se precisar de mais cor,
   escureca o texto primeiro. */
.case-virada {
  padding: 104px 0;
  background:
    radial-gradient(ellipse 60% 50% at 85% 12%, rgba(6, 182, 212, 0.10) 0%, transparent 62%),
    var(--branco-puro);
}
.case-virada-corpo {
  max-width: 820px;
  margin: 0 auto;
}
.case-virada-tempos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 40px 0;
}
.case-tempo {
  padding: 28px;
  background: var(--offwhite);
  border: 1px solid var(--cinza-suave);
  border-radius: 16px;
}
.case-tempo-rotulo {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-sec-escuro);
}
/* O cartao do "hoje" ganha a borda de assinatura e o rotulo em azul medio:
   e o unico jeito de marcar qual dos dois tempos e o bom sem usar o ciano
   como texto, que reprova aqui. */
.case-tempo--depois {
  border-color: var(--case-cyan-border);
  background: var(--case-cyan-soft);
}
.case-tempo--depois .case-tempo-rotulo { color: var(--azul-medio); }
.case-tempo p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--texto-sec-escuro);
}
.case-virada-fecho {
  padding: 26px 30px;
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--azul-profundo);
  background: var(--case-cyan-soft);
  border: 1px solid var(--case-cyan-border);
  border-radius: 14px;
}
.case-virada-fecho strong { color: var(--azul-medio); font-weight: 700; }

.case-como {
  padding: 104px 0;
  background: var(--offwhite);
}
.case-como-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.case-como-card {
  padding: 32px;
  background: var(--branco-puro);
  border: 1px solid var(--cinza-suave);
  border-radius: 16px;
  transition: box-shadow 0.3s var(--ease-out-expo), border-color 0.3s var(--ease-out-expo), transform 0.3s var(--ease-out-expo);
}
.case-como-card:hover {
  border-color: var(--case-cyan-border);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}
/* Sem opacity: ela mistura a cor com o fundo e derruba o contraste medido.
   O numeral e 28px/700, entao mesmo no limite de texto grande precisa de 3:1,
   e o ciano nao chega la em fundo claro. */
.case-como-num {
  display: block;
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  color: var(--azul-medio);
}
.case-como-card h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--azul-profundo);
}
.case-como-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--texto-sec-escuro);
}

/* Diagrama do fluxo. SVG inline no HTML; aqui so a moldura. */
.case-fluxo {
  max-width: 900px;
  margin: 56px auto 0;
  padding: 30px 28px 24px;
  background: linear-gradient(135deg, var(--azul-medio) 0%, var(--case-ink) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  box-shadow: var(--shadow-xl);
}
.case-fluxo-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 16px;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.case-fluxo-titulo {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}
/* Rotulo de mockup: a regra da casa e "Demonstracao", nunca "ao vivo". */
.case-fluxo-selo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--case-cyan-bright);
  background: var(--case-cyan-soft);
  border: 1px solid var(--case-cyan-border);
  border-radius: 999px;
}
.case-fluxo-svg { width: 100%; height: auto; display: block; }
.case-fluxo-legenda {
  margin: 18px 0 0;
  font-size: var(--fs-meta);
  line-height: 1.55;
  text-align: center;
  color: rgba(255, 255, 255, 0.62);
}

/* =========================================================
   5. CASE PRINCIPAL
   O outro bloco que converte. Maior peso visual da pagina.
   Papel semantico: resultado (esmeralda).
   ========================================================= */
.case-destaque {
  padding: 112px 0;
  background: var(--branco-puro);
}
.case-destaque-head {
  max-width: 900px;
  margin: 0 auto 48px;
  text-align: center;
}
.case-destaque-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--azul-profundo);
  margin: 0;
}
.case-destaque-corpo {
  max-width: 820px;
  margin: 0 auto;
}

/* Snapshot. <table> de verdade: sao pares rotulo/valor com cabecalho de
   linha, e o leitor de tela precisa do vinculo. */
/* border-collapse: separate e NAO collapse, e sem overflow: hidden. Com
   collapse o border-radius da tabela nao arredonda a caixa das celulas, e o
   overflow: hidden que se usa para forcar isso CORTA A <caption>: media, o
   "R" de "Resumo do projeto" saia com a haste esquerda comida, porque a
   caption fica na borda da tabela e o clip acontece no padding box. Com
   separate mais border-spacing 0 o raio vale, os divisores de linha vem do
   border-top das celulas e a caption fica intacta. */
.case-snapshot {
  width: 100%;
  margin: 0 auto 48px;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--cinza-suave);
  border-radius: 14px;
  font-size: 15px;
  text-align: left;
}
.case-snapshot tr:first-child th { border-top-left-radius: 13px; }
.case-snapshot tr:first-child td { border-top-right-radius: 13px; }
.case-snapshot tr:last-child th { border-bottom-left-radius: 13px; }
.case-snapshot tr:last-child td { border-bottom-right-radius: 13px; }
.case-snapshot caption {
  padding: 0 0 14px;
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--coral-text);
  text-align: left;
}
.case-snapshot th,
.case-snapshot td {
  padding: 18px 22px;
  line-height: 1.6;
  vertical-align: top;
  border-top: 1px solid var(--cinza-suave);
  overflow-wrap: break-word;
}
.case-snapshot tr:first-child th,
.case-snapshot tr:first-child td { border-top: none; }
.case-snapshot th {
  width: 34%;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--azul-profundo);
  background: var(--offwhite);
  white-space: nowrap;
}
.case-snapshot td { color: var(--texto-sec-escuro); background: #fff; }

.case-bloco { margin-bottom: 40px; }
.case-bloco:last-of-type { margin-bottom: 0; }
.case-bloco-rotulo {
  display: inline-block;
  margin-bottom: 14px;
  padding-bottom: 6px;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--azul-profundo);
  border-bottom: 2px solid var(--case-cyan);
}
.case-bloco--risco .case-bloco-rotulo { border-bottom-color: var(--sol-laranja); }
.case-bloco--ganho .case-bloco-rotulo { border-bottom-color: var(--sol-esmeralda); }

.case-resultado-lista {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}
.case-resultado-lista li {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 17px 22px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--azul-profundo);
  background: var(--sol-esmeralda-soft);
  border: 1px solid var(--sol-esmeralda-border);
  border-radius: 10px;
}
.case-resultado-lista svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--sol-esmeralda-deep);
}

/* Nota de anonimizacao. Nao e desculpa: sinaliza que existe cliente real e
   que a empresa respeita acordo, o que aumenta credibilidade. */
.case-nota-anon {
  margin: 44px 0 0;
  padding: 20px 24px;
  font-size: var(--fs-meta);
  font-style: italic;
  line-height: 1.6;
  color: var(--texto-sec-escuro);
  background: var(--offwhite);
  border-left: 3px solid var(--azul-medio);
  border-radius: 0 10px 10px 0;
}

.case-destaque-cta {
  margin: 44px 0 0;
  text-align: center;
}

/* =========================================================
   6. SEGUNDO CASO (piloto)
   Tom deliberadamente mais contido: nao e case, e prova de
   conceito em andamento, e a pagina nao pode sugerir o
   contrario.
   ========================================================= */
.case-piloto {
  padding: 96px 0;
  background: var(--offwhite);
}
.case-piloto-corpo {
  max-width: 820px;
  margin: 0 auto;
  padding: 40px 44px;
  background: #fff;
  border: 1px solid var(--cinza-suave);
  border-radius: 18px;
  box-shadow: var(--shadow-md);
}
.case-piloto-selo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  padding: 7px 15px;
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--azul-medio);
  background: rgba(8, 86, 177, 0.08);
  border: 1px dashed rgba(8, 86, 177, 0.42);
  border-radius: 999px;
}
.case-piloto-fecho {
  margin: 26px 0 0;
  padding: 22px 26px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--azul-profundo);
  background: var(--offwhite);
  border-radius: 12px;
}
.case-piloto-fecho strong { font-weight: 600; }

/* =========================================================
   7. OBJECOES
   <details>/<summary>: acessivel por teclado sem uma linha de
   JS, e o conteudo continua no DOM para a busca do navegador.
   ========================================================= */
.case-faq {
  padding: 104px 0;
  background: var(--branco-puro);
}
.case-faq-lista {
  max-width: 820px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
}
.case-faq-item {
  background: var(--offwhite);
  border: 1px solid var(--cinza-suave);
  border-radius: 12px;
  overflow: hidden;
}
.case-faq-item[open] { border-color: var(--case-cyan-border); background: #fff; }
.case-faq-item summary {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 26px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--azul-profundo);
  list-style: none;
}
.case-faq-item summary::-webkit-details-marker { display: none; }
.case-faq-item summary::after {
  content: "";
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  margin: 5px 0 0 auto;
  border-right: 2px solid var(--azul-medio);
  border-bottom: 2px solid var(--azul-medio);
  transform: rotate(45deg);
  transition: transform 0.25s var(--ease-out-expo);
}
.case-faq-item[open] summary::after { transform: rotate(-135deg); }
.case-faq-item summary:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: -4px;
}
.case-faq-resposta {
  padding: 0 26px 24px;
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--texto-sec-escuro);
}

/* =========================================================
   8. BLOCO SETORIAL
   ========================================================= */
.case-setorial {
  padding: 96px 0;
  background:
    radial-gradient(ellipse 60% 55% at 12% 20%, rgba(6, 182, 212, 0.20) 0%, transparent 60%),
    linear-gradient(140deg, var(--azul-medio) 0%, var(--azul-profundo) 100%);
}
.case-setorial-corpo {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}
.case-setorial-escala {
  margin: 32px 0;
  padding: 26px 30px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
}
.case-setorial-escala p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--texto-sec-claro); }
.case-setorial-escala strong {
  display: block;
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.3;
  color: var(--case-cyan-bright);
}
.case-setorial-cta { margin-top: 34px; }

/* =========================================================
   9. CONVERSAO FINAL
   Fundo escuro obrigatorio: o bloco .cta-form-* abaixo e
   desenhado para fundo escuro (texto branco, campo em azul
   profundo translucido).
   ========================================================= */
.case-conversao {
  padding: 104px 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, rgba(6, 182, 212, 0.18) 0%, transparent 65%),
    linear-gradient(175deg, var(--case-ink-2) 0%, var(--case-ink) 100%);
}
.case-conversao-head {
  max-width: 720px;
  margin: 0 auto 42px;
  text-align: center;
}
.case-conversao-agenda {
  max-width: 720px;
  margin: 0 auto 42px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 11px;
  text-align: left;
}
.case-conversao-agenda li {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 15px 20px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--texto-sec-claro);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 10px;
}
.case-conversao-agenda svg { flex-shrink: 0; margin-top: 3px; color: var(--case-cyan-bright); }
.case-conversao-rodape { text-align: center; }

/* =========================================================
   MINI CTA FORM
   COPIA de solucao.css (bloco "MINI CTA FORM"), porque esta
   pagina nao carrega aquele arquivo. Os nomes de classe sao
   CONTRATO com assets/js/cta-form.js, que seleciona
   form.cta-form-mini, .cta-form-field e .cta-form-consent:
   renomear aqui quebra a validacao e o envio.
   ========================================================= */
.cta-form-mini {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 760px;
  margin: 0 auto;
  padding: 32px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 18px;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  text-align: left;
  position: relative;
}
.cta-form-mini .cta-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.cta-form-mini .cta-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.cta-form-mini .cta-form-field label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.78);
  text-transform: none;
}
.cta-form-mini .cta-form-field input,
.cta-form-mini .cta-form-field select {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  font-family: var(--font-body);
  font-size: 14px;
  color: #fff;
  background: rgba(5, 21, 54, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  -webkit-appearance: none;
  appearance: none;
}
.cta-form-mini .cta-form-field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23ffffff' stroke-opacity='0.65' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}
.cta-form-mini .cta-form-field select option {
  color: #082764;
  background: #fff;
}
.cta-form-mini .cta-form-field input::placeholder {
  color: rgba(255, 255, 255, 0.42);
}
.cta-form-mini .cta-form-field input:hover,
.cta-form-mini .cta-form-field select:hover {
  border-color: rgba(255, 255, 255, 0.28);
}
.cta-form-mini .cta-form-field input:focus,
.cta-form-mini .cta-form-field select:focus {
  outline: none;
  border-color: var(--cta-accent);
  background: rgba(5, 21, 54, 0.85);
  box-shadow: 0 0 0 3px var(--cta-accent-glow);
}
.cta-form-mini .cta-form-field.invalid input,
.cta-form-mini .cta-form-field.invalid select {
  border-color: #f87171;
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.16);
}
/* Campo que ocupa a linha inteira. Existe porque este form tem 3 campos numa
   grade de 2 colunas: sem isso o terceiro fica com metade da largura e um
   buraco do lado, e a pergunta mais longa e justamente a ultima. */
.cta-form-mini .cta-form-field--wide { grid-column: 1 / -1; }

.cta-form-mini .cta-form-honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.cta-form-mini .cta-form-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}
.cta-form-mini .cta-form-consent input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 2px;
  width: 16px;
  height: 16px;
  accent-color: var(--cta-accent);
  cursor: pointer;
}
.cta-form-mini .cta-form-consent label {
  cursor: pointer;
  margin: 0;
}
.cta-form-mini .cta-form-consent a {
  color: var(--cta-accent-bright);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cta-form-mini .cta-form-consent a:hover {
  color: #fff;
}
.cta-form-mini .cta-form-consent.invalid {
  color: #fca5a5;
}
.cta-form-mini .cta-form-consent.invalid input[type="checkbox"] {
  outline: 2px solid #f87171;
  outline-offset: 2px;
}
.cta-form-mini .cta-form-recaptcha {
  display: flex;
  justify-content: center;
  min-height: 78px;
}
.cta-form-mini .cta-form-recaptcha:empty {
  min-height: 0;
}
.cta-form-mini .cta-form-submit {
  align-self: center;
  min-width: 280px;
  justify-content: center;
}
.cta-form-mini .cta-form-submit:disabled {
  opacity: 0.6;
  cursor: progress;
}
.cta-form-mini .cta-form-msg {
  margin: 0;
  min-height: 1.4em;
  font-size: 13px;
  text-align: center;
  font-weight: 500;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.cta-form-mini .cta-form-msg.show {
  opacity: 1;
}
.cta-form-mini .cta-form-msg--ok {
  color: #86efac;
}
.cta-form-mini .cta-form-msg--err {
  color: #fca5a5;
}
.cta-form-trust {
  margin: 22px auto 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.55);
}
.cta-form-trust svg {
  color: var(--cta-accent-bright, #33adff);
}

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width: 1024px) {
  .case-hero { padding: 124px 0 72px; }
  .case-hero-h1 { max-width: 24ch; }
  .case-como-grid { grid-template-columns: 1fr; }
  .cta-form-mini .cta-form-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .case-hero { padding: 108px 0 60px; }
  .case-sintomas,
  .case-virada,
  .case-como,
  .case-faq,
  .case-conversao { padding: 72px 0; }
  .case-destaque { padding: 76px 0; }
  .case-piloto,
  .case-setorial { padding: 68px 0; }

  .case-sintomas-grid { grid-template-columns: 1fr; }
  .case-virada-tempos { grid-template-columns: 1fr; }
  .case-hero-ctas > .btn { width: 100%; justify-content: center; }
  .case-piloto-corpo { padding: 28px 22px; }
  .case-sintomas-fecho { padding: 24px 22px; }
  .case-faq-item summary { padding: 18px 20px; font-size: 15px; }
  .case-faq-resposta { padding: 0 20px 20px; }

  /* A tabela vira lista: com 2 colunas em 360px o rotulo comprimia a ponto
     de "Organizacao" quebrar em duas linhas e o valor sobrar uma palavra
     por linha. Os <th> continuam sendo cabecalho de linha para o leitor. */
  .case-snapshot,
  .case-snapshot tbody,
  .case-snapshot tr { display: block; }
  /* A caption tambem precisa virar block: com a tabela em display:block, um
     filho display:table-caption ganha caixa de tabela anonima e ENCOLHE, e
     "Resumo do projeto" quebrava em tres linhas de uma palavra so.
     Em block a borda passa a envolver a caption, que vira o cabecalho do
     cartao: por isso o padding lateral, para o texto alinhar com as celulas
     em vez de encostar na borda. */
  .case-snapshot caption { display: block; padding: 16px 22px 12px; }
  .case-snapshot th,
  .case-snapshot td { display: block; width: auto; white-space: normal; }
  .case-snapshot th { border-top: 1px solid var(--cinza-suave); padding-bottom: 6px; }
  .case-snapshot td { padding-top: 0; border-top: none; }
  .case-snapshot tr:first-child th { border-top: none; }
}

@media (max-width: 640px) {
  .cta-form-mini { padding: 22px; gap: 14px; border-radius: 14px; }
  .cta-form-mini .cta-form-grid { grid-template-columns: 1fr; gap: 12px; }
  .cta-form-mini .cta-form-submit { width: 100%; min-width: 0; }
}

/* Quem pediu menos movimento nao perde conteudo: o estado final e sempre
   visivel, e so a transicao sai. Armadilha registrada no projeto: base com
   opacity 0 mais "animation: none" faz o elemento desaparecer de vez. */
@media (prefers-reduced-motion: reduce) {
  .case-hero-tag-dot { animation: none; opacity: 1; transform: none; }
  .case-sintoma,
  .case-como-card { transition: none; }
  .case-sintoma:hover,
  .case-como-card:hover { transform: none; }
  .case-btn--primary:hover { transform: none; }
  .case-faq-item summary::after { transition: none; }
}