/* Vitrine por setor: página de campanha, celular primeiro. Direção A · Cinético sobre marca/web/a.css.
   Pronta para a CSP do site (style-src 'self'): nada de <style>, style= ou script inline no HTML. */
.v-simbolos { position: absolute; }
.v-topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 0 var(--a-margem); }
.v-topo > a { display: flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; }
.v-logo { width: 156px; height: 18px; }
.v-topo .v-site { font: 500 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }

main > section { padding: 48px var(--a-margem); }

/* topo: setor, promessa, apoio e a ação (o botão é o único vermelho desta tela) */
.v-heroi { display: grid; justify-items: start; gap: 20px; padding-top: 24px; }
.v-setor { display: flex; align-items: center; gap: 10px; color: var(--ink-muted); }
.v-setor svg { width: 20px; height: 20px; flex: none; }
.v-heroi h1 { max-width: 16ch; }
.v-acao { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; margin-top: 8px; }
.v-wa svg { width: 20px; height: 20px; }
.v-apoio { max-width: 30em; font-size: 15px; line-height: 1.45; color: var(--ink-muted); }
.v-wa:hover svg, .v-wa:focus-visible svg { translate: none; }

/* dores: a lista sem fio do a.css, um pouco menor no celular */
.v-dores { display: grid; gap: 28px; }
.v-dores .a-lista { gap: 28px; }
.v-dores .a-lista > li { grid-template-columns: 40px minmax(0, 1fr); }
.v-dores .a-lista > li::before { line-height: 27px; }
.v-dores .a-lista strong { font-size: 21px; line-height: 27px; }
.v-dores .a-lista p { margin-top: 6px; }

/* bloco da objeção (opcional): título t3 e uma frase, sem caixa */
.v-bloco { display: grid; gap: 16px; padding-top: 0; }

/* demonstração: seção Grafite com as telas Gelo (linguagem C, tela.css) */
.v-demo { display: grid; gap: 24px; background: var(--bg); color: var(--ink); }
.v-telas { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items: start; }

/* como começa: três passos numerados, sem fio */
.v-passos { display: grid; gap: 24px; }
.v-passos ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; counter-reset: passo; }
.v-passos li { display: grid; grid-template-columns: 40px minmax(0, 1fr); counter-increment: passo; color: var(--ink-muted); font-size: 17px; line-height: 1.45; }
.v-passos li::before { content: counter(passo, decimal-leading-zero); font: 500 13px/24px var(--font-mono); letter-spacing: .06em; }
.v-passos strong { color: var(--ink); font-weight: 500; }

.v-fim { display: grid; justify-items: start; gap: 20px; padding-bottom: 64px; }
.v-fim .a-texto + .a-texto { margin-top: -8px; }

.v-rodape { display: grid; gap: 8px; padding: 24px var(--a-margem) 40px; color: var(--ink-muted); }
.v-contato { display: flex; flex-wrap: wrap; gap: 0 24px; font-size: 15px; }
.v-contato a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; }

@media (min-width: 900px) {
  main > section { padding: 96px var(--a-margem); }
  .v-heroi { padding-top: 64px; }
  .v-dores .a-lista, .v-passos ol { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
  .v-fim { padding-bottom: 128px; }
}