/* ==========================================================================
   Quienes somos — page styles
   Breakpoints follow the original page builder:
   tablet = 768–991px, mobile = ≤767px.
   ========================================================================== */

.text-sr-orange { color: var(--sr-orange-dark); }

/* ---------- Hero ---------- */
.qs-hero {
  display: flex;
  align-items: center;
  min-height: 400px;
  padding: 76px 0 23px;
  background-image: url('../../img/quienes-somos/hero-bg.webp');
  background-position: 0 0;
}
.qs-hero > .container { flex: 1 0 100%; }
.qs-hero__overlay { background-color: rgba(0, 0, 0, .34); }
.qs-hero__content {
  margin-bottom: 30px;
  font-size: 24px;
  font-weight: 500;
  color: #fff;
}
.qs-hero__title { font-size: 50px; font-weight: 800; color: #fff; }

@media (min-width: 768px) and (max-width: 991.98px) { .qs-hero { min-height: 350px; }
}
@media (max-width: 767.98px) {
  .qs-hero { min-height: 300px; }
  .qs-hero__title { font-size: 30px; line-height: 30px; }
}

/* ---------- Somos líderes ---------- */
.qs-about { padding: 77px 0 70px; }
.qs-about__title {
  margin: 0 0 60px;
  font-size: 30px;
  line-height: 35px;
  font-weight: 700;
  color: #3c3b44;
}
.qs-about__text { margin-bottom: 30px; font-size: 20px; line-height: 28px; }

@media (min-width: 768px) and (max-width: 991.98px) {
  .qs-about__title { margin: 30px 0 30px; }
}
@media (max-width: 767.98px) {
  .qs-about { padding: 45px 0 0; }
  .qs-about__title { font-size: 25px; line-height: 30px; }
}

/* ---------- Section titles (orange) ---------- */
.qs-section-title { font-size: 40px; font-weight: 700; color: var(--sr-orange-dark); }
@media (max-width: 767.98px) { .qs-section-title { font-size: 30px; line-height: 30px; }
}

/* ---------- Misión ---------- */
.qs-mission { padding: 60px 0 37px; background-color: #f7f9fb; }
.qs-mission__title { margin-bottom: 20px; }
.qs-mission__quote { margin: 0 0 30px; }
.qs-mission__quote p {
  margin-bottom: .5rem;
  font-size: 22px;
  line-height: 30px;
  font-weight: 400;
}

/* ---------- Historia + cifras ---------- */
.qs-history { padding: 30px 0 50px; background-color: #f7f9fb; }
.qs-history__text { margin-bottom: 30px; line-height: 30px; }
.qs-history__text .qs-section-title { line-height: 1.2; }
.qs-stats__intro { font-size: 18px; }
.qs-stats { padding: 7px 0 9px; }
.qs-stat {
  margin: 0 5px 10px 0;
  padding: 20px;
  border-radius: 5px;
}
.qs-stat--orange { background-color: var(--sr-orange-dark); color: #fff; }
.qs-stat--light { background-color: #d2dae8; }
.qs-stat--narrow { padding: 20px 5px; }
.qs-stat .counter__number {
  font-size: 20px;
  line-height: 18px;
  font-weight: 600;
  color: inherit;
}
.qs-stat .counter__label {
  margin: 10px 10px 20px;
  font-size: 14px;
  line-height: 16px;
}
.qs-stats > div:first-child .counter__label { margin: 10px 0 0; }

@media (min-width: 768px) and (max-width: 991.98px) {
  .qs-stat { margin: 0 10px 20px 0; }
  .qs-stat--narrow { padding: 20px; margin-bottom: 0; }
  .qs-stat--narrow .counter__label { margin: 10px 10px 6px; }
}
@media (max-width: 767.98px) {
  .qs-stat { margin: 0 5px 10px 0; }
  .qs-stat .counter__number { font-size: 30px; }
  .qs-stat .counter__label { margin: 10px 10px 6px; }
}

/* ---------- Soluciones (flipboxes) ---------- */
.qs-solutions { padding: 91px 30px 50px; background-color: #ecf0f5; }
.qs-solutions__title {
  margin: 0 0 65px;
  font-size: 40px;
  line-height: 40px;
  font-weight: 800;
  color: #3c3b44;
  text-align: center;
}
.qs-flip { height: 280px; min-height: 0; color: #fff; }
.qs-flip .flipbox__inner { transition-duration: .6s; transition-timing-function: ease-in-out; }
.qs-flip .flipbox__front,
.qs-flip .flipbox__back { padding: 20px; overflow: hidden; color: #fff; }
.qs-flip .flipbox__front::before,
.qs-flip .flipbox__back::before { content: ""; position: absolute; inset: 0; }
.qs-flip .flipbox__front::before { background-color: rgba(0, 0, 0, .45); }
.qs-flip .flipbox__back::before { background-color: var(--sr-orange-dark); }
.qs-flip .flipbox__front > *,
.qs-flip .flipbox__back > * { position: relative; }
.qs-flip img { width: 70px; height: auto; display: inline-block; }
.qs-flip h3 { margin: 0 0 .5rem; color: #fff; }
.qs-flip p { margin-bottom: 1rem; }
.qs-flip__front--movil { background-image: url('../../img/shared/addon-movil-bg.webp'); }
.qs-flip__front--analytics { background-image: url('../../img/shared/addon-analytics-bg.webp'); }
.qs-flip__front--menu { background-image: url('../../img/shared/addon-menu-digital-bg.webp'); }
.qs-flip__btn {
  --bs-btn-padding-y: 8px;
  --bs-btn-padding-x: 12px;
  --bs-btn-font-size: 16px;
  --bs-btn-line-height: 1.25;
  --bs-btn-color: #fff;
  --bs-btn-bg: #343a40;
  --bs-btn-border-color: #343a40;
  --bs-btn-border-radius: 100px;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #23272b;
  --bs-btn-hover-border-color: #1d2124;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #23272b;
  --bs-btn-active-border-color: #1d2124;
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .qs-solutions { padding: 75px 30px 50px; }
  .qs-flip { height: 230px; margin-bottom: 10px; }
  .qs-flip--analytics { height: 280px; margin-bottom: 0; }
}
@media (max-width: 767.98px) {
  .qs-solutions { padding: 74px 30px 35px; }
  .qs-solutions__title { font-size: 30px; line-height: 30px; }
  .qs-flip { height: 200px; margin-bottom: 10px; }
  .qs-flip--last { margin-bottom: 0; }
}

/* ---------- Distribuidores ---------- */
.qs-dealers { padding: 50px 0 26px; }
.qs-dealers__title {
  margin: 0 0 20px;
  font-size: 40px;
  font-weight: 700;
  color: #3c3b44;
  text-align: center;
}
.dealer-card { margin-bottom: 30px; text-align: center; }
.dealer-card__logo { display: inline-block; margin-bottom: 20px; }
.dealer-card__name { display: block; margin: 0; font-size: 16px; font-weight: 700; color: var(--sr-text); }
.dealer-card__address {
  margin: 5px 0 0;
  font-size: 14px;
  font-weight: 500;
  color: #000;
}
.dealer-card__email {
  display: block;
  margin-top: 5px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(0, 0, 0, .4);
}
.dealer-card__email:hover { color: var(--sr-orange); }
.dealer-card__phone { margin: 10px 0 0; font-size: 14px; color: #000; }

/* ---------- Más que un punto de venta ---------- */
.qs-tagline { padding: 0 30px 50px; background-color: #ecf0f5; }
.qs-tagline__title {
  margin: 80px 0 30px;
  font-weight: 400;
  color: #3c3b44;
  text-align: center;
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .qs-tagline { padding: 75px 30px 50px; }
  .qs-tagline__title { margin: 0 0 30px; }
}
@media (max-width: 767.98px) {
  .qs-tagline { padding: 74px 30px 35px; }
  .qs-tagline__title { margin: 0 0 30px; font-size: 30px; line-height: 30px; }
}