/* Estilos propios de la página Quiénes Somos — reutiliza variables y clases base de style.css */

.qs-hero {
  position: relative;
  height: 58vh; min-height: 420px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.qs-hero-media { position: absolute; inset: 0; }
.qs-hero-media img { filter: grayscale(0.2) brightness(0.6); }
.qs-hero-content { position: relative; z-index: 2; text-align: center; color: var(--white); padding: 0 24px; }
.qs-hero-content .eyebrow { color: var(--gold); font-weight: 600; text-shadow: 0 1px 6px rgba(0,0,0,0.4); }
.qs-hero-content h1 { font-family: var(--font-display); font-size: 3.1rem; font-weight: 500; }

/* Historia */
.qs-story {
  padding: 110px 24px;
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center;
}
.qs-story-media { aspect-ratio: 4/5; overflow: hidden; }
.qs-story-text .eyebrow { text-align: left; }
.qs-story-text h2 { font-family: var(--font-display); font-size: 2.2rem; font-weight: 500; margin-bottom: 22px; }
.qs-story-text p {
  font-family: var(--font-display); font-size: 1.05rem; color: var(--gray);
  line-height: 1.75; margin-bottom: 18px;
}
.qs-story-text p:last-child { margin-bottom: 0; }

/* Valores */
.qs-values {
  background: var(--gray-light);
  padding: 100px 24px;
}
.qs-values-inner { max-width: 1200px; margin: 0 auto; }
.qs-values-head { text-align: center; margin-bottom: 60px; }
.qs-values-head h2 { font-family: var(--font-display); font-size: 2.1rem; font-weight: 500; }
.qs-values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px; text-align: center; }
.qs-value svg { color: var(--green); margin-bottom: 18px; stroke-width: 1; }
.qs-value h3 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; margin-bottom: 10px; }
.qs-value p { font-family: var(--font-sans); font-size: 0.83rem; color: var(--gray); line-height: 1.6; max-width: 260px; margin: 0 auto; }

/* Instagram */
.qs-social {
  padding: 110px 24px;
  text-align: center;
}
.qs-social .eyebrow { }
.qs-social h2 { font-family: var(--font-display); font-size: 2rem; font-weight: 500; margin-bottom: 16px; }
.qs-social p { font-family: var(--font-sans); font-size: 0.88rem; color: var(--gray); margin-bottom: 28px; }

@media (max-width: 900px) {
  .qs-story { grid-template-columns: 1fr; gap: 40px; }
  .qs-story-media { order: -1; }
  .qs-values-grid { grid-template-columns: 1fr; gap: 40px; }
}