/* ================================================================
   QUIÉNES SOMOS — estilos propios de la página
   Hereda tokens y componentes de main.css (dark power theme).
   Alineada 1:1 con el lenguaje del index final:
   · kicker SIN línea (solo texto), dorado en oscuro / ámbar en claro
   · ritmo claro/oscuro (Misión-Visión y CTA en hueso; resto oscuro)
   · comilla serif en párrafos de apoyo, números sólidos con sombra
   · acentos SOLO dorado/ámbar (sin celeste)
   ================================================================ */

/* ── NAV en páginas interiores ──
   No hay hero con mosaico → el logo del nav vive siempre en su sitio, tamaño
   normal, sin FLIP. El JS del FLIP busca .nav__logo--hidden-hero (que esta
   página NO usa), así que el logo queda estable por sí solo. Aún así fijamos
   el estado por si acaso. */
.page-qs .nav__logo {
  transform: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  margin-top: 0 !important;
}
.page-qs .nav__logo img { height: 44px; }   /* mismo tamaño visual del index scrolleado */
.page-qs .nav__logo-white { display: block; }
.page-qs .nav__logo-color { display: none; }

/* Sobre secciones claras (.nav--on-light, ver main.css) el logo pasa a COLOR:
   el blanco desaparece sobre el hueso. Especificidad ≥ la de las 2 reglas de
   arriba, si no ganan ellas y el logo se queda en blanco. */
@media (max-width: 768px) {
  .page-qs .nav--on-light .nav__logo-white { display: none; }
  .page-qs .nav--on-light .nav__logo-color { display: block; }
}

/* En desktop el logo del index es absolute dentro de la pill; aquí, sin FLIP,
   lo devolvemos a flujo normal para que ocupe su lugar junto al correo. */
@media (min-width: 769px) {
  .page-qs .nav__inner .nav__logo { position: static; margin-top: 0 !important; }
  .page-qs .nav__logo-spacer { display: none; }
}

/* (El estilo de link activo — dorado — vive en main.css para ambas páginas) */

/* En el index, el correo+redes del centro móvil aparecen solo al hacer scroll
   (en el tope el logo grande del FLIP ocupa el centro). Aquí NO hay logo grande,
   así que el bloque central se ve SIEMPRE, también en el tope. */
@media (max-width: 768px) {
  .page-qs .nav__center {
    opacity: 1;
    transform: translate(-50%, -50%);
    pointer-events: auto;
  }
}

/* ================================================================
   TOKENS DE ACENTO / KICKER (reutilizables en la página)
   ================================================================ */
/* Kicker SIN línea (Gonzalo la eliminó de todo el sitio): solo texto. */
.qs-kicker {
  display: inline-flex;
  align-items: center;
  font-size: clamp(0.7rem, 0.85vw, 0.78rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dorado);                 /* dorado sobre oscuro */
  margin-bottom: clamp(1rem, 2.2vw, 1.6rem);
}
.qs-kicker--amber { color: #b47b1e; }    /* ámbar oscuro legible sobre hueso */

.qs-em { color: var(--dorado); }

/* Justificado — directriz de Gonzalo: párrafos justificados en todo */
.qs-prose p,
.qs-valores__sub,
.qs-valor__desc,
.qs-esr__text,
.qs-hero__lead,
.qs-mv__item-text {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 6 3 2;
}

/* ================================================================
   HERO
   ================================================================ */
.qs-hero {
  position: relative;
  min-height: calc(var(--vh-stable, 1dvh) * 100);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(8rem, 16vh, 12rem) clamp(3rem, 8vh, 6rem);
}
.qs-hero__media { position: absolute; inset: 0; z-index: -2; }
.qs-hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 40%;
  /* la foto ya viene mejorada por Gonzalo: no la oscurecemos, solo un toque de vida */
  filter: saturate(1.04);
}
/* Sin velo lateral ni superior (mismo criterio que el hero del index): solo el
   degradado inferior, que sostiene el texto y funde con la sección siguiente. */
.qs-hero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, transparent 0%, transparent 40%, rgba(7,9,15,0.55) 78%, rgba(7,9,15,0.9) 100%);
}
.qs-hero__inner {
  position: relative;
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3.5rem);
}
.qs-hero__kicker {
  display: inline-flex;
  align-items: center;
  font-size: clamp(0.72rem, 0.9vw, 0.8rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dorado);
  margin-bottom: clamp(1rem, 2.4vw, 1.6rem);
}
.qs-hero__title {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-size: clamp(2.6rem, 6.5vw, 5.5rem);
  color: var(--ink-100);
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-wrap: balance;
  max-width: 18ch;
}
.qs-hero__title-em { color: var(--dorado); }   /* redonda, no cursiva (como el index) */
.qs-hero__lead {
  margin-top: clamp(1.25rem, 3vw, 2rem);
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  color: var(--ink-200);
  line-height: 1.7;
  max-width: 54ch;
  text-wrap: pretty;
}
.qs-hero__scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(1rem, 3vh, 2rem);
  transform: translateX(-50%);
  width: 1px; height: clamp(36px, 6vh, 56px);
}
.qs-hero__scroll-line {
  display: block; width: 1px; height: 100%;
  background: linear-gradient(180deg, transparent, var(--dorado));
  animation: qs-scroll 2s var(--ease-io) infinite;
  transform-origin: top;
}
@keyframes qs-scroll {
  0%   { transform: scaleY(0); opacity: 0; }
  40%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(100%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .qs-hero__scroll-line { animation: none; opacity: 0.6; }
}

/* ================================================================
   HISTORIA / MANIFIESTO (oscuro)
   ================================================================ */
.qs-historia {
  position: relative;
  background: var(--bg);
  padding-block: clamp(4.5rem, 9vw, 8rem);
  overflow: hidden;
  isolation: isolate;
}
/* Aurora ámbar (mismo patrón que Clientes en el index): dos capas de manchas
   difusas que respiran en sentidos opuestos. Muy tenue — se siente el calor,
   no se distingue la mancha. */
.qs-historia::before,
.qs-historia::after {
  content: '';
  position: absolute;
  top: 0;
  left: -20%;
  width: 140%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  filter: blur(28px);
  will-change: transform;
  transform: translateZ(0);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
}
.qs-historia::before {
  background:
    radial-gradient(46% 48% at 26% 26%, rgba(251,201,90,0.20) 0%, transparent 70%),
    radial-gradient(50% 46% at 20% 64%, rgba(251,201,90,0.12) 0%, transparent 72%);
  animation: aurora-drift-a 26s ease-in-out infinite alternate;
}
.qs-historia::after {
  background:
    radial-gradient(46% 46% at 74% 22%, rgba(240,164,66,0.16) 0%, transparent 68%),
    radial-gradient(48% 48% at 80% 60%, rgba(240,164,66,0.11) 0%, transparent 70%);
  animation: aurora-drift-b 34s ease-in-out infinite alternate;
}
/* Móvil: aurora ESTÁTICA (animar blur sobre área grande lagea en GPU móvil) */
@media (max-width: 768px) {
  .qs-historia::before,
  .qs-historia::after {
    animation: none;
    will-change: auto;
    filter: blur(30px);
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .qs-historia::before,
  .qs-historia::after { animation: none; }
}
.qs-historia__inner {
  position: relative;
  z-index: 1;   /* por encima de la aurora */
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.qs-historia__title {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-size: clamp(2.2rem, 4.6vw, 3.75rem);
  color: var(--ink-100);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.qs-prose {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  max-width: 62ch;
}
.qs-prose p { color: var(--ink-200); font-size: clamp(0.96rem, 1.1vw, 1.05rem); line-height: 1.8; }
.qs-prose strong { color: var(--ink-100); font-weight: 600; }
.qs-historia__certs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}
.qs-cert {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-200);
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--border-hi);
  border-radius: 999px;
  transition: border-color 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .qs-cert:hover { border-color: var(--dorado); color: var(--dorado); }
}

/* Visual lateral */
.qs-historia__visual {
  position: relative;
  /* la foto es cuadrada; limitamos su ancho para que no se vea inmensa en web y
     la centramos en su columna */
  width: 100%;
  max-width: clamp(360px, 40vw, 540px);
  margin-inline: auto;
}
.qs-historia__frame {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  box-shadow: 0 26px 60px -26px rgba(0,0,0,0.7);
}
.qs-historia__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.06) contrast(1.03);
}
/* Variante VIDEO: el Short de YouTube es vertical (9:16), no cuadrado.
   Se acota el alto para que no dispare la altura de la sección en desktop. */
.qs-historia__frame--video {
  aspect-ratio: 9 / 16;
  max-height: 620px;
  margin-inline: auto;
  background: #000;
}
.qs-historia__frame--video iframe,
.qs-historia__frame--video .qs-video__player {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
  display: block;
}

/* ── PORTADA PROPIA del video (fachada) ──
   Fondo blanco + logo a color. El iframe de YouTube solo se inyecta al hacer
   clic (ver el script al final del PHP): controlamos la portada y no cargamos
   el player de YouTube en cada visita. */
.qs-video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 3vw, 2rem);
  background: #fff;
  border: 0;
  cursor: pointer;
  /* Padding inferior extra: el badge "17+" flota abajo-izquierda y se encimaba
     con el label. Así el contenido de la portada queda por encima de él. */
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.5rem, 4vw, 2.5rem) clamp(4.5rem, 11vw, 6rem);
  transition: background 0.3s var(--ease-out);
}
/* El logo es CUADRADO (viewBox 1000×1000) y su wordmark llega hasta el borde:
   se limita por ancho Y se deja aire para que no se corte "FIXUM". */
/* El logo es CUADRADO (viewBox 1000×1000). Caja cuadrada + `contain` → se encaja
   completo, sin recortes.
   ⚠️ La regla `.qs-historia__frame img` (para la FOTO) impone `object-fit:cover`
   y GANA por especificidad: recortaba el logo ("FIXUM" salía como "IXU"). Por eso
   este selector se cualifica con el marco, para pesar más. */
.qs-historia__frame .qs-video__logo {
  width: min(58%, 180px);
  aspect-ratio: 1;
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
  filter: none;                  /* la foto lleva saturate/contrast; el logo no */
}
.qs-video__play {
  display: grid;
  place-items: center;
  width: clamp(58px, 16%, 76px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--dorado);
  box-shadow: 0 14px 34px -10px rgba(251,201,90,0.6);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.qs-video__play svg {
  width: 42%; height: 42%;
  fill: #07090f;
  margin-left: 8%;            /* centra ópticamente el triángulo en el círculo */
}
.qs-video__label {
  font-size: clamp(0.72rem, 0.9vw, 0.8rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #4a5470;
}
@media (hover: hover) and (pointer: fine) {
  .qs-video:hover .qs-video__play {
    transform: scale(1.08);
    box-shadow: 0 18px 42px -10px rgba(251,201,90,0.75);
  }
}
.qs-video:active .qs-video__play { transform: scale(0.96); }
@media (prefers-reduced-motion: reduce) {
  .qs-video__play { transition: none; }
}
.qs-historia__frame--video iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
  display: block;
}
.qs-historia__frame::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(7,9,15,0.55));
}
/* ⚠️ Ese velo degradado (pensado para fundir la FOTO) cubre el iframe con
   inset:0 y SE COME EL CLIC del botón de play → el Short no se reproducía.
   Sobre el video no hace falta velo. Va DESPUÉS de la regla de arriba: misma
   especificidad, gana la última. */
.qs-historia__frame--video::after { content: none; }
.qs-historia__badge {
  position: absolute;
  left: clamp(-0.5rem, -1vw, -1.25rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  display: flex;
  flex-direction: column;
  align-items: center;          /* centra el "17+" y su etiqueta en el badge */
  text-align: center;
  background: var(--dorado);
  color: #07090f;
  padding: clamp(0.9rem, 1.6vw, 1.25rem) clamp(1.1rem, 2vw, 1.6rem);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.45);
  /* Al reproducir el video el badge se oculta (JS pone data-playing="1"). */
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.qs-historia__visual[data-playing="1"] .qs-historia__badge {
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  pointer-events: none;
}
.qs-historia__badge-num {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  line-height: 1;
}
.qs-historia__badge-num span { font-size: 0.6em; }
.qs-historia__badge-label {
  font-size: clamp(0.62rem, 0.85vw, 0.72rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.25;
  margin-top: 0.3rem;
}

/* Cifras de identidad */
.qs-cifras {
  position: relative;
  z-index: 1;   /* por encima de la aurora de .qs-historia */
  width: 100%;
  max-width: 1600px;
  margin: clamp(3rem, 6vw, 5rem) auto 0;
  padding-inline: clamp(1.25rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 2rem);
}
.qs-cifras::before {
  content: '';
  grid-column: 1 / -1;
  height: 1px;
  background: var(--border);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
/* Centradas en su celda: los label tienen distinto nº de líneas ("Divisiones
   especializadas" ocupa 2) y alineadas arriba las cifras se descuadraban. */
.qs-cifra {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 0.35rem;
}
.qs-cifra__num {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  color: var(--dorado);
  line-height: 1;
  letter-spacing: -0.02em;
}
.qs-cifra__label {
  font-size: clamp(0.74rem, 0.95vw, 0.86rem);
  color: var(--ink-400);
  text-wrap: balance;
}

/* ================================================================
   FILOSOFÍA — MISIÓN Y VISIÓN (tema CLARO, hueso — como Divisiones)
   ================================================================ */
.qs-mv {
  position: relative;
  /* Tema claro (mismos tokens que las secciones claras del index) */
  --mv-paper:  #f5f3ef;
  --mv-ink:    #12172a;
  --mv-ink-2:  #4a5470;
  --mv-line:   rgba(18,23,42,0.12);
  --mv-amber:  #c98a1e;
  background: var(--mv-paper);
  padding-block: clamp(4.5rem, 9vw, 8rem);
  overflow: hidden;
  isolation: isolate;
}
/* Glow ámbar sutil de ambiente sobre el hueso */
.qs-mv__glow {
  position: absolute;
  left: -10%;
  top: 18%;
  width: min(62vw, 760px);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(240,164,66,0.16), transparent 66%);
  pointer-events: none;
  z-index: 0;
}
.qs-mv__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

/* Columna intro — sticky en desktop para que acompañe el scroll */
.qs-mv__intro {
  position: sticky;
  top: clamp(5rem, 12vh, 8rem);
}
.qs-mv__title {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-size: clamp(2.3rem, 4.8vw, 3.85rem);
  color: var(--mv-ink);
  line-height: 1.0;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}
.qs-mv__title-em { color: var(--mv-amber); }
.qs-mv__intro-text {
  color: var(--mv-ink-2);
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.75;
  max-width: 38ch;
  text-wrap: pretty;
}

/* Bloques editoriales — número serif gigante ámbar + texto, separados por línea */
.qs-mv__items { display: flex; flex-direction: column; }
.qs-mv__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
  padding-block: clamp(2rem, 4vw, 3.25rem);
  position: relative;
}
.qs-mv__item + .qs-mv__item { border-top: 1px solid var(--mv-line); }
.qs-mv__item:first-child { padding-top: 0.5rem; }
/* Número sólido ámbar con sombra suave (no outline: patrón fijado del sitio) */
.qs-mv__item-mark {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2.75rem, 6vw, 5rem);
  line-height: 0.85;
  color: var(--mv-amber);
  letter-spacing: -0.03em;
  transition: color 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.qs-mv__item-title {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  color: var(--mv-ink);
  line-height: 1;
  margin-bottom: 0.35rem;
}
.qs-mv__item-tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mv-amber);
  margin-bottom: clamp(0.9rem, 1.8vw, 1.25rem);
}
.qs-mv__item-text {
  color: var(--mv-ink-2);
  font-size: clamp(0.96rem, 1.15vw, 1.08rem);
  line-height: 1.8;
  max-width: 58ch;
}
@media (hover: hover) and (pointer: fine) {
  .qs-mv__item:hover .qs-mv__item-mark { color: #a8720f; transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .qs-mv__item-mark { transition: none; }
}

/* ================================================================
   VALORES (oscuro, con aurora ámbar sutil como Proyectos)
   ================================================================ */
.qs-valores {
  position: relative;
  background: var(--bg);
  padding-block: clamp(4.5rem, 9vw, 8rem);
  overflow: hidden;
  isolation: isolate;
}
/* Aurora ámbar sutil tras el encabezado, se desvanece hacia la lista */
.qs-valores::before {
  content: '';
  position: absolute;
  top: 0; left: -20%;
  width: 140%; height: 100%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(40% 34% at 26% 18%, rgba(251,201,90,0.20) 0%, transparent 64%),
    radial-gradient(38% 32% at 78% 14%, rgba(240,164,66,0.14) 0%, transparent 62%);
  filter: blur(14px);
  will-change: transform;
  transform: translateZ(0);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 32%, transparent 60%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 32%, transparent 60%);
  animation: aurora-drift-a 18s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  .qs-valores::before { animation: none; }
}
@media (max-width: 768px) {
  .qs-valores::before { animation: none; will-change: auto; transform: none; }
}
.qs-valores__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3.5rem);
}

/* Cabecera asimétrica: título izq · párrafo con comilla der (patrón del index) */
.qs-valores__head {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: end;
  gap: clamp(1.5rem, 4vw, 4rem);
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.qs-valores__title {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-size: clamp(2.4rem, 5.5vw, 4.25rem);
  color: var(--ink-100);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.qs-valores__sub {
  position: relative;
  font-size: clamp(0.95rem, 1.1vw, 1.1rem);
  color: var(--ink-200);
  line-height: 1.7;
  max-width: 42ch;
  text-wrap: pretty;
  padding-bottom: 0.4em;
}
.qs-valores__sub::before {
  content: '\201C';
  display: block;
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  line-height: 0.6;
  color: var(--dorado);
  margin-bottom: 0.2rem;
}

.qs-valores__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(2rem, 4vw, 4rem);
  row-gap: 0;
}
.qs-valor {
  display: flex;
  gap: clamp(0.9rem, 1.6vw, 1.4rem);
  align-items: flex-start;
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--border);
  transition: border-color 0.4s var(--ease-out);
}
/* Número sólido dorado con sombra (no outline) */
.qs-valor__num {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  line-height: 1;
  color: var(--dorado);
  letter-spacing: -0.02em;
  flex-shrink: 0;
  padding-top: 0.1em;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
  transition: color 0.35s var(--ease-out), transform 0.45s var(--ease-out-quint, cubic-bezier(0.22,1,0.36,1));
}
.qs-valor__name {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-size: clamp(1.2rem, 1.7vw, 1.55rem);
  color: var(--ink-100);
  line-height: 1.1;
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
  transition: color 0.3s var(--ease-out);
}
.qs-valor__desc {
  color: var(--ink-200);
  font-size: clamp(0.88rem, 1vw, 0.96rem);
  line-height: 1.7;
}
@media (hover: hover) and (pointer: fine) {
  .qs-valor:hover { border-color: rgba(251,201,90,0.4); }
  .qs-valor:hover .qs-valor__num { color: #ffd06e; transform: translateY(-2px); }
  .qs-valor:hover .qs-valor__name { color: var(--dorado); }
}
@media (prefers-reduced-motion: reduce) {
  .qs-valor, .qs-valor__num, .qs-valor__name { transition: none; }
}

/* ================================================================
   ESR EN ACCIÓN (oscuro, foto de fondo + embed IG en marco)
   ================================================================ */
.qs-esr {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(4.5rem, 10vw, 9rem);
}
.qs-esr__media { position: absolute; inset: 0; z-index: -2; }
.qs-esr__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 35%;
  filter: saturate(1.05);
}
.qs-esr__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(7,9,15,0.95) 0%, rgba(7,9,15,0.82) 45%, rgba(7,9,15,0.5) 100%),
    linear-gradient(180deg, rgba(7,9,15,0.55), rgba(7,9,15,0.7));
}
.qs-esr__inner {
  position: relative;
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.qs-esr__card { max-width: 56ch; }
.qs-esr__title {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  color: var(--ink-100);
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}
.qs-esr__text {
  color: var(--ink-200);
  font-size: clamp(0.96rem, 1.15vw, 1.1rem);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.qs-esr__text strong { color: var(--ink-100); font-weight: 600; }
.qs-esr__sign {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  color: var(--dorado);
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
.qs-esr__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.5rem;
  border: 1px solid var(--border-hi);
  border-radius: 999px;
  color: var(--ink-100);
  font-size: 0.88rem;
  font-weight: 600;
  transition: border-color 0.28s var(--ease-out), background 0.28s var(--ease-out), color 0.28s var(--ease-out);
}
.qs-esr__btn svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.qs-esr__btn:active { background: rgba(225,48,108,0.18); }
@media (hover: hover) and (pointer: fine) {
  .qs-esr__btn:hover {
    border-color: var(--red, var(--dorado));
    background: color-mix(in srgb, var(--red, var(--dorado)) 14%, transparent);
    color: #fff;
  }
}

/* Embed de Instagram — marco oscuro con barra propia (patrón .redes__embed del index) */
.qs-esr__embed {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 440px;
  margin-inline: auto;
  border-radius: 18px;
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--border-hi);
  box-shadow: 0 24px 60px -24px rgba(0,0,0,0.75);
}
.qs-esr__embed-bar {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: clamp(0.85rem, 1.6vw, 1.15rem) clamp(1rem, 2vw, 1.4rem);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(90deg, rgba(225,48,108,0.10), transparent 70%);
}
.qs-esr__embed-icon {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: 11px;
  color: #fff;
  /* Video de YouTube (acción de responsabilidad social) → dorado del sitio,
     no el gradiente de Instagram. El SVG de YouTube es de RELLENO. */
  background: linear-gradient(135deg, var(--dorado), var(--naranja));
}
.qs-esr__embed-icon svg { width: 22px; height: 22px; fill: #12172a; stroke: none; }
.qs-esr__embed-meta { display: flex; flex-direction: column; gap: 0.1rem; margin-right: auto; }
.qs-esr__embed-name { font-weight: 700; font-size: 0.95rem; color: var(--ink-100); }
.qs-esr__embed-label { font-size: 0.72rem; color: var(--ink-400); letter-spacing: 0.02em; }
.qs-esr__embed-follow {
  flex-shrink: 0;
  padding: 0.5rem 1.1rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #12172a;
  background: var(--dorado);
  transition: filter 0.2s, transform 0.15s var(--ease-out);
}
.qs-esr__embed-follow:hover { filter: brightness(0.9); }
.qs-esr__embed-follow:active { transform: scale(0.96); }
/* el iframe de Meta trae fondo blanco (lo controla Meta); lo acotamos en el marco */
.qs-esr__embed-frame {
  position: relative;
  background: #fff;
  min-height: clamp(440px, 52vw, 560px);
}
.qs-esr__embed-frame iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Variante VIDEO (Short 9:16): el player es vertical → el marco enmarca el
   Short centrado sobre fondo oscuro, con la portada propia (.qs-video). */
/* 🚨 iOS/Safari: `display:grid` + `aspect-ratio` + `place-items:stretch` calcula
   mal el ancho de la celda y el video se pegaba a la IZQUIERDA (solo en iPhone;
   en Chrome/Android se veía centrado). Se resuelve con posicionamiento absoluto
   dentro de un contenedor relativo — el mismo patrón que ya usa el mapa. */
.qs-esr__embed-frame--video {
  position: relative;
  background: var(--bg);
  /* min-height REAL (como el marco base). NO usar `aspect-ratio` + `min-height:0`:
     en iOS el marco colapsaba a 0 de ancho y el video se iba a la izquierda. */
  min-height: clamp(440px, 62vw, 620px);
  overflow: hidden;
}
.qs-esr__embed-frame--video .qs-video,
.qs-esr__embed-frame--video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 960px) {
  .qs-valores__list { grid-template-columns: repeat(2, 1fr); column-gap: clamp(1.5rem, 4vw, 3rem); }
}

@media (max-width: 900px) {
  .qs-valores__head { grid-template-columns: 1fr; align-items: start; gap: clamp(1rem, 4vw, 1.5rem); }
  .qs-valores__sub { padding-bottom: 0; }
}

@media (max-width: 820px) {
  .qs-historia__inner { grid-template-columns: 1fr; gap: clamp(2.5rem, 6vw, 3.5rem); }
  /* apilado en móvil: la foto ocupa un ancho cómodo, centrada */
  .qs-historia__visual { max-width: min(420px, 82vw); }
  .qs-mv__inner { grid-template-columns: 1fr; gap: clamp(2rem, 6vw, 3rem); }
  .qs-mv__intro { position: static; }
  .qs-cifras { grid-template-columns: repeat(2, 1fr); row-gap: clamp(1.5rem, 4vw, 2rem); }
  .qs-esr__inner { grid-template-columns: 1fr; gap: clamp(2rem, 6vw, 2.75rem); }
  .qs-esr__card { max-width: none; }
  .qs-esr__embed { margin-inline: 0; }
  /* En 1 columna el overlay direccional deja el embed sobre zona clara → uniformar */
  .qs-esr__veil {
    background: linear-gradient(180deg, rgba(7,9,15,0.84) 0%, rgba(7,9,15,0.92) 100%);
  }
}

@media (max-width: 600px) {
  .qs-hero { min-height: calc(var(--vh-stable, 1dvh) * 100); }
  /* Móvil: sin velo arriba. Solo el pie, para que el lead se lea sobre la foto. */
  .qs-hero__veil {
    background:
      linear-gradient(180deg, transparent 0%, transparent 42%, rgba(7,9,15,0.6) 74%, rgba(7,9,15,0.94) 100%);
  }
  .qs-valores__list { grid-template-columns: 1fr; }
  /* En móvil la lista a 1 columna: el primer item no necesita borde superior */
  .qs-valor:first-child { border-top: none; padding-top: 0; }
  .qs-historia__badge { left: clamp(0.75rem, 4vw, 1.25rem); }
}

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

/* ── Fix overflow móvil: los reveal direccionales (translateX) desbordan en
   pantallas estrechas. En móvil el reveal entra solo en vertical. ── */
@media (max-width: 820px) {
  .page-qs { overflow-x: clip; }
  .page-qs .will-reveal[data-rv="left"],
  .page-qs .will-reveal[data-rv="right"] {
    transform: translateY(26px);
  }
  .page-qs .will-reveal[data-rv="left"].revealed,
  .page-qs .will-reveal[data-rv="right"].revealed {
    transform: none;
  }
}

/* ============================================================
   MENSAJE DE LA DIRECCIÓN (.qs-msg) — sección oscura, solemne.
   Cita grande centrada + aurora ámbar. Diseño propio para no
   leerse como continuación de Historia (que también es oscura).
   ============================================================ */
.qs-msg {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--bg);
  padding: clamp(4rem, 9vw, 7.5rem) 0;
}
/* Aurora ámbar: cubre toda la sección y se desvanece a los bordes. */
.qs-msg__aurora {
  position: absolute;
  inset: -20% -10% -10%;
  z-index: 0;
  background:
    radial-gradient(60% 55% at 50% 12%, rgba(251, 201, 90, 0.20), transparent 70%),
    radial-gradient(45% 40% at 78% 88%, rgba(240, 164, 66, 0.13), transparent 72%);
  filter: blur(14px);
  transform: translateZ(0);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 82%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 82%, transparent);
  animation: qs-msg-drift 22s ease-in-out infinite alternate;
}
@keyframes qs-msg-drift {
  from { transform: translate3d(-3%, 0, 0) scale(1); }
  to   { transform: translate3d(4%, 2%, 0) scale(1.06); }
}
/* Layout 2 COLUMNAS en desktop: izq (kicker+título+firma) · der (cita). */
.qs-msg__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}
/* Columna izquierda */
.qs-msg__aside { align-self: center; }
.qs-msg__kicker { color: var(--dorado); margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.qs-msg__title {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.9rem, 3vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--ink-100);
  margin: 0;
}
.qs-msg__title .qs-em { display: block; color: var(--dorado); margin-top: 0.15em; }

/* Firma: línea corta dorada + nombre serif + rol. */
.qs-msg__sign {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.qs-msg__sign-line {
  width: clamp(2rem, 6vw, 3.5rem);
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--dorado));
  border-radius: 2px;
}
.qs-msg__sign-txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.25;
}
.qs-msg__sign-name {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: var(--ink-100);
}
.qs-msg__sign-role {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dorado);
}

/* Columna derecha: la cita. Comilla serif dorada arriba. */
.qs-msg__quote {
  position: relative;
  margin: 0;
  max-width: 60ch;
  padding: 0 0 0 clamp(1.5rem, 2.5vw, 2.25rem);
  border: 0;
  border-left: 2px solid rgba(251, 201, 90, 0.35);
}
.qs-msg__quote::before {
  content: "\201C";
  position: absolute;
  top: -0.25em;
  left: clamp(0.6rem, 1.4vw, 1rem);
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: clamp(3rem, 6vw, 4.5rem);
  line-height: 0.7;
  color: var(--dorado);
  opacity: 0.4;
}
.qs-msg__quote p {
  margin: 0 0 1.1rem;
  color: var(--ink-200);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.75;
  text-align: justify;
  hyphens: auto;
}
.qs-msg__quote p:first-child { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.qs-msg__quote p:last-child { margin-bottom: 0; }
.qs-msg__strong {
  color: var(--ink-100) !important;
  font-weight: 600;
}

/* Tablet/móvil: apila (título arriba, cita debajo). */
@media (max-width: 900px) {
  .qs-msg__inner { grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 2.75rem); }
  .qs-msg__quote { border-left: none; padding-left: 0; }
  .qs-msg__quote::before { position: static; display: block; margin-bottom: 0.25rem; }
  .qs-msg__quote p:first-child { margin-top: 0; }
  .qs-msg__sign { margin-top: 1.75rem; }
}
@media (max-width: 768px) {
  .qs-msg__aurora { animation: none; will-change: auto; transform: none; }
}

/* ============================================================
   HISTORIA en TEMA CLARO (.qs-historia--light) — fondo hueso.
   Repinta todo el contenido a tokens claros (regla del sitio: en
   claro nunca --dorado/--ink-* directos). La aurora se baja para no
   manchar el papel. Lleva data-nav-light en el HTML.
   ============================================================ */
.qs-historia--light { background: #f5f3ef; }
/* Aurora ámbar MÁS TENUE sobre hueso (si no, mancha). */
.qs-historia--light::before {
  background:
    radial-gradient(46% 48% at 26% 26%, rgba(201,138,30,0.10) 0%, transparent 70%),
    radial-gradient(50% 46% at 20% 64%, rgba(201,138,30,0.06) 0%, transparent 72%);
}
.qs-historia--light::after {
  background:
    radial-gradient(46% 46% at 74% 22%, rgba(180,123,30,0.08) 0%, transparent 68%),
    radial-gradient(48% 48% at 80% 60%, rgba(180,123,30,0.05) 0%, transparent 70%);
}
/* Kicker: ámbar oscuro legible sobre hueso. */
.qs-historia--light .qs-kicker { color: #b47b1e; }
/* Título: tinta oscura; la 2ª línea (.qs-em) en ámbar oscuro. */
.qs-historia--light .qs-historia__title { color: #12172a; }
.qs-historia--light .qs-historia__title .qs-em { color: #c98a1e; }
/* Párrafos y strong. */
.qs-historia--light .qs-prose p { color: #4a5470; }
.qs-historia--light .qs-prose strong { color: #12172a; }
/* Chips de certificaciones: borde y texto oscuros. */
.qs-historia--light .qs-cert {
  color: #4a5470;
  border-color: rgba(18,23,42,0.18);
}
@media (hover: hover) and (pointer: fine) {
  .qs-historia--light .qs-cert:hover { border-color: #c98a1e; color: #c98a1e; }
}
/* Cifras: número ámbar, label apoyo, y la línea separadora oscura. */
.qs-historia--light .qs-cifras::before { background: rgba(18,23,42,0.12); }
.qs-historia--light .qs-cifra__num { color: #c98a1e; }
.qs-historia--light .qs-cifra__label { color: #4a5470; }