/* FG Import — página "Quem somos" (quem-somos/index.html)
   Usa os tokens e peças de css/style.css (.title, .pill, .btn, .section, .loja__credito)
   e de css/produtos.css (.p-hero, .migalha, .p-cta__acoes, .btn--zap) */

/* ---------- topo: o vídeo da história, em pé como foi gravado ---------- */

.qs-hero .p-hero__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); }
.qs-filme { justify-self: end; width: min(100%, 340px, calc((100svh - 230px) * 9 / 16)); min-width: 250px; margin: 0; }
.qs-filme__quadro { position: relative; overflow: hidden; aspect-ratio: 404 / 720; border-radius: var(--raio); background: var(--floresta) url("../assets/images/qs-video-capa.webp") center / cover no-repeat; box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .85); }
.qs-filme__video { width: 100%; height: 100%; object-fit: cover; }
.qs-filme__botoes { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; justify-content: space-between; gap: 10px; }
.qs-filme__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; height: 44px; padding: 0 12px; border: 0; border-radius: var(--raio-pill); color: var(--papel); background: rgba(26, 44, 30, .82); font-size: .8125rem; font-weight: 700; cursor: pointer; backdrop-filter: blur(6px); transition: background-color .2s, color .2s; }
.qs-filme__btn:hover { background: var(--mata); }
.qs-filme__btn svg { flex: none; width: 20px; height: 20px; fill: currentColor; }
.qs-filme__tocar { width: 44px; padding: 0; }
.qs-filme__play, .qs-filme__tocar.is-pausado .qs-filme__pausa { display: none; }
.qs-filme__tocar.is-pausado .qs-filme__play { display: block; }
.qs-filme__som { padding: 0 16px 0 12px; }
.qs-filme__som svg path { stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.qs-filme__ondas { opacity: .45; }
.qs-filme__som[aria-pressed="true"] { color: var(--mata); background: var(--sol); }
.qs-filme__som[aria-pressed="true"] .qs-filme__ondas { opacity: 1; }
.qs-filme figcaption { margin-top: 12px; font-size: .875rem; color: rgba(246, 248, 240, .7); }

/* ---------- da fábrica ao ponto de venda: três etapas ---------- */

.qs-historia__cab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px clamp(36px, 6vw, 96px); align-items: end; }
.qs-historia__cab .title { margin-top: 0; }
.qs-historia__cab p { max-width: 46ch; font-size: 1.125rem; color: var(--tinta-suave); }
.qs-etapas { counter-reset: etapa; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 32px); margin-top: clamp(40px, 5vw, 64px); }
.qs-etapa { counter-increment: etapa; }
.qs-etapa__foto { position: relative; margin: 0 0 22px; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--raio); background: var(--nevoa); }
.qs-etapa__foto img { width: 100%; height: 100%; object-fit: cover; }
.qs-etapa__foto--fabrica img { object-position: 22% 50%; }
.qs-etapa__foto--pdv img { object-position: 50% 20%; }
.qs-etapa__foto::after { content: counter(etapa); position: absolute; top: 14px; left: 14px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-size: .875rem; font-weight: 700; color: var(--papel); background: var(--floresta); }
.qs-etapa h3 { font-size: 1.25rem; font-weight: 600; line-height: 1.3; color: var(--floresta); }
.qs-etapa p { margin-top: 8px; max-width: 34ch; color: var(--tinta-suave); }

/* ---------- onde encontrar: matriz em destaque e lojas agrupadas por cidade ---------- */

.qs-onde .pill { background: var(--papel); }
.qs-matriz { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); overflow: hidden; border-radius: var(--raio); color: var(--papel); background: var(--floresta); box-shadow: 0 30px 60px -44px rgba(10, 20, 12, .8); }
.qs-matriz__foto { position: relative; margin: 0; min-height: 340px; background: var(--mata); }
.qs-matriz__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.qs-matriz__corpo { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(28px, 4vw, 56px); }
.qs-selo { padding: 5px 12px; border-radius: var(--raio-pill); font-size: .75rem; font-weight: 700; letter-spacing: .02em; color: var(--mata); background: var(--sol); }
.qs-matriz h3 { margin-top: 18px; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.375rem); font-weight: 500; line-height: 1.1; letter-spacing: -.015em; }
.qs-matriz__tipo { margin-top: 6px; font-weight: 600; color: var(--salvia-clara); }
.qs-matriz address { align-self: stretch; margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(246, 248, 240, .16); line-height: 1.7; color: rgba(246, 248, 240, .84); }

.qs-polos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.qs-polo { display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(43, 69, 48, .14); border-radius: var(--raio); background: var(--branco); box-shadow: 0 22px 40px -34px rgba(26, 44, 30, .6); }
.qs-polo__foto { position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--nevoa); }
.qs-polo__foto img { width: 100%; height: 100%; object-fit: cover; }
.qs-polo__corpo { padding: 22px 24px 8px; }
.qs-polo h3 { font-size: 1.375rem; font-weight: 600; line-height: 1.2; color: var(--floresta); }
.qs-unidades { margin-top: 10px; }
.qs-unidades > li { padding-block: 16px; }
.qs-unidades > li + li { border-top: 1px solid rgba(43, 69, 48, .1); }
.qs-unidades h4 { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 1rem; font-weight: 700; color: var(--tinta); }
.qs-unidades h4 span { font-size: .8125rem; font-weight: 600; color: var(--floresta); }
.qs-unidades p { margin-top: 6px; font-size: .875rem; font-weight: 600; line-height: 1.55; color: var(--floresta); }
.qs-unidades address { margin-top: 6px; font-size: .9375rem; line-height: 1.55; color: var(--tinta-suave); }
.qs-inteiro { white-space: nowrap; }

/* ---------- chamada final com o time ---------- */

.qs-cta { padding-block: clamp(64px, 8vw, 112px); color: var(--papel); background: var(--floresta); }
.qs-cta__grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.qs-cta__foto { margin: 0; }
.qs-cta__foto img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--raio); box-shadow: 0 34px 60px -36px rgba(0, 0, 0, .8); }
.qs-cta__foto figcaption { margin-top: 10px; font-size: .875rem; color: rgba(246, 248, 240, .62); }
.qs-cta .title { margin-top: 0; }
.qs-cta p { margin-top: 18px; max-width: 50ch; color: rgba(246, 248, 240, .84); }
.qs-cta .p-cta__acoes { margin-top: 30px; }

/* ---------- responsivo ---------- */

@media (max-width: 1080px) {
  .qs-hero .p-hero__grid, .qs-cta__grid { grid-template-columns: minmax(0, 1fr); }
  .qs-filme { justify-self: start; width: min(100%, 340px); }
  .qs-cta__foto { max-width: 640px; }
  .qs-polos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .qs-historia__cab { grid-template-columns: minmax(0, 1fr); }
  .qs-matriz { grid-template-columns: minmax(0, 1fr); }
  .qs-matriz__foto { min-height: 0; aspect-ratio: 16 / 9; }
}

@media (max-width: 640px) {
  .qs-filme { justify-self: center; }
  .qs-etapas { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .qs-etapa__foto { aspect-ratio: 4 / 3; }
  .qs-polos { grid-template-columns: minmax(0, 1fr); }
}