/* VIBE AI — páginas de case (27/10/2026). Vem depois do home.css, que já traz a base da página
   (.pagina, .secao, .moldura, .numeros, rodapé, barra do celular e lightbox).
   Mesmo modelo para todos os cases: topo com a ficha do cliente, Antes, Como era e como ficou,
   O que foi montado, Onde ainda tem gente, O que roda hoje, Os números (faixa escura), telas,
   O que vem agora e o convite para o diagnóstico.
   Só tokens do design system, sempre por var(--...). */

/* Topo: título, resumo e a ficha do cliente */
.case-topo{padding:var(--hero-top) 0 var(--space-section-mobile);background:var(--gradient-waves),var(--surface-page)}
.case-topo__grade{display:grid;gap:var(--space-7);align-items:center}
.case-topo__grade > *{min-width:0}
.case-topo__texto{display:grid;gap:var(--space-5);justify-items:start}
.case-topo .vb-heading{gap:var(--space-4)}
.case-voltar{margin-bottom:var(--space-2)}
.case-ficha{display:grid;gap:var(--space-4);padding:var(--space-6);border-radius:var(--radius-xl);background:var(--surface-card);border:var(--border-thin) solid var(--border-subtle);box-shadow:var(--shadow-lg)}
.case-ficha__logo{width:var(--p-nucleo);height:var(--p-nucleo);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}
.case-ficha__nome{font-size:var(--fs-h4);line-height:var(--lh-h4);font-weight:var(--fw-extra)}
.case-ficha dl{display:grid;gap:var(--space-3);margin:0}
.case-ficha dl div{display:grid;gap:var(--space-0-5);padding-top:var(--space-3);border-top:var(--border-thin) solid var(--border-subtle)}
.case-ficha dt{font-size:var(--fs-micro);font-weight:var(--fw-bold);letter-spacing:var(--ls-overline);text-transform:uppercase;color:var(--role-overline-text)}
.case-ficha dd{margin:0;font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--role-text-2)}
@media (min-width:1024px){
  .case-topo{padding:var(--hero-top-lg) 0 var(--space-section)}
  .case-topo__grade{grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:var(--space-8)}
}

/* Lista com o primeiro trecho em negrito (o "case__dados" do modelo antigo) */
.case-lista{display:grid;gap:var(--space-3);max-width:var(--page-media)}
.case-lista li{display:grid;grid-template-columns:auto 1fr;gap:var(--space-3);align-items:start;font-size:var(--fs-body-lg);line-height:var(--lh-body-lg);color:var(--role-text-2)}
.case-lista li > .vb-icon{width:var(--icon-md);height:var(--icon-md);margin-top:var(--space-1);color:var(--role-accent)}
.case-lista strong{color:var(--role-text);font-weight:var(--fw-bold)}
.case-lista__desligado > .vb-icon{color:var(--role-text-3)}
.case-texto{display:grid;gap:var(--space-4);max-width:var(--page-media);font-size:var(--fs-body-lg);line-height:var(--lh-body-lg);color:var(--role-text-2)}
.case-texto strong{color:var(--role-text)}
.case-texto a{color:var(--role-link);text-decoration:underline;text-underline-offset:var(--space-1)}
.case-fonte{margin-top:var(--space-5);max-width:var(--page-media);font-size:var(--fs-caption);line-height:var(--lh-caption-lg);color:var(--role-text-2)}

/* Antes: os pontos da análise das conversas antigas */
.antes{display:grid;gap:var(--space-3-5)}
.antes .vb-feature__titulo{font-weight:var(--fw-semibold)}
@media (min-width:760px){.antes{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.antes{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Como era e como ficou: o caminho do cliente em passos (5 no modelo), cada um com os dois lados.
   Cada lado diz quem faz o passo, com o Badge status: --warning = Pessoa, --teal = Sistema.
   HTML: ol.era-ficou > li.era-ficou__passo > h3.era-ficou__nome (span.era-ficou__n + nome do passo)
   + div.era-ficou__lado--era + div.era-ficou__lado--ficou, cada lado com p.era-ficou__topo (rótulo e Badge) e o texto.
   Celular: um lado embaixo do outro. Tablet: lado a lado. Computador: o nome do passo, como era e como ficou na mesma linha. */
.era-ficou{display:grid;gap:var(--space-4)}
.era-ficou__passo{display:grid;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-lg);background:var(--role-card);border:var(--border-thin) solid var(--role-border-subtle);box-shadow:var(--role-shadow-card)}
.era-ficou__nome{display:flex;align-items:center;gap:var(--space-3);font-size:var(--fs-body-lg);line-height:var(--lh-body-lg);font-weight:var(--fw-extra);color:var(--role-text)}
.era-ficou__n{display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--tile-xs);height:var(--tile-xs);border-radius:50%;background:var(--role-tile-bg);border:var(--border-thin) solid var(--role-tile-border);color:var(--role-overline-text);font-size:var(--fs-body-sm);font-weight:var(--fw-extra)}
.era-ficou__lado{display:grid;align-content:start;gap:var(--space-2);padding:var(--space-4);border-radius:var(--radius-md);font-size:var(--fs-body-sm);line-height:var(--lh-body-sm)}
.era-ficou__lado--era{background:var(--role-surface-soft);border:var(--border-thin) dashed var(--role-border);color:var(--role-text-2)}
.era-ficou__lado--ficou{background:var(--role-card);border:var(--border-thin) solid var(--role-border-brand);color:var(--role-text)}
.era-ficou__topo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2)}
.era-ficou__rotulo{font-size:var(--fs-micro);font-weight:var(--fw-bold);letter-spacing:var(--ls-overline);text-transform:uppercase;color:var(--role-overline-text)}
@media (min-width:760px){.era-ficou__passo{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:var(--space-5)}.era-ficou__nome{grid-column:1 / -1}}
@media (min-width:1024px){.era-ficou__passo{grid-template-columns:minmax(0,2fr) minmax(0,3fr) minmax(0,3fr)}.era-ficou__nome{grid-column:auto;align-self:center}}

/* Onde ainda tem gente: os pontos em que uma pessoa decide, um FeatureItem (lg, card) por ponto,
   e embaixo uma nota com o número medido e o período. */
.gente{display:grid;gap:var(--space-3-5)}
.gente .vb-feature--lg{align-items:flex-start}
.gente .vb-feature__titulo{font-weight:var(--fw-bold)}
.gente__nota{margin-top:var(--space-5);max-width:var(--page-media);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--role-text-2)}
.gente__nota strong{color:var(--role-text)}
@media (min-width:760px){.gente{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (min-width:1024px){.gente{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* O que foi montado: um cartão por bloco */
.blocos{display:grid;gap:var(--space-4)}
.bloco{display:grid;align-content:start;gap:var(--space-3);padding:var(--space-6) var(--space-5);border-radius:var(--radius-lg);background:var(--surface-card);border:var(--border-thin) solid var(--border-subtle);box-shadow:var(--shadow-sm)}
.bloco h3{font-size:var(--fs-body-lg);line-height:var(--lh-body-lg);font-weight:var(--fw-extra)}
.bloco ul{display:grid;gap:var(--space-2-5)}
.bloco li{position:relative;padding-left:var(--space-5);font-size:var(--fs-body-sm);line-height:var(--lh-caption-lg);color:var(--role-text-2)}
.bloco li::before{content:"";position:absolute;left:var(--space-1);top:calc(var(--lh-caption-lg) / 2 - var(--dot) / 2);width:var(--dot);height:var(--dot);border-radius:50%;background:var(--gradient-primary)}
.bloco p{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--role-text-2)}
@media (min-width:760px){.blocos{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.blocos{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* com 4 blocos: 2 por linha e, na tela larga, os 4 numa linha só */
@media (min-width:1024px){.blocos:has(> :nth-child(4):last-child){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (min-width:1200px){.blocos:has(> :nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Conversa de exemplo, em balões */
.exemplo{display:grid;gap:var(--space-7);align-items:start}
.exemplo > *{min-width:0}
.exemplo__texto{display:grid;gap:var(--space-5)}
.exemplo__aviso{display:flex;gap:var(--space-2-5);align-items:flex-start;padding:var(--space-4);border-radius:var(--radius-md);background:var(--surface-card);border:var(--border-thin) dashed var(--border-default);font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--role-text-2)}
.exemplo__aviso .vb-icon{flex:none;width:var(--icon-md);height:var(--icon-md);color:var(--role-accent)}
.chat{width:100%;max-width:var(--text-max);margin:0 auto;border-radius:var(--radius-xl);background:var(--surface-card);border:var(--border-thin) solid var(--border-subtle);box-shadow:var(--shadow-lg);overflow:hidden}
.chat__topo{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3-5) var(--space-4-5);border-bottom:var(--border-thin) solid var(--border-subtle)}
.chat__topo img{width:var(--avatar);height:var(--avatar);border-radius:50%}
.chat__topo b{display:block;font-size:var(--fs-body-sm);font-weight:var(--fw-bold)}
.chat__topo small{font-size:var(--fs-caption);color:var(--role-success-text)}
.chat__corpo{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-4-5);background:var(--surface-soft)}
.chat__msg{max-width:85%;padding:var(--space-2-5) var(--space-3-5);border-radius:var(--radius-md);font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--text-primary);box-shadow:var(--shadow-sm)}
.chat__msg p + p{margin-top:var(--space-1-5)}
.chat__msg time{display:block;margin-top:var(--space-1);font-size:var(--fs-micro);color:var(--role-text-2)}
.chat__msg--cliente{align-self:flex-start;background:var(--surface-card);border-top-left-radius:var(--radius-xs)}
.chat__msg--atendente{align-self:flex-end;background:var(--vb-blue-100);border-top-right-radius:var(--radius-xs)}
.chat__msg--atendente time{text-align:right}
.chat__msg--dado{font-style:italic;color:var(--role-text-2)}
.chat__dia{align-self:center;padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill);background:var(--surface-card);font-size:var(--fs-caption);font-weight:var(--fw-semibold);color:var(--role-text-2)}
.por-tras{display:grid;gap:var(--space-2-5)}
.por-tras li{display:grid;grid-template-columns:auto 1fr;gap:var(--space-2-5);align-items:start;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--role-text-2)}
.por-tras .vb-icon{width:var(--icon-sm);height:var(--icon-sm);margin-top:var(--space-1);color:var(--role-accent)}
@media (min-width:1024px){.exemplo{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-8)}}

/* Os números (faixa escura) */
.case-numeros{display:grid;gap:var(--space-5)}
.case-numeros .numeros li{padding:var(--space-5)}
.case-numeros .numeros span{font-size:var(--fs-body-sm)}
.antes-agora{display:grid;gap:var(--space-4);padding:var(--space-5);border-radius:var(--radius-md);border:var(--border-thin) dashed var(--role-glass-border)}
.antes-agora__lado{display:grid;gap:var(--space-1)}
.antes-agora__rotulo{font-size:var(--fs-micro);font-weight:var(--fw-bold);letter-spacing:var(--ls-overline);text-transform:uppercase;color:var(--role-overline-text)}
.antes-agora__lado strong{font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:var(--fw-extra);letter-spacing:var(--ls-tight)}
.antes-agora__lado span{font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--role-text-3)}
.antes-agora__nota{font-size:var(--fs-caption);line-height:var(--lh-caption-lg);color:var(--role-text-2)}
@media (min-width:760px){.antes-agora{grid-template-columns:1fr 1fr}.antes-agora__nota{grid-column:1 / -1}}
.leitura{display:grid;gap:var(--space-3);max-width:var(--page-media);font-size:var(--fs-body-lg);line-height:var(--lh-body-lg);color:var(--role-text-3)}
.leitura strong{color:var(--role-text)}
.galeria__um{display:grid;gap:var(--space-3);margin:0;max-width:var(--page-media)}
.galeria__um figcaption{font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--role-text-3)}

/* Telas do painel */
.galeria{display:grid;gap:var(--space-6) var(--space-5)}
.galeria figure{display:grid;gap:var(--space-3);margin:0;align-content:start}
.galeria .moldura--print{aspect-ratio:4/3}
.galeria .moldura--print .moldura__midia{height:100%;object-fit:cover;object-position:top}
.galeria figcaption{font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--role-text-2)}
.galeria figcaption b{color:var(--role-text)}
@media (min-width:760px){.galeria{grid-template-columns:1fr 1fr}}
@media (min-width:1200px){.galeria{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* O que vem agora */
.proximos{display:grid;gap:var(--space-3-5);max-width:var(--page-media)}
.proximos .vb-feature__titulo{font-weight:var(--fw-bold)}

/* Outros cases e convite final */
.outros-cases{display:grid;gap:var(--space-4);margin-top:var(--space-7)}
.outro-case{display:grid;grid-template-columns:auto 1fr auto;gap:var(--space-4);align-items:center;padding:var(--space-5);border-radius:var(--radius-lg);background:var(--surface-card);border:var(--border-thin) solid var(--border-subtle);box-shadow:var(--shadow-sm);color:var(--role-text);text-decoration:none;transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base)}
.outro-case:hover{transform:translateY(var(--lift-2));box-shadow:var(--shadow-md)}
.outro-case__texto b{display:block;font-size:var(--fs-body-lg);font-weight:var(--fw-extra);color:var(--role-text)}
.outro-case__texto span{font-size:var(--fs-body-sm);color:var(--role-text-2)}
.outro-case__logo{width:var(--tile-base);height:var(--tile-base);border-radius:var(--radius-md)}
.outro-case > .vb-icon{width:var(--icon-md);height:var(--icon-md);color:var(--role-accent)}
.case-cta{display:grid;justify-items:center;gap:var(--space-5);text-align:center}
.case-cta .acoes{justify-content:center}

/* Página de cases: um cartão por cliente */
.cases-lista{display:grid;gap:var(--space-5);margin-top:var(--space-7)}
.case-cartao{display:grid;align-content:start;gap:var(--space-4);padding:var(--space-6);border-radius:var(--radius-xl);background:var(--surface-card);border:var(--border-thin) solid var(--border-subtle);box-shadow:var(--shadow-lg)}
.case-cartao__topo{display:flex;gap:var(--space-4);align-items:center}
.case-cartao__logo{flex:none;width:var(--tile-xl);height:var(--tile-xl);border-radius:var(--radius-lg)}
.case-cartao__nome{font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:var(--fw-extra);letter-spacing:var(--ls-tight)}
.case-cartao__meta{margin-top:var(--space-1);font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--role-text-2)}
.case-cartao__resumo{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--role-text-2)}
.case-cartao__numeros{display:grid;gap:var(--space-2-5)}
.case-cartao__numeros li{display:grid;grid-template-columns:minmax(0,var(--p-cc-nav)) 1fr;gap:var(--space-3);align-items:baseline;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);background:var(--surface-soft)}
.case-cartao__numeros strong{font-size:var(--fs-h4);line-height:var(--lh-h4);font-weight:var(--fw-extra)}
.case-cartao__numeros span{font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--role-text-2)}
.case-cartao__periodo{font-size:var(--fs-caption);line-height:var(--lh-caption-lg);color:var(--role-text-2)}
.case-cartao .vb-btn{justify-self:start}
@media (min-width:1024px){.cases-lista{grid-template-columns:1fr 1fr}}
@media (max-width:639px){.case-cartao{padding:var(--space-5)}.case-cartao__logo{width:var(--tile-lg);height:var(--tile-lg)}.case-cartao__logo .vb-icon{width:var(--icon-lg);height:var(--icon-lg)}.case-cartao__numeros li{grid-template-columns:1fr;gap:var(--space-0-5)}.case-cartao .vb-btn{justify-self:stretch}}

/* Lightbox com anterior e próxima (vários prints na mesma página) */
.lightbox__acoes{display:flex;gap:var(--space-2)}
.lightbox__acoes [hidden]{display:none}