/* ===========================
   QUEM SOMOS — Dobra 1: Hero
   =========================== */

/* wrapper duplo: cria o espaço de scroll para a sobreposição */
.qs-hero-wrapper {
  height: calc(2 * (100vh - var(--header-height, 80px)));
}

.qs-hero {
  background-color: var(--algodao);
  background-image: url('../assets/images/elementos/listras-crescentes.webp');
  background-size: cover;
  background-position: center top;
  height: calc(100vh - var(--header-height, 80px));
  padding: 40px 0 40px 20px;
  box-sizing: border-box;
  overflow: hidden;
  position: sticky;
  top: var(--header-height, 80px);
  z-index: 0;
}

/* símbolo height = 31.5vw × (1070/906) ≈ 37.2vw */
.qs-hero-grid {
  display: grid;
  grid-template-columns: 1fr calc(31.5vw + 95px);
  grid-template-rows: 37.2vw 1fr;
  height: 100%;
}

.qs-hero-col1 {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: fit-content;
  max-width: 560px;
}

.qs-hero-text {
  font-family: 'ZT Nature', sans-serif;
  font-weight: 400;
  font-size: 28pt;
  color: var(--nanquim);
  line-height: 1.2;
  margin: 0;
  width: 100%;
}

.qs-hero-text strong {
  font-weight: 700;
}

.qs-hero-bottom {
  display: flex;
  align-items: flex-end;
  gap: 48px;
  white-space: nowrap;
}

.qs-hero-location {
  font-family: 'ZT Nature', sans-serif;
  font-weight: 500;
  font-size: 14pt;
  color: var(--adubo);
  text-transform: uppercase;
  line-height: 1.2;
  margin: 0;
}

.qs-hero-ctas {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.qs-cta {
  font-family: 'ZT Nature', sans-serif;
  font-weight: 600;
  font-size: 12pt;
  color: var(--barro);
  text-decoration: underline;
  letter-spacing: 0.1em;
  text-transform: lowercase;
}

/* Coluna 2 */
.qs-hero-col2 {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: flex-start;
  padding-right: 95px;
}

.qs-hero-symbol {
  width: 31.5vw;
  height: auto;
  display: block;
}

/* Responsivo */
@media (max-width: 768px) {
  .qs-hero {
    padding: 40px 20px;
  }

  .qs-hero-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    height: auto;
  }

  .qs-hero-col1 {
    width: 100%;
    max-width: 100%;
    justify-content: flex-start;
    gap: 0;
  }

  .qs-hero-text {
    font-size: 20pt;
  }

  .qs-hero-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    margin-top: 48px;
    white-space: normal;
  }

  .qs-hero-location {
    font-size: 11pt;
  }

  .qs-hero-col2 {
    grid-column: 1;
    grid-row: 2;
    padding-right: 0;
    margin-top: 48px;
  }

  .qs-hero-symbol {
    width: 100%;
    height: auto;
  }
}

/* ===========================
   QUEM SOMOS — Dobra 2: Hana
   =========================== */

.qs-hana {
  background-color: var(--barro);
  position: relative;
  z-index: 1;
  overflow: visible;
  /* começa no limite inferior da viewport — sobe sobre a dobra 1 durante o scroll */
  margin-top: calc(-1 * (100vh - var(--header-height, 80px)));
}

.qs-hana-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  z-index: 1;
}

/* Coluna 1: foto sem margens */
.qs-hana-col1 {
  overflow: hidden;
}

.qs-hana-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Coluna 2: bio */
.qs-hana-col2 {
  padding: 60px 95px 60px calc(18.5vw - 95px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.qs-hana-title {
  font-family: 'Meshed Display', sans-serif;
  font-weight: 300;
  font-size: 40pt;
  color: var(--nanquim);
  margin: 0;
  line-height: 1.1;
}

.qs-hana-bio {
  font-family: 'ZT Nature', sans-serif;
  font-weight: 300;
  font-size: 12pt;
  color: var(--algodao);
  line-height: 1.15;
  margin: 0;
}

/* Grafismo conector dobra 2 → 3 — metade em cada dobra */
.qs-grafismo-equipe {
  position: absolute;
  left: calc(50% - 150px); /* divisa entre as duas colunas */
  bottom: -150px;
  width: 300px;
  height: auto;
  z-index: 10;
  pointer-events: none;
}

/* ===========================
   QUEM SOMOS — Dobra 3: Equipe
   =========================== */

.qs-team {
  background-color: var(--rio);
  padding: 20px;
  padding-top: 234px; /* 150px grafismo + 84px espaço */
  padding-bottom: 80px;
}

.qs-team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.qs-team-photo {
  width: 100%;
  height: auto;
  display: block;
}

.qs-team-name {
  font-family: 'Meshed Display', sans-serif;
  font-weight: 300;
  font-size: 30pt;
  color: var(--areia);
  margin: 16px 0 8px;
  line-height: 1.1;
  padding: 0 12px;
}

.qs-team-bio {
  font-family: 'ZT Nature', sans-serif;
  font-weight: 300;
  font-size: 12pt;
  color: var(--algodao);
  line-height: 1.15;
  margin: 0;
  padding: 0 12px;
}

@media (max-width: 768px) {
  .qs-hana-grid {
    grid-template-columns: 1fr;
  }

  .qs-hana-col2 {
    padding: 40px 20px;
  }

  .qs-hana-title {
    font-size: 28pt;
  }

  .qs-grafismo-equipe {
    display: none;
  }

  .qs-team {
    padding-top: 40px;
  }

  .qs-team-grid {
    grid-template-columns: 1fr;
  }

  .qs-team-member:not(:first-child) {
    border-top: 1px solid var(--algodao);
    padding-top: 40px;
    margin-top: 20px;
  }
}

/* ===========================
   QUEM SOMOS — Dobra 4: Como Fazemos
   =========================== */

.qs-como {
  padding: 80px 20px 60px;
  background-color: var(--alecrim);
  background-image: url('../assets/images/elementos/texturafundo-acordeon.webp');
  background-size: cover;
  background-position: center;
}

.qs-como-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}

.qs-como-label {
  font-family: 'ZT Nature', sans-serif;
  font-weight: 600;
  font-size: 12pt;
  color: var(--nanquim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.qs-como-grafismo {
  height: 18px;
  width: auto;
  filter: brightness(0);
}

.qs-accordion-item {
  border-top: 1px solid var(--algodao);
}

.qs-accordion-item:first-child {
  border-top: none;
}

.qs-accordion-item:last-child {
  border-bottom: none;
}

.qs-accordion-trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  padding: 1.2em 0;
  cursor: pointer;
  text-align: left;
}

.qs-accordion-title {
  font-family: 'ZT Nature', sans-serif;
  font-weight: 500;
  font-size: 42pt;
  color: var(--nanquim);
  line-height: 1.2;
}

.qs-accordion-icon {
  font-family: 'ZT Nature', sans-serif;
  font-weight: 500;
  font-size: 42pt;
  color: var(--algodao);
  line-height: 1.2;
  display: inline-block;
  transition: transform 0.3s ease;
  flex-shrink: 0;
  margin-left: 20px;
}

.qs-accordion-trigger[aria-expanded="true"] .qs-accordion-icon {
  transform: rotate(45deg);
}

.qs-accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.qs-accordion-panel.open {
  max-height: 600px;
}

.qs-accordion-body {
  padding: 0 0 32px;
}

.qs-accordion-text {
  font-family: 'ZT Nature', sans-serif;
  font-weight: 300;
  font-size: 12pt;
  color: var(--nanquim);
  line-height: 1.2;
  margin: 0;
  max-width: 680px;
}

@media (max-width: 768px) {
  .qs-accordion-title,
  .qs-accordion-icon {
    font-size: 24pt;
    line-height: 1.2;
  }
}

@media (min-width: 769px) and (max-width: 1023px) {
  .qs-team-grid {
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
  }

  .qs-team-member:nth-child(n+3) {
    border-top: 1px solid var(--algodao);
    padding-top: 40px;
    margin-top: 20px;
  }
}

/* Dobra 5: Manifesto */
.qs-manifesto {
  background-color: var(--nanquim);
  padding: 129px 110px 129px 20px;
}

.qs-manifesto-grid {
  display: grid;
  grid-template-columns: 6fr 4fr;
  gap: 89px;
  align-items: start; /* Alinha ao topo da foto */
}

.qs-manifesto-col1 img {
  width: 100%;
  height: auto;
  display: block;
}

.qs-manifesto-col2 {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.qs-manifesto-highlight {
  font-family: 'Meshed Display', sans-serif;
  font-weight: 600; /* semibold */
  font-size: clamp(18pt, 2.5vw, 28pt); /* Diminui com a tela */
  line-height: 1.15;
  color: var(--algodao);
  margin: 0;
}

.qs-manifesto-body {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
}

.qs-manifesto-text {
  font-family: 'ZT Nature', sans-serif;
  font-weight: 300; /* light */
  font-size: clamp(11pt, 1.2vw, 14pt); /* Diminui com a tela */
  line-height: 1.15;
  color: var(--algodao);
  margin: 0;
}

/* Responsivo Manifesto */
@media (max-width: 1024px) {
  .qs-manifesto {
    padding: 60px 20px;
  }
  .qs-manifesto-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}