/* Sobre: capa, missão e visão, valores, jornada, manifesto, nome e quem responde. */

/* Capa */

.capa-sobre {
  gap: var(--space-12) 72px;
}

.capa-sobre .capa-texto {
  flex-basis: 520px;
}

.capa-sobre .subtitulo {
  max-width: 600px;
}

.capa-mochila {
  flex: 0 1 340px;
  min-width: 240px;
  aspect-ratio: 1 / 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  background: var(--pistache);
}

.capa-mochila img {
  width: 46%;
  height: auto;
}

.capa-mochila::before,
.capa-mochila::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.capa-mochila::before {
  left: 10%;
  top: 12%;
  width: 44px;
  height: 44px;
  background: var(--coral);
}

.capa-mochila::after {
  right: 12%;
  bottom: 14%;
  width: 28px;
  height: 28px;
  border: 3px dashed var(--violeta);
}

/* Cartões de frase: missão, visão e de onde vem o nome. */

.cartoes-frase {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: var(--space-6);
  padding-bottom: clamp(var(--space-16), 7vw, 96px);
}

.cartao-frase {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: clamp(var(--space-6), 4vw, var(--space-12));
  border-radius: var(--radius-lg);
}

.cartao-frase .sobretitulo {
  color: inherit;
}

.frase {
  font: var(--tipo-titulo);
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.3;
  letter-spacing: var(--letras-titulo);
}

.cartao-missao {
  background: var(--violeta);
  color: var(--lona);
}

.cartao-visao {
  background: var(--noite);
  color: var(--lona);
}

.cartao-missao .sobretitulo,
.cartao-visao .sobretitulo {
  color: var(--pistache);
}

@media (prefers-color-scheme: dark) {
  .cartao-visao {
    outline: 1px solid var(--borda);
  }
}

/* Valores */

.valores,
.jornada {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.valores .secao-cabeca,
.jornada .secao-cabeca {
  max-width: 760px;
}

.valores-itens {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 0 var(--space-12);
  list-style: none;
}

.valores-itens li {
  display: flex;
  gap: var(--space-6);
  padding-block: var(--space-6);
  border-top: 1px solid var(--borda);
}

.valores-itens .numero {
  font: var(--tipo-mono);
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  color: var(--texto-destaque);
}

.valores-itens div {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.item-titulo {
  font: var(--tipo-subtitulo);
  font-weight: 700;
}

.valores-itens p {
  color: var(--texto-suave);
}

/* Jornada: superfície escura, nos dois temas. */

.secao-jornada {
  border-block: 1px solid var(--borda);
}

.jornada .secao-cabeca .sobretitulo {
  color: var(--pistache);
}

.jornada .secao-cabeca p:last-child,
.jornada-itens p {
  color: var(--texto-suave);
}

.jornada-itens {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-6);
  list-style: none;
}

.jornada-itens li {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.jornada-itens img {
  width: 96px;
  height: 96px;
}

/* Manifesto */

.manifesto {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 72px;
  padding-block: clamp(var(--space-16), 7vw, 112px);
}

.manifesto .secao-cabeca {
  flex: 1 1 280px;
  min-width: 0;
}

.manifesto-texto {
  flex: 1 1 560px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  font-size: 20px;
  line-height: 32px;
}

.manifesto-texto .assinatura {
  font-weight: 800;
}

/* De onde vem o nome e quem responde */

.cartao-nome {
  background: var(--coral);
  color: var(--noite);
}

.cartao-nome .destaque,
.cartao-empresa .destaque {
  font: var(--tipo-titulo);
  font-size: 24px;
  line-height: 32px;
}

.cartao-empresa {
  background: var(--fundo-elevado);
  box-shadow: var(--sombra-cartao);
}

.cartao-empresa .sobretitulo {
  color: var(--texto-destaque);
}

.cartao-empresa dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-6);
  font-size: 16px;
  line-height: 24px;
}

.cartao-empresa dt,
.cartao-empresa .nota {
  color: var(--texto-suave);
}

.cartao-empresa dd {
  margin: 0;
}

.cartao-empresa .nota {
  font-size: 16px;
  line-height: 26px;
}