/* ===========================================================================
   /manifesto — complementa mercado.css, não repete.
   Só o que a página de manifesto tem e as de mercado não têm.
   =========================================================================== */

/* Declaração de visão e missão: a frase É o conteúdo, então ela é grande. */
.declaracao {
  margin: 0;
  padding: 28px 0 28px 26px;
  border-left: 3px solid var(--light-blue);
  font-size: clamp(20px, 2.6vw, 28px);
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--fg);
  max-width: 30ch;
}

.sub {
  margin: 38px 0 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: var(--track-tagline);
  text-transform: uppercase;
  color: var(--fg-dim);
}

/* Os 7 valores, numerados. O número é grande porque a lista é o argumento. */
.valores {
  list-style: none;
  counter-reset: valor;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.valores > li {
  counter-increment: valor;
  position: relative;
  padding: 26px 26px 26px 78px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, .025);
}
.valores > li::before {
  content: counter(valor, decimal-leading-zero);
  position: absolute;
  left: 26px;
  top: 24px;
  font-size: 22px;
  font-weight: 800;
  color: var(--light-blue);
  opacity: .55;
  font-variant-numeric: tabular-nums;
}
.valores > li h3 {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.01em;
}
.valores > li p { margin: 0 0 10px; color: var(--fg-muted); max-width: 68ch; }
.valores > li p:last-child { margin-bottom: 0; }

/* A prova é o que separa este manifesto de uma parede de adjetivos. */
.prova {
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(102, 204, 255, .07);
  border: 1px solid rgba(102, 204, 255, .18);
  font-size: 14px;
}
.prova strong { color: var(--fg); }

/* O que a empresa deliberadamente NÃO afirma. */
.ressalva {
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .03);
  border: 1px dashed var(--line-strong);
  font-size: 14px;
}
.ressalva strong { color: var(--fg); }

.principios {
  margin: 0 0 12px;
  padding: 0 0 0 20px;
  color: var(--fg-muted);
  max-width: 68ch;
}
.principios li { margin-bottom: 6px; }
.principios b { color: var(--fg); }

@media (max-width: 640px) {
  .valores > li { padding: 22px 20px 22px 20px; }
  .valores > li::before { position: static; display: block; margin-bottom: 8px; }
  .declaracao { padding-left: 18px; }
}