/* ==========================================================================
   Home do site Manifesto Digital.
   Preto-piano neutro, N27, verde só como acento, cards finos com borda e
   divisores com o símbolo. Antes desta folha a página carrega o sistema visual
   (assets/sistema/: tokens.css, base.css e componentes.css).
   ========================================================================== */

html{scroll-padding-top:calc(var(--nav-h) + 12px)}
/* Reset, corpo, foco, seleção e utilitários de acessibilidade: assets/sistema/base.css */

/* ---------- tipografia base ---------- */
.eyebrow{font-size:12px;letter-spacing:.26em;line-height:1.3;text-transform:uppercase}

.eyebrow{color:var(--brown)}

/* Quando o destaque é uma frase inteira, ele vira a segunda linha. */

/* ---------- botões ---------- */

/* ---------- divisor (mesmo da LP) ---------- */

/* ==========================================================================
   Abertura
   ========================================================================== */

/* Frases da abertura: o mecanismo de alternância está em componentes.css; aqui só as cores. */
.hero-loop-phrase>span{color:color-mix(in srgb,var(--marble) 62%,transparent)}
.hero-loop-phrase>strong{color:var(--marble);font-weight:400}

/* ==========================================================================
   Resultados
   ========================================================================== */

/* Todas em branco: a Vianna (vermelha) sumia no cinza. A cor volta no hover. */

/* ==========================================================================
   Método: três camadas
   ========================================================================== */

/* ==========================================================================
   Growth 90
   ========================================================================== */

/* ==========================================================================
   Cases (o componente vem da client-cases.css)
   ========================================================================== */

/* ==========================================================================
   Depoimentos
   ========================================================================== */

/* Tela 9:16, a proporção dos vídeos: nada é cortado. */

/* ==========================================================================
   Sobre
   ========================================================================== */

/* ==========================================================================
   Manifesto Day (retrospectiva)
   ========================================================================== */

/* Logos dos parceiros são escuras: ficam no mesmo cartão claro da LP do evento. */
.site-event-sponsors{display:flex;align-items:center;gap:clamp(20px,3vw,40px);margin-top:16px;padding:22px clamp(22px,3vw,40px);border-radius:22px;background:linear-gradient(145deg,var(--stone),var(--stone-dim))}
.site-event-sponsors p{flex:none;color:var(--stone-ink);font-size:11px;letter-spacing:.22em;line-height:1.4;text-transform:uppercase}
.site-event-sponsors ul{display:flex;flex:1;flex-wrap:wrap;align-items:center;justify-content:space-around;gap:16px 28px;list-style:none}
.site-event-sponsors img{width:auto;height:38px;max-width:130px;object-fit:contain;opacity:.95}
/* Os arquivos têm margens internas diferentes; compensação herdada da LP. */
.sp--wl img{height:44px}
.sp--autoconf img{height:28px}
.sp--belloscar img{height:38px;transform:scale(2.1)}
.sp--malires img{height:40px;transform:scale(1.45)}
.sp--posta img{height:34px}

/* ==========================================================================
   Chamada final
   ========================================================================== */

/* ==========================================================================
   Rodapé
   ========================================================================== */

/* ==========================================================================
   Movimento
   ========================================================================== */

/* ==========================================================================
   Responsivo
   ========================================================================== */

@media(max-width:760px){
  
  
  
  
  
  .site-event-sponsors{flex-direction:column;text-align:center}
}
@media(max-width:620px){
  :root{--nav-h:66px}
  
  
  
  
  
  
  
  
  /* 4 logos: grade 2x2, sem a quarta sobrando sozinha numa linha. */
  
  .site-event-sponsors ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));justify-items:center;gap:22px 12px;width:100%}
  .sp--belloscar img{transform:scale(1.6)}
  .sp--malires img{transform:scale(1.25)}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  
  
  
  
}


/* Nome do case em duas colunas: "@vagner_masterbrasil" não tem onde quebrar e
   passava da borda logo acima de 860px. Só no layout de duas colunas: abaixo
   disso o case empilha e container-type numa coluna centralizada a encolheria. */
@media(min-width:861px){
  .client-case:not([data-client-case="vianna-motos"]) .ci-info{container-type:inline-size}
  .client-case:not([data-client-case="vianna-motos"]) .ci-name{font-size:min(clamp(32px,4.25vw,50px),7.6cqi)}
}

/* Home: os cases fecham com o depoimento real, depois dos resultados
   (na LP do evento ele segue oculto pelo client-cases.css). */
#cases [data-client-case] .client-testimonial{display:block}
/* Citação do depoimento em destaque: aspas grandes em verde e frase maior. */
#cases .ct-quote{margin-top:34px;padding-left:0;max-width:540px}
#cases .ct-quote-mark{position:static;display:block;height:.5em;margin-bottom:12px;color:var(--green-bright);font-family:inherit;font-size:clamp(84px,7vw,120px);line-height:.9}
#cases .ct-quote-text{color:var(--marble);font-size:clamp(22px,2vw,30px);letter-spacing:-.02em;line-height:1.28}
@media(min-width:901px){#cases .ct-manifesto{justify-content:flex-start;margin-top:48px}#cases .ct-manifesto img{width:200px}}
@media(max-width:900px){
  #cases .ct-quote{max-width:340px;margin-inline:auto}
  #cases .ct-quote-text{font-size:21px}
}

/* Big numbers centralizados abaixo do gráfico de cada case. */
#cases .ci-caps{justify-content:center;max-width:560px;margin-left:auto;margin-right:auto}

/* Depoimento na mesma grade dos insights: o celular do depoimento fica no mesmo
   eixo e com a mesma largura do celular de "Resultados de nosso método". */
@media(min-width:901px){
  #cases .ct-shell{grid-template-columns:minmax(300px,1.02fr) minmax(260px,.98fr);column-gap:clamp(28px,4.4vw,54px);max-width:none}
  #cases .ct-right{justify-content:center}
}

/* A faixa de virais (celular) usa a margem negativa da LP do evento e passava 4px da tela. */
#cases{overflow-x:clip}