/* Quem somos: título misto à esquerda, colagem de fotos à direita */
.qs-secao { overflow: hidden; }
.qs-grade {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem, 5vw, 6rem);
  align-items: center;
}
.qs-titulo {
  margin: 1.375rem 0 1.625rem;
  color: var(--tinta);
  line-height: 0.92;
}
.qs-linha { display: block; }
.qs-l1, .qs-l2 {
  font-weight: 700; letter-spacing: -0.045em; text-transform: uppercase;
  font-size: clamp(2.5rem, calc(var(--u) * 6.4), 6.5rem);
}
.qs-l3 {
  font-size: clamp(2.625rem, calc(var(--u) * 6.6), 6.75rem);
  line-height: 1; margin-top: 0.08em;
}
.qs-par { max-width: 46ch; }
.qs-valores {
  list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 1.375rem;
  margin: 1.5rem 0 2rem;
  font-family: var(--fonte-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--tinta-2);
}
.qs-valores li { display: flex; align-items: center; gap: 0.5rem; }
.qs-valores li::before { content: ''; width: 0.375rem; height: 0.375rem; background: var(--acento); box-shadow: 0 0 0 1px var(--linha); }

/* Colagem */
.qs-colagem { position: relative; aspect-ratio: 1 / 1.02; width: 100%; }
.qs-foto {
  position: absolute; overflow: hidden; border-radius: var(--raio-m);
  background: var(--oliva); will-change: transform;
}
/* fotos em preto e branco, com granulado de filme a 70% por cima */
.qs-foto img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08); }
.qs-foto.qs-tem-foto::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  opacity: 0.7; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}
.qs-f1 { left: 18%; top: 8%; width: 56%; aspect-ratio: 4 / 5; z-index: 2; }
.qs-f2 { right: -6%; top: -4%; width: 40%; aspect-ratio: 4 / 3; z-index: 3; background: var(--creme-2); }
.qs-f3 { left: 0; bottom: 2%; width: 32%; aspect-ratio: 1; z-index: 3; background: var(--creme-2); }
.qs-espera {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0.625rem;
  color: rgba(244, 244, 237, 0.6);
  font-family: var(--fonte-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase;
}
.qs-espera .marca-mid { width: 2.125rem; background: var(--acento); }
.qs-f2 .qs-espera, .qs-f3 .qs-espera { color: rgba(40, 44, 32, 0.55); }
.qs-f2 .qs-espera .marca-mid, .qs-f3 .qs-espera .marca-mid { background: var(--oliva); }
.qs-foto.qs-tem-foto .qs-espera { display: none; }
.qs-etiqueta {
  position: absolute; z-index: 4; right: 6%; bottom: 14%;
  background: var(--acento); color: var(--preto);
  padding: 0.75rem 1.25rem; border-radius: 62.4375rem;
  font-family: var(--fonte-mono); font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase;
  transform: rotate(-6deg);
}

@media (max-width: 900px) {
  .qs-grade { grid-template-columns: 1fr; gap: 3.5rem; }
  .qs-colagem { width: min(100%, 35rem); margin-inline: auto; }
  .qs-f2 { right: 0; top: 0; }
}
@media (max-width: 520px) {
  .qs-l1, .qs-l2 { font-size: clamp(2.25rem, 12vw, 3.5rem); }
  .qs-l3 { font-size: clamp(2.125rem, 11vw, 3.75rem); }
  .qs-etiqueta { font-size: 0.6875rem; padding: 0.5625rem 0.875rem; right: 2%; }
  .qs-espera { font-size: 0.5625rem; }
  .qs-espera .marca-mid { width: 1.625rem; }
}
