/* ============================================================
   T3 ARQUITETURA — Quem somos
   ============================================================ */

/* ---- História ---- */
.qs-story { background: var(--paper); }
.qs-story__grid { display: grid; grid-template-columns: 1fr 1.12fr; gap: clamp(36px, 6vw, 100px); align-items: start; }
.qs-story__title { font-size: clamp(1.8rem, 3.4vw, 3rem); font-weight: 300; letter-spacing: -.02em; line-height: 1.08; }
.qs-story__title em { color: var(--clay); font-style: normal; }
.qs-story__text { color: var(--ink-60); font-size: 1.07rem; line-height: 1.78; }
.qs-story__text p + p { margin-top: 1.1em; }
.qs-story__sign { margin-top: clamp(26px, 3vw, 40px); display: flex; align-items: center; gap: 16px; }
.qs-story__sign-line { width: 40px; height: 1px; background: var(--clay); }
.qs-story__sign-txt { font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--clay-deep); }

/* ---- Imagem do estúdio (full-bleed framed) ---- */
.qs-figure { position: relative; background: var(--paper); padding: 0 var(--gutter) var(--section-y); }
.qs-figure__wrap { position: relative; max-width: var(--maxw); margin: 0 auto; padding: 0 0 22px 0; }
/* moldura terracota descolada — assina o quadro */
.qs-figure__wrap::before { content: ""; position: absolute; right: -14px; bottom: 8px; width: 38%; height: 60%; border: 1px solid var(--clay); z-index: 0; pointer-events: none; }
.qs-figure__frame { position: relative; z-index: 1; overflow: hidden; aspect-ratio: 16 / 9; background: var(--bone); box-shadow: 0 40px 80px -34px rgba(47,40,39,.32), 0 12px 24px -14px rgba(47,40,39,.18); }
/* foco nos rostos para foto horizontal de equipe */
.qs-figure__frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; transition: transform 1.6s cubic-bezier(.2,.7,.2,1); }
.qs-figure__frame:hover img { transform: scale(1.02); }
/* legenda com pequeno traço terracota */
.qs-figure__cap { display: flex; align-items: center; gap: 14px; max-width: var(--maxw); margin: 22px auto 0; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-40); }
.qs-figure__cap::before { content: ""; width: 28px; height: 1px; background: var(--clay); flex: none; }

/* ---- Princípios ---- */
.qs-princ { background: var(--bone); max-width: none; }
.qs-princ__grid, .qs-princ .section__head { max-width: var(--maxw); margin-left: auto; margin-right: auto; }
.qs-princ__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.princ { padding: clamp(30px, 3vw, 50px) clamp(24px, 3vw, 50px); border-left: 1px solid var(--line); }
.princ:first-child { border-left: none; padding-left: 0; }
.princ__num { font-size: .8rem; letter-spacing: .2em; color: var(--clay); display: block; margin-bottom: 20px; }
.princ__title { font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 300; margin-bottom: 14px; }
.princ__desc { color: var(--ink-strong); max-width: 36ch; line-height: 1.65; }

/* ---- Números ---- */
.qs-nums { background: var(--espresso); color: var(--paper); max-width: none; }
.qs-nums__grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 44px); }
.qs-num { border-left: 1px solid var(--line-light); padding-left: clamp(18px, 2vw, 30px); }
.qs-num:first-child { border-left: none; padding-left: 0; }
.qs-num__n { display: block; font-size: clamp(2.4rem, 4.2vw, 3.8rem); font-weight: 200; color: var(--clay-soft); letter-spacing: -.03em; line-height: 1; }
.qs-num__l { font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--clay-soft); margin-top: 12px; }

@media (max-width: 900px) {
  .qs-story__grid { grid-template-columns: 1fr; gap: 30px; }
  .qs-princ__grid { grid-template-columns: 1fr; }
  .princ { border-left: none; border-top: 1px solid var(--line); padding-left: 0; padding-right: 0; }
  .princ:first-child { border-top: none; }
  .qs-nums__grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .qs-num:nth-child(3) { border-left: none; padding-left: 0; }
}
@media (max-width: 520px) {
  .qs-figure__frame { aspect-ratio: 4 / 3.4; }
  .qs-figure__wrap::before { display: none; }
  .qs-nums__grid { grid-template-columns: 1fr 1fr; }
}