/* ============================================================
   QUIÉNES SOMOS (ID 87, /quienes-somos/) — CSS POR-PÁGINA (nativo, flip jun-2026).
   PDF de diseño = "Sobre Nosotros copia.pdf"
   (recursos/Sobre Nosotros-20260504T135835Z-3-001/Sobre Nosotros/).
   Base compartida = ayc-base.css (TODOS los font-size son var(--fs-*), NUNCA literal)
   + native/servicios-shared.css (hero $="-hero-sec" y CTA $="-cta-sec" se REUSAN por sufijo).
   Aquí SOLO lo único de QS. Scope: .ayc-native.ayc-native + data-id. Sin literales de font-size.
   Los agentes del workflow rellenan cada bloque tras medir vs el PDF.
   ============================================================ */

/* 1) HERO (qs-hero-sec) — reusa el hero compartido ($="-hero-sec"): el LOOK (divider verde, H1
      blanco --fs-page-hero, subtítulo H2 --fs-hero-desc, overlay navy ::before, disclaimer Myriad ⚠)
      lo da servicios-shared.css. Aquí: foto real del equipo (qs-hero.jpg via _elementor_data) +
      la GEOMETRÍA de la banda. Nota: en servicios-shared.css la PRIMERA regla del bloque hero (la
      .ayc-native.ayc-native[data-id$="-hero-sec"]{} "pelada", L30) NO entra en el CSSOM de Chromium
      (la suelta el parser por ser la 1ª regla tras el comentario; las reglas DESCENDIENTES sí entran
      y dan el look). Por eso re-afirmamos AQUÍ solo el BOX de la sección (min-height/padding/flex
      flex-end → contenido abajo-izq como el recorte qs-crops/hero.png), sin re-estilizar nada del
      contenido. Especificidad 0,3,1 (clase doblada + [data-id$]) gana a .e-con (0,1,0) y al bridge
      .ayc-native{padding:0} (0,1,0) sin !important. */
.ayc-native.ayc-native[data-id="qs-hero-sec"] {
  position: relative;
  min-height: 520px;   /* 2026-06-24 PDF AJUSTES QS1: "este banner está muy largo, lo ideal es que quede
                          del tamaño del pantallazo" → 760→520 (banda hero normal). Texto sigue anclado
                          abajo (flex-end); verificar que la foto del equipo no quede recortada. */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 95px;   /* el disclaimer queda sobre el solape (-8px) de la banda intro */
  overflow: hidden;
}

/* ----------------------------------------------------------------
   RONDA 2 — OVERRIDES POR-PÁGINA del hero de QS (el crop qs-crops/hero.png
   difiere del hero compartido de servicios). El hero de QS es BOXED:
   sección [data-id="qs-hero-sec"] > .e-con-boxed [data-id="qs-hero-inner"]
   > .e-con-inner. Por eso el shared `[data-id$="-hero-sec"] > .e-con-inner`
   (hijo DIRECTO) NO entra aquí: el flex/alineación viven en el inner del
   boxed. Cerramos 5 gaps medidos vs el crop:
   (1) H1 VERDE de marca (crop = #9dc41a) — el shared lo pone blanco.
   (2) Bloque CENTRADO (H1+subtítulo) — el shared lo pone a la izquierda.
   (3) Overlay navy MÁS LIGERO — la foto debe leerse brillante.
   (4) Divider verde OCULTO — el crop no muestra barra; el H1 verde ES el acento.
   (5) Tras centrar, el bloque queda abajo-centro como el crop (flex-end ya lo da).
   SIN tocar font-size: se mantienen los tokens del shared (--fs-page-hero / --fs-hero-desc).
   ---------------------------------------------------------------- */

/* (1) H1 VERDE de marca. RE-VERIFICADO vs PDF (jun-2026): el titular "Somos un equipo humano"
   (H1) ES VERDE lima #9dc41a, igual que "Estados Unidos" del subtítulo. El subtítulo h2 va en
   BLANCO (con "Estados Unidos" verde). La ronda QA previa lo puso blanco POR ERROR (el PDF lo
   muestra verde, confirmado con crop + auditor). */
.ayc-native.ayc-native[data-id="qs-hero-sec"] h1.elementor-heading-title {
  color: #FFFFFF;                       /* título UNIFICADO: blanco por defecto... */
  max-width: 1240px;                    /* RONDA 8: ensanchado (1080→1240) → a 56px el título envuelve a
                                          3 líneas (= el PDF: "Somos un equipo humano" / "que acompaña a
                                          personas y empresas" / "a construir su camino en Estados Unidos";
                                          línea más ancha del diseño = 1138px). Regla skill: line-count por
                                          WIDTH, no <br>. El cliente pidió "más ancho". */
  margin-left: auto; margin-right: auto;
}
.ayc-native.ayc-native[data-id="qs-hero-sec"] h1 .qs-h-green {
  color: var(--ayc-green);              /* ...y verde SOLO en "Somos un equipo humano" y "Estados Unidos" */
}

/* (2) CENTRADO. El bloque vive en el .e-con-inner del boxed hijo; centramos
   ahí (align-items + text-align) y forzamos text-align center en H1/H2.
   El shared centra/iza en su propio `> .e-con-inner` (que NO existe como hijo
   directo aquí), así que esto no compite con !important: con 0,3,0 basta. */
.ayc-native.ayc-native[data-id="qs-hero-sec"] .e-con-inner {
  align-items: center;
  text-align: center;
}
.ayc-native.ayc-native[data-id="qs-hero-sec"] h1.elementor-heading-title,
.ayc-native.ayc-native[data-id="qs-hero-sec"] h2.elementor-heading-title {
  text-align: center;
  width: 100%;
}

/* (6) HERO — título principal a tamaño HERO (cliente jun-2026, ronda 2): el bloque continuo
   ("Somos un equipo humano" verde + "que acompaña… Estados Unidos" blanco) debe leerse como TÍTULO
   PRINCIPAL, igual que el H1 de las demás páginas (FAQ/Servicios/Ayuda). Antes se unificó a --fs-h1
   (44) y el cliente lo veía a "tamaño de subtítulo" → se sube a --fs-page-hero (56), el token de hero
   transversal. NO es literal: usa la escala centralizada. */
.ayc-native.ayc-native[data-id="qs-hero-sec"] h1.elementor-heading-title,
.ayc-native.ayc-native[data-id="qs-hero-sec"] h2.elementor-heading-title {
  font-size: var(--fs-page-hero) !important;  /* 56 = título principal (antes 44) */
  font-weight: 700 !important;            /* bold real */
  font-family: var(--ayc-font-head) !important;
  line-height: 1.18 !important;
}

/* (3) Overlay navy MÁS LIGERO: el shared usa un diagonal denso (.78→.66→.45)
   con opacity:1 !important. Lo aligeramos (≈.45→.30→.10) para que la foto del
   equipo lea brillante como el crop, conservando SOLO una banda inferior sutil
   para el contraste del texto (que ahora va abajo-centro). Necesita !important
   porque el shared lo trae con !important. Mismo selector $= → mi spec por
   [data-id=] (0,3,0) es mayor (shared 0,2,0). */
.ayc-native.ayc-native[data-id="qs-hero-sec"]::before {
  /* Filtro azul de marca CANÓNICO (unificado 2026-06-23) — antes muy tenue
     (la foto stock se veía cruda en el centro). Igual que Contacto/compartido. */
  background: linear-gradient(180deg,
      rgba(0,73,116,0.50) 0%,
      rgba(30,39,81,0.70) 100%) !important;
}

/* (4) Divider verde OCULTO — el crop no muestra barra (el H1 verde es el acento). */
.ayc-native.ayc-native[data-id="qs-hero-sec"] .elementor-widget-divider {
  display: none;
}

/* 2) INTRO (qs-intro-sec) — texto-imagen intercalados; foto compuesta con BORDE VERDE (asset Recurso 2).
      Tipografía = tokens base (var(--fs-*)). Medido vs qs-crops/intro.png @1440. */

/* Row real: el flex vive en .e-con-inner (gotcha Elementor). servicios-shared fuerza
   column en [data-id$="-intro-sec"] > .e-con-boxed > .e-con-inner (0,5,0) → ganarle con (0,6,0). */
.ayc-native.ayc-native[data-id="qs-intro-sec"] > .e-con-boxed.qs-intro-grid > .e-con-inner {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}
/* QS NO usa la tarjeta gris del recipe de servicios: fondo blanco, sin radio.
   servicios-shared pinta .e-con-boxed gris+radio 20 (0,5,0) → neutralizar con (0,6,0). */
.ayc-native.ayc-native[data-id="qs-intro-sec"] > .e-con-boxed.qs-intro-grid {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

/* Columnas: imagen ~46%, texto ~54% (proporción del crop). */
.ayc-native.ayc-native .qs-intro-figcol { flex: 0 0 46%; max-width: 46%; }
.ayc-native.ayc-native .qs-intro-txtcol { flex: 0 0 54%; max-width: 54%; }

/* La foto compuesta (Recurso 2: 2 fotos, borde verde en la superior-izq ya incrustado). */
.ayc-native.ayc-native .qs-intro-figure img {
  width: 100%;
  height: auto;
  max-width: 540px;
  display: block;
}
.ayc-native.ayc-native .qs-intro-figure .elementor-widget-container { line-height: 0; }

/* Texto: párrafos a cuerpo base, IZQUIERDA (el crop es ragged-right), color de marca.
   servicios-shared centra el texto del intro (0,4,1) → izquierda con (0,5,1). */
.ayc-native.ayc-native[data-id="qs-intro-sec"] .qs-intro-txtcol .elementor-widget-text-editor p {
  font-size: var(--fs-body);
  line-height: 1.55;
  margin: 0;
  color: var(--ayc-muted); /* cuerpo del intro en gris-teal muted (diseño); el lead y las negritas van navy */
  text-align: left;
}
.ayc-native.ayc-native .qs-intro-txtcol .elementor-widget-text-editor p strong { font-weight: 700; color: var(--ayc-navy); } /* frases clave en navy sobre el cuerpo muted */

/* LEAD/STATEMENT (último <p>, widget qs-intro-text2 con clase .qs-intro-lead): el PDF (qs-crops/intro.png)
   lo muestra DIFERENCIADO del cuerpo — NAVY BOLD (peso 700, Futura Bold) y un escalón MÁS GRANDE que el
   cuerpo (subtítulo/lead). Se usa el token de subtítulo --fs-h3 (26) — paso "lead" de la escala, claramente
   > body (--fs-body=21), SIN literal por página ni sub-escala nueva. Color navy PLENO (es el statement,
   no se atenúa). Sube spec a (0,5,1): la regla de cuerpo de arriba (0,4,1) gobierna font-size/weight de
   TODOS los <p> del txtcol, así que el lead la bate por especificidad. NO se parte el texto. */
.ayc-native.ayc-native[data-id="qs-intro-sec"] .qs-intro-txtcol .qs-intro-lead .elementor-widget-text-editor p,
.ayc-native.ayc-native[data-id="qs-intro-sec"] .qs-intro-txtcol .elementor-widget-text-editor.qs-intro-lead p {
  font-family: var(--ayc-font-head);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.4;
  color: var(--ayc-navy);
}

/* 3) TIMELINE (qs-tl-sec) — LÍNEA DE TIEMPO scroll-driven (carrusel horizontal con pin).
      animations.js -> initTimelineCarousel() YA maneja el componente: pinea .qs-tl-carousel al
      viewport mientras la sección está en pantalla y traslada .qs-tl-track horizontalmente con el
      scroll (1 slide = 100vw), marcando .qs-tl-dot.is-active. Aquí va SOLO el estilo (el legacy
      quienes-somos.css raíz está dequeued en modo nativo, por eso hay que portarlo).
      TODOS los font-size son tokens de ayc-base.css (--fs-tl-year/--fs-section/--fs-h3/--fs-body).
      Colores de marca: navy = --ayc-navy-deep (#15296A), verde = --ayc-green. Medido vs
      qs-crops/timeline.png @1440. */

/* La sección debe ser BLOQUE y ALTA para que el pin scroll-driven tenga recorrido.
   En nativo es un .e-con flex -> override en el [data-id] y en su .e-con-inner. */
.ayc-native.ayc-native[data-id="qs-tl-sec"] {
  display: block;
  height: 800vh;          /* 8 slides -> recorrido = (8-1)*~100vh, +1 viewport de pin */
  min-height: 800vh;
  padding: 0;
  background: #FFFFFF;
  position: relative;
  overflow: visible;
}
.ayc-native.ayc-native[data-id="qs-tl-sec"] > .e-con-inner {
  display: block;
  height: 100%;
  max-width: none;
  width: 100%;
  padding: 0;
}
.ayc-native.ayc-native [data-id="qs-tl-html"] {
  display: block;
  position: static;
  width: 100%;
  height: 100%;
  margin: 0;
}
.ayc-native.ayc-native [data-id="qs-tl-html"] > .elementor-widget-container {
  padding: 0;
  height: 100%;
}

/* Carrusel: pinea al viewport (JS alterna is-pinned / is-end). */
.ayc-native.ayc-native .qs-tl-carousel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: var(--ayc-navy-deep);
}
.ayc-native.ayc-native .qs-tl-carousel.is-pinned { position: fixed; top: 0; left: 0; }
.ayc-native.ayc-native .qs-tl-carousel.is-end { position: absolute; top: auto; bottom: 0; }

/* Track horizontal — slides en fila; el transform lo pone el JS inline (sin !important). */
.ayc-native.ayc-native .qs-tl-track {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: calc(8 * 100vw);
  height: 100%;
  will-change: transform;
}
.ayc-native.ayc-native .qs-tl-slide {
  position: relative;
  flex: 0 0 100vw;
  width: 100vw;
  height: 100%;
  display: flex;
  align-items: flex-end;
  padding: 60px 100px 110px;
  box-sizing: border-box;
  overflow: hidden;
}

/* Fondo Ken-Burns: zoom lento mientras el slide está activo. */
.ayc-native.ayc-native .qs-tl-slide-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 0;
  transform: scale(1.04);
  transition: transform 7s ease-out;
  will-change: transform;
}
/* Imágenes por índice (wp_kses elimina el url() inline -> aquí en CSS). */
.ayc-native.ayc-native [data-index="0"] .qs-tl-slide-bg { background-image: url('/wp-content/uploads/2026/05/qs-1999.jpg'); }
.ayc-native.ayc-native [data-index="1"] .qs-tl-slide-bg { background-image: url('/wp-content/uploads/2026/05/qs-2005.jpg'); }
.ayc-native.ayc-native [data-index="2"] .qs-tl-slide-bg { background-image: url('/wp-content/uploads/2026/05/qs-2008.jpg'); }
.ayc-native.ayc-native [data-index="3"] .qs-tl-slide-bg { background-image: url('/wp-content/uploads/2026/05/qs-2012.jpg'); }
.ayc-native.ayc-native [data-index="4"] .qs-tl-slide-bg { background-image: url('/wp-content/uploads/2026/05/qs-2016.jpg'); }
.ayc-native.ayc-native [data-index="5"] .qs-tl-slide-bg { background-image: url('/wp-content/uploads/2026/05/qs-2021.jpg'); }
.ayc-native.ayc-native [data-index="6"] .qs-tl-slide-bg { background-image: url('/wp-content/uploads/2026/05/qs-2022.jpg'); }
.ayc-native.ayc-native [data-index="7"] .qs-tl-slide-bg { background-image: url('/wp-content/uploads/2026/05/qs-2025.jpg'); }
.ayc-native.ayc-native .qs-tl-slide.is-active .qs-tl-slide-bg { transform: scale(1.14); }

/* Overlay navy degradado para legibilidad del texto. */
.ayc-native.ayc-native .qs-tl-slide-overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, rgba(21,41,106,0.28) 0%, rgba(21,41,106,0.50) 55%, rgba(21,41,106,0.66) 100%);
  z-index: 1;
}

/* Bloque de texto del slide. */
.ayc-native.ayc-native .qs-tl-block {
  position: relative;
  z-index: 2;
  max-width: 720px;
  color: #FFFFFF;
}
.ayc-native.ayc-native .qs-tl-slide.qs-tl-left { justify-content: flex-start; }
.ayc-native.ayc-native .qs-tl-slide.qs-tl-left .qs-tl-block { margin: 0 auto 0 0; text-align: left; }
.ayc-native.ayc-native .qs-tl-slide.qs-tl-center { justify-content: center; }
.ayc-native.ayc-native .qs-tl-slide.qs-tl-center .qs-tl-block { margin: 0 auto; text-align: center; }
.ayc-native.ayc-native .qs-tl-slide.qs-tl-right { justify-content: flex-end; }
.ayc-native.ayc-native .qs-tl-slide.qs-tl-right .qs-tl-block { margin: 0 0 0 auto; text-align: left; }

/* AÑO — display dominante (token --fs-tl-year), con subrayado verde. */
.ayc-native.ayc-native .qs-tl-block .qs-tl-year {
  font-family: var(--ayc-font-head);
  /* [2026-08-27] 800 -> 700: Futura Bold ES 700; pedir 800 hace que el navegador
     sintetice un faux-bold deformado. Canon del proyecto = 700. */
  font-weight: 700;
  font-size: var(--fs-tl-year);
  line-height: 1;
  color: #FFFFFF;
  display: inline-block;
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 18px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.ayc-native.ayc-native .qs-tl-block .qs-tl-year::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100px;
  height: 4px;
  background: var(--ayc-green);
}
.ayc-native.ayc-native .qs-tl-slide.qs-tl-center .qs-tl-year::after {
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
}

/* Título del slide -> escala de título de sección (token --fs-section). */
.ayc-native.ayc-native .qs-tl-block h3.qs-tl-title {
  font-family: var(--ayc-font-head);
  font-weight: 700;
  font-size: var(--fs-section);
  line-height: 1.22;
  color: #FFFFFF;
  margin: 0;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

/* Subtítulo (ubicación) -> token --fs-h3 (subtítulo/card). */
.ayc-native.ayc-native .qs-tl-block .qs-tl-sub {
  font-family: var(--ayc-font-body);
  font-weight: 500;
  font-size: var(--fs-h3);
  color: rgba(255,255,255,0.95);
  margin-top: 8px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

/* Descripción -> CUERPO base (token --fs-body, 21px — piso generoso). */
.ayc-native.ayc-native .qs-tl-block p.qs-tl-desc {
  font-family: var(--ayc-font-body);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: rgba(255,255,255,0.95);
  margin: 22px 0 0;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
  max-width: 720px;
}
.ayc-native.ayc-native .qs-tl-slide.qs-tl-center p.qs-tl-desc { margin-left: auto; margin-right: auto; }

/* Flechas legacy ocultas — el scroll maneja el avance. */
.ayc-native.ayc-native .qs-tl-nav { display: none; }

/* Dots de progreso. */
.ayc-native.ayc-native .qs-tl-dots {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 5;
}
.ayc-native.ayc-native .qs-tl-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid var(--ayc-green);
  cursor: pointer;
  padding: 0;
  transition: background .25s, transform .25s;
}
.ayc-native.ayc-native .qs-tl-dot.is-active { background: var(--ayc-green); transform: scale(1.3); }
.ayc-native.ayc-native .qs-tl-dot:hover { background: rgba(157,196,26,0.6); }

/* 4) STATS (qs-stats-sec) — "Hoy somos un ecosistema…" + 5 cifras (image-box nativos).
      Crop: qs-crops/stats.png @1440 → icono lineal navy arriba, CIFRA VERDE grande (--fs-h1),
      label navy debajo (--fs-small), separadores verticales finos entre columnas. Foot: lead
      navy (--fs-body) con 2ª línea en negrita. TODOS los font-size = tokens base. */

/* AIRE de la sección: la banda stats venía con padding 0/0 → el heading quedaba pegado al timeline
   (arriba) y el foot pegado a la banda navy de Valores (abajo). El diseño tiene aire generoso
   arriba/abajo. Ritmo del resto de la página (valores 68/48, cta 70/70). */
.ayc-native.ayc-native[data-id="qs-stats-sec"] { padding-top: 72px; padding-bottom: 64px; }

/* Heading "Hoy somos…" → título de sección (--fs-section) navy, centrado. */
.ayc-native.ayc-native [data-id="qs-stats-h2"] .elementor-heading-title {
  font-family: var(--ayc-font-head);
  font-weight: 700;
  font-size: var(--fs-section);
  line-height: 1.25;
  color: var(--ayc-navy);
  text-align: center;
  max-width: 1200px;   /* SUBIDO 760→1200: el PDF muestra el título en UNA línea; a 760px envolvía a 2. */
  margin: 0 auto 48px;
}

/* Fila de 5 stats: row real (el flex vive en .e-con-inner en boxed; esta row es full → en el .e-con).
   Reparto equitativo, separadores verticales finos entre columnas. */
.ayc-native.ayc-native [data-id="qs-stats-row"],
.ayc-native.ayc-native [data-id="qs-stats-row"] > .e-con-inner {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: space-between;
  gap: 0;
}
.ayc-native.ayc-native [data-id="qs-stats-row"] .qs-stat {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  padding: 0 18px;
  border-right: 1px solid #DBE0EA;
}
.ayc-native.ayc-native [data-id="qs-stats-row"] .qs-stat:first-child { border-left: 1px solid #DBE0EA; }

/* image-box nativo: columna centrada (icono → cifra → label). */
.ayc-native.ayc-native .qs-stat .elementor-image-box-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Icono lineal navy, tamaño fijo del crop (~60px de alto). */
.ayc-native.ayc-native .qs-stat .elementor-image-box-img { margin: 0 0 14px; }
.ayc-native.ayc-native .qs-stat .elementor-image-box-img img {
  width: auto;
  height: 60px;
  max-width: 100%;
  object-fit: contain;
}
/* CIFRA — verde, grande (--fs-h1). */
.ayc-native.ayc-native .qs-stat .elementor-image-box-title {
  font-family: var(--ayc-font-head);
  /* [2026-08-27] 800 -> 700: Futura Bold ES 700; pedir 800 hace que el navegador
     sintetice un faux-bold deformado. Canon del proyecto = 700. */
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: 1;
  color: var(--ayc-green);
  margin: 0 0 8px;
}
/* LABEL — slate/gris-azulado muted (más suave que el navy de las cifras), escala small (--fs-small).
   Token: --color-slate-muted (#62698C). Envuelve a 2 líneas de forma natural. */
.ayc-native.ayc-native .qs-stat .elementor-image-box-description {
  font-family: var(--ayc-font-body);
  font-weight: 500;
  font-size: var(--fs-small);
  line-height: 1.25;
  color: var(--color-slate-muted);
  margin: 0;
}

/* Foot — lead centrado (--fs-body); 2ª línea (strong) en negrita navy. */
.ayc-native.ayc-native [data-id="qs-stats-foot"] { margin-top: 36px; width: 100%; }
.ayc-native.ayc-native [data-id="qs-stats-foot"] p {
  font-family: var(--ayc-font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--color-muted-brand); /* #839794 — línea 1 muted gris-teal (crop ≈ rgb(138,154,156)) */
  text-align: center;
  margin: 0;
}
.ayc-native.ayc-native [data-id="qs-stats-foot"] p strong {
  font-family: var(--ayc-font-head);
  font-weight: 700;
  color: var(--ayc-navy);
}

/* 5) NUESTROS VALORES (qs-val-sec) — banda degradada teal-blue→navy con 4 tarjetas blancas;
      cada tarjeta = badge circular VERDE (icono blanco real, asset qs-val-icon-N.png) a caballo
      sobre el borde superior + título navy + línea destacada + cuerpo. NATIVO: image+heading+
      text-editor (sin html widget). Medido @1440 vs render del PDF: tarjeta ≈274px, gap ≈33px,
      círculo ≈74px centrado en el borde superior. TODOS los font-size = tokens base. */

/* El degradado vive en settings del data-id (background:gradient). Aquí solo aseguramos overflow
   para que el badge pueda salirse del borde superior de las tarjetas. */
.ayc-native.ayc-native[data-id="qs-val-sec"] { overflow: visible; }

/* Título de sección "Nuestros Valores" → blanco, bold, centrado (token --fs-section).
   RONDA 3: el título estaba PEGADO al borde superior de la banda (10px) y la banda misma no
   reservaba aire arriba. Se da aire superior con padding-top de la banda (abajo) y se reparte el
   espacio: ~70-75px banda→título y ~40px título→fila. NO se toca el font-size (34=--fs-section). */
.ayc-native.ayc-native [data-id="qs-val-title"] .elementor-heading-title {
  font-family: var(--ayc-font-head);
  font-weight: 700;
  font-size: var(--fs-section);
  line-height: 1.2;
  color: #FFFFFF;
  text-align: center;
  margin: 0 0 30px;
}
/* RONDA 3: aire equilibrado en la banda. padding-top da el respiro arriba del título (~70-75px
   desde el borde de la banda hasta el título); padding-bottom equilibra el aire bajo las tarjetas.
   Estos paddings viven en el .e-con-inner (gotcha boxed) y en el .e-con (full). */
.ayc-native.ayc-native[data-id="qs-val-sec"] > .e-con-inner,
.ayc-native.ayc-native[data-id="qs-val-sec"] {
  padding-top: 68px;
  padding-bottom: 48px;
}

/* Fila de 4 tarjetas: row real (flex en .e-con-inner para boxed; esta row es full → en el .e-con).
   Reparto equitativo, gap 15px (proporción del diseño: 4 tarjetas ≈291px + 3 gaps ≈15px en el
   inner ≈1200-1214px → tarjetas anchas-que-altas como el PDF), arranca alineada al top para que
   los badges queden a la misma altura. RONDA 2: gap 33→15 y tarjetas más anchas (ratio ~1.17). */
.ayc-native.ayc-native [data-id="qs-val-row"],
.ayc-native.ayc-native [data-id="qs-val-row"] > .e-con-inner {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: center;
  gap: 20px;            /* cliente: MÁS AIRE entre tarjetas (11→20) */
  --content-width: 1320px;
  max-width: 1320px;    /* cliente: tarjetas MÁS ANCHAS → inner 1320 (antes ~1200) */
  margin: 0 auto;
  width: 100%;
}
/* El row (qs-val-row, e-con-full) vive dentro del .e-con-inner de qs-val-inner, capado por Elementor
   a min(100%,1200px) → ESE es el que limita el ancho. Subirlo a 1320 para tarjetas MÁS ANCHAS. */
.ayc-native.ayc-native [data-id="qs-val-inner"] > .e-con-inner { max-width: 1320px !important; }
.ayc-native.ayc-native [data-id="qs-val-inner"] { --content-width: 1320px; }

/* Tarjeta blanca: ancho equitativo (~289-291px en el inner de 1200, gap 15 → (1200-45)/4≈289),
   radio 20, padding-top reserva el medio círculo del badge. overflow visible para que el badge
   se salga por arriba. RONDA 2: max-width 300→295 + gap 15 → tarjetas ≈289px (diseño ≈291). */
.ayc-native.ayc-native .qs-val-card {
  flex: 1 1 0;
  min-width: 0;
  max-width: 320px;          /* cliente: tarjetas MÁS ANCHAS (300→320; con inner 1320 → ~310px c/u) */
  background: #FFFFFF;
  border-radius: 20px;
  box-shadow: 0 8px 26px rgba(8,30,70,.12);
  overflow: visible;
  position: relative;
  padding: 44px 24px 28px;   /* cliente: MÁS AIRE interno. top 38→44 (badge), laterales 10→24
                                (texto despegado de los bordes), bottom 14→28. */
  text-align: center;
}
/* Neutraliza el gris/radio que servicios-shared pinta a .e-con-boxed (0,5,0) → ganarle con (0,6,0). */
.ayc-native.ayc-native[data-id="qs-val-sec"] .qs-val-card.e-con-boxed { box-shadow: 0 8px 26px rgba(8,30,70,.12); }
/* RONDA 2: anula el padding lateral por defecto del .e-con-inner (10px) para que el cuerpo gane
   ancho y envuelva al recuento del diseño SIN <br>. RONDA 3: además compacta el GAP vertical entre
   los 4 widgets (icono/título/destacado/cuerpo): Elementor mete 20px de flex-gap → la tarjeta se
   estira a 417px con banda vacía abajo. Lo bajamos a 8px para que la tarjeta sea compacta
   (ancho>alto, aspect>1) como el recorte, SIN tocar font-size (todo sigue en tokens). */
.ayc-native.ayc-native .qs-val-card > .e-con-inner {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  gap: 6px;
  row-gap: 6px;
}

/* BADGE circular verde con el icono blanco real, a caballo sobre el borde superior. */
.ayc-native.ayc-native .qs-val-card .qs-val-icon {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: var(--ayc-green);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -85px auto 6px;  /* RONDA 3: padding-top 38 → -38 - 37(medio círculo) - 10(ajuste) = -85 → centro EXACTO en el borde superior; bottom 6 para compactar. */
  box-shadow: 0 4px 12px rgba(8,30,70,.18);
}
.ayc-native.ayc-native .qs-val-card .qs-val-icon .elementor-widget-container { line-height: 0; }
.ayc-native.ayc-native .qs-val-card .qs-val-icon img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  display: block;
}

/* Título de la tarjeta (Confianza/…) → navy bold, centrado (token --fs-h3). */
.ayc-native.ayc-native .qs-val-card .qs-val-title .elementor-heading-title {
  font-family: var(--ayc-font-head);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.2;
  color: var(--ayc-navy);
  text-align: center;
  margin: 0;   /* RONDA 3: el espaciado vertical lo gobierna el gap 8px del .e-con-inner → sin doble margen que estire la tarjeta */
}

/* Línea destacada (negrita GRIS-TEAL) — escala de cuerpo, peso bold (token --fs-body).
   RONDA 2: el PDF muestra el destacado en el MISMO tono gris-teal que el cuerpo (medido
   ≈rgb(133,150,152) ≈ #839794), solo más PESADO — NO navy. Usa --color-muted (gris-teal de
   marca, igual que .qs-val-body) con peso bold. */
.ayc-native.ayc-native .qs-val-card .qs-val-emph { width: 100%; margin: 0; }
.ayc-native.ayc-native .qs-val-card .qs-val-emph p {
  font-family: var(--ayc-font-head);
  font-weight: 700;
  font-size: var(--fs-body);
  line-height: 1.3;
  color: var(--color-muted);
  text-align: center;
  margin: 0;
}

/* Cuerpo — gris-teal muted, escala de cuerpo (token --fs-body). */
.ayc-native.ayc-native .qs-val-card .qs-val-body { width: 100%; margin: 0; }
.ayc-native.ayc-native .qs-val-card .qs-val-body p {
  font-family: var(--ayc-font-body);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: 1.38;
  color: var(--color-muted);
  text-align: center;
  margin: 0;
}

/* ACENTO VERDE inferior de la tarjeta 2 (Empatía) — ELIMINADO (cliente jun-2026, ronda 2):
   pidió quitar la línea verde al pie de esa card. (El PDF sí la mostraba; se retira por decisión
   del cliente, que prevalece sobre la referencia.) Regla anulada a propósito; no reintroducir. */
.ayc-native.ayc-native .qs-val-card[data-id="qs-val-2"]::after {
  content: none;
}

/* 6) NUESTRA FILOSOFÍA (qs-philo-sec) — "Soluciones claras, trato honesto…".
      Composición en ARCO: sobre fondo claro (#F4F5F7) un SEMICÍRCULO navy (--ayc-navy-deep) con
      texto blanco central, rodeado de 5 burbujas en arco (cada una: icono lineal navy real
      [qs-philo-icon-N.png] arriba → línea+punto conector → círculo blanco con borde VERDE y texto
      navy). 100% NATIVO: heading + image + text-editor + containers (CERO html widget). La
      disposición en arco es decorativa → posicionamiento absoluto en CSS + conectores pseudo-elemento.
      Medido 1:1 vs el PDF "Sobre Nosotros copia.pdf" (banda Filosofía, render @2667 → escala @1440)
      y vs qs-crops/filosofia.png. TODOS los font-size = tokens base (--fs-section/--fs-philo-arc/
      --fs-philo-bubble/--fs-body). */

/* La sección NO usa la tarjeta gris del recipe de servicios y debe permitir overflow (los iconos
   y la base del arco salen del stage). */
.ayc-native.ayc-native[data-id="qs-philo-sec"] { overflow: visible; padding-top: 96px; padding-bottom: 64px; }
.ayc-native.ayc-native[data-id="qs-philo-sec"] > .e-con-inner { overflow: visible; }

/* Cabecera: título / subtítulo / lead centrados, columna. */
.ayc-native.ayc-native [data-id="qs-philo-inner"] { overflow: visible; }
.ayc-native.ayc-native [data-id="qs-philo-inner"] > .e-con-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  overflow: visible;
}

/* "Nuestra filosofía" → título de sección navy, bold, centrado (token --fs-section). */
.ayc-native.ayc-native [data-id="qs-philo-title"] .elementor-heading-title {
  font-family: var(--ayc-font-head);
  font-weight: 700;
  font-size: var(--fs-section);
  line-height: 1.2;
  color: var(--ayc-navy);
  text-align: center;
  margin: 0 0 16px;
}
/* Subtítulo "Soluciones claras…" → navy bold, escala subtítulo (token --fs-h3). */
.ayc-native.ayc-native [data-id="qs-philo-sub"] .elementor-heading-title {
  font-family: var(--ayc-font-head);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.25;
  color: var(--ayc-navy);
  text-align: center;
  margin: 0 0 22px;
}
/* Lead "Organizamos tus documentos…" → gris-teal muted, cuerpo, centrado, 2 líneas naturales. */
.ayc-native.ayc-native [data-id="qs-philo-text"] { width: 100%; }
.ayc-native.ayc-native [data-id="qs-philo-text"] .elementor-widget-container { text-align: center; }
.ayc-native.ayc-native [data-id="qs-philo-text"] p {
  font-family: var(--ayc-font-body);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--color-muted);
  text-align: center;
  max-width: 880px;
  margin: 0 auto;
}

/* El theme añade animaciones reveal (ayc-d-reveal-*) con TRANSFORM a estos containers; un transform
   crea containing-block y DESPLAZA el posicionamiento absoluto de las burbujas → neutralizar dentro
   del stage (el reveal de la sección entera ya basta como entrada). */
.ayc-native.ayc-native .qs-philo-stage [class*="ayc-d-reveal"],
.ayc-native.ayc-native .qs-philo-stage.is-revealed,
.ayc-native.ayc-native .qs-philo-stage [class*="ayc-d-reveal"].is-revealed {
  transform: none !important;
  opacity: 1 !important;
  animation: none !important;
  transition: none !important;
}

/* ---- STAGE del arco: lienzo relativo de tamaño fijo (medido del PDF). Las burbujas y el arco
        se posicionan absolutos dentro. Ancho de contenido ≈1100, alto ≈620 (proporción del PDF). ---- */
.ayc-native.ayc-native .qs-philo-stage {
  position: relative;
  width: 100%;
  max-width: 1160px;
  height: 650px;
  margin: 62px auto 0;
  overflow: visible;
}
.ayc-native.ayc-native .qs-philo-stage > .e-con-inner {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  max-width: none;
  padding: 0;
  overflow: visible;
}

/* ---- ARCO navy: CÚPULA (semicírculo) con base plana abajo, anclada al fondo del stage.
        Esquinas superiores con radio = mitad del ancho → media-luna superior; el texto blanco
        centrado en la cúpula. Medido del PDF: ancho ≈620, alto cúpula ≈330. ---- */
.ayc-native.ayc-native .qs-philo-arc {
  position: absolute;
  left: 50%;
  bottom: 0;
  margin-left: -340px;   /* centra sin transform (el transform lo anula la neutralización del reveal) */
  width: 680px;
  height: 330px;
  border-top-left-radius: 340px;
  border-top-right-radius: 340px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background: var(--ayc-navy-deep);
  display: flex;
  align-items: flex-start;      /* RONDA 3: texto en el TERCIO SUPERIOR de la cúpula (no centrado-bajo) */
  justify-content: center;
  padding: 92px 44px 24px;      /* RONDA 3: padding-top 56→92 → sube el bloque al tercio alto (cy live 734→ ~718 del arco, como el crop) */
  box-sizing: border-box;
  z-index: 5;                                   /* el azul va DELANTE de los círculos */
  box-shadow: 0 0 0 12px #f4f5f7;               /* margen claro = bg: corta el blanco al tocar el azul (diseño) */
}
.ayc-native.ayc-native .qs-philo-arc > .e-con-inner {
  display: block;
  width: 100%;
  max-width: none;
  padding: 0;
}
.ayc-native.ayc-native .qs-philo-arc .qs-philo-arc-text,
.ayc-native.ayc-native [data-id="qs-philo-arc-h"] .elementor-heading-title {
  /* RONDA 3: PDF usa FuturaBT-Medium (no Bold) en el texto del arco. style.css L379 fuerza
     'Futura Bold' !important en .elementor-heading-title (0,2,0) → batirlo con !important + mi
     mayor especificidad (0,3,1). Es un heading widget, por eso necesita !important; las burbujas
     son <p> y no las toca esa regla. */
  font-family: var(--ayc-font-body) !important;
  font-weight: 500 !important;
  font-size: var(--fs-philo-arc);
  line-height: 1.3;
  color: #FFFFFF;
  text-align: center;
  max-width: 520px;   /* ancho suficiente para que envuelva a 3 líneas (= diseño), SIN <br> forzado */
  margin: 0 auto;
}

/* ---- ITEM (burbuja) = icono + círculo, apilados; posición absoluta por burbuja. ---- */
.ayc-native.ayc-native .qs-philo-item {
  position: absolute;
  width: auto;       /* item absoluto: se encoge a su contenido (icono+círculo), NO al ancho del stage */
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 4;
  overflow: visible;
}
.ayc-native.ayc-native .qs-philo-item > .e-con-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: none;
  padding: 0;
  gap: 0;
  overflow: visible;
}

/* Icono lineal navy real (asset). display:contents para dimensionar el <img> directamente. */
.ayc-native.ayc-native .qs-philo-item .qs-philo-icon { width: auto; position: relative; }
.ayc-native.ayc-native .qs-philo-item .qs-philo-icon .elementor-widget-container { line-height: 0; }
.ayc-native.ayc-native .qs-philo-item .qs-philo-icon img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  display: block;
}
/* Línea conectora + punto ENTRE icono y círculo. El widget .qs-philo-icon colapsa a h:0 (image
   widget de Elementor sin .elementor-widget-container) → sus pseudo-elementos caían fuera de sitio
   (debajo del círculo). Se NEUTRALIZAN y el conector se ancla al CÍRCULO (caja fiable) subiendo por
   el gap de 30px hacia el icono, con el punto arriba (= PDF: icono · línea·punto · círculo). */
.ayc-native.ayc-native .qs-philo-item .qs-philo-icon::after,
.ayc-native.ayc-native .qs-philo-item .qs-philo-icon::before { content: none; }
.ayc-native.ayc-native .qs-philo-item .qs-philo-circle { position: relative; }
.ayc-native.ayc-native .qs-philo-item .qs-philo-circle::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -47px;                   /* RONDA 8: posicionado con TOP (predecible; el truco bottom:100%+margin
                                   se renderizaba INVERTIDO → la línea cruzaba el círculo). LÍNEA entre icono
                                   y punto, ABOVE del círculo (~-42..-20px sobre el borde) — NO toca el anillo. */
  transform: translateX(-50%);
  width: 2px;
  height: 22px;
  background: var(--ayc-navy);
  opacity: .9;
  z-index: 1;
}
.ayc-native.ayc-native .qs-philo-item .qs-philo-circle::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -25px;                   /* RONDA 8: PUNTO separado ~12px SOBRE el círculo (extremo inferior del
                                   conector); ya NO invade el borde verde (queja cliente). */
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ayc-navy);
  z-index: 1;
}

/* Círculo blanco con borde verde. Tamaño por burbuja (abajo). */
.ayc-native.ayc-native .qs-philo-item .qs-philo-circle {
  border-radius: 50%;
  background: #FFFFFF;
  border: 5px solid var(--ayc-green);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 22px;         /* RONDA 6: círculo más grande (200) → menos push necesario; el texto
                                   respira y sigue librando el solape inferior del domo. */
  margin-top: 44px;             /* RONDA 6: gap icono↔círculo 26→44 (cliente: "el icono debe estar más
                                   alejado para que la raya esté más arriba"). El conector (línea+punto)
                                   vive en este gap SIN tocar el círculo. Posiciones b1-b5 ajustadas
                                   (top −25) para conservar el solape con el domo. */
  box-sizing: border-box;
  box-shadow: 0 6px 18px rgba(8,30,70,.10);
}
.ayc-native.ayc-native .qs-philo-item .qs-philo-circle > .e-con-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  max-width: none;
  padding: 0;
}
.ayc-native.ayc-native .qs-philo-item .qs-philo-circle-text .elementor-widget-container { width: 100%; }
.ayc-native.ayc-native .qs-philo-item .qs-philo-circle-text p {
  font-family: var(--ayc-font-body);
  font-weight: 500;
  font-size: var(--fs-body);          /* TAMAÑO ESTÁNDAR (21); antes --fs-philo-bubble=16 propio → retirado */
  line-height: 1.18;
  color: var(--ayc-navy);
  text-align: center;
  margin: 0;
  padding: 0 24px;                     /* RONDA 6: + padding horizontal (20→24) → con el círculo más grande
                                          (200) el texto respira y NO queda pegado al borde (queja cliente).
                                          Sigue alejándose del borde interno donde el domo cruza diagonal. */
}

/* ---- POSICIONES por burbuja (medidas del crop, stage 1100×620). RONDA 2:
        - Las 5 burbujas comparten UN diámetro (165px) → arco uniforme como el crop.
        - Centros SIMÉTRICOS alrededor del centro del stage (cx=550): B1↔B5 y B2↔B4 espejan.
          cx: B1=189, B2=335, B3=550, B4=765, B5=911 (left = cx − diam/2 = cx − 82.5).
        - Pares-espejo a IGUAL altura formando un arco limpio sobre la cúpula (apex rel≈302):
          B3 en el ápice (cy≈175), B2==B4 (cy≈205), B1==B5 (cy≈330).
          El círculo cae 86px bajo el top del item (icono 56 + margin-top 30) → top = cy − 86 − 82.5.
        El item es width=diámetro y se ancla por su borde izquierdo; el icono (56px) centrado
        sobre el círculo por align-items:center. ---- */
/* Diámetro ÚNICO compartido por las 5 burbujas. RONDA 6: 186→200 (cliente: "los círculos con
   texto están muy pequeños") → texto con más aire. */
.ayc-native.ayc-native .qs-philo-item .qs-philo-circle { width: 200px; height: 200px; }
.ayc-native.ayc-native .qs-philo-item { width: 200px; }
/* RONDA 4: arco MÁS PRONUNCIADO que abraza la cúpula (el crop tiene las externas ~150px bajo el
   ápice, no a la altura del centro). Medido en live (apex circle-center abs=559): se baja cada par
   para que el centro del círculo aterrice en su objetivo del crop:
   B3 cy 442→471 (top 7→36, descansa SOBRE el ápice), B2/B4 cy 472→562 (top 37→127, justo bajo el
   ápice), B1/B5 cy 597→720 (top 162→285, caen muy por debajo). +1px css top = +1px cy (lineal). */
/* RONDA 5 — posiciones REMEDIDAS del crop (qs-crops/filosofia.png): centros de las 5 burbujas a
   distancia ~405 del centro del domo (medido: B1-5 dist 402-410), ángulos θ = 0, ±31.6°, ±62°.
   Mapeado a live (domo centro 713/1069 vp, radio 340, burbuja Ø186): cada burbuja SOLAPA el domo
   ~20px → los círculos blancos "cortan con el donut" (z-index domo 5 > burbuja 4 + anillo claro =
   corte limpio), como pide el cliente. Simétricas B1↔B5, B2↔B4. (Antes flotaban con gap de 19–62px.)
   left = circle_cx − 226 (stage_left 133 + media-burbuja 93); top = circle_top − 523 (stage_top 419 vp
   + offset item→círculo 104). */
/* RONDA 6: círculo 200 (+14) y gap icono 44 (+18) bajan el centro ~25px y lo ensanchan 7px →
   left −7 / top −25 desde RONDA 5 para CONSERVAR el solape con el domo y la simetría. */
/* B1 "Te escuchamos" — inferior-izquierda (θ≈−62°, espejo de B5). */
.ayc-native.ayc-native .qs-philo-b1 { left: 122px; top: 244px; }
/* B2 "Respondemos rápido" — medio-izquierda (θ≈−31.6°, espejo de B4). */
.ayc-native.ayc-native .qs-philo-b2 { left: 268px; top: 89px; }
/* B3 "Explicamos cada paso" — centro/ápice (θ=0, descansa SOBRE la cúpula, solapando). */
.ayc-native.ayc-native .qs-philo-b3 { left: 480px; top: 29px; }
/* B4 "No alimentamos" — medio-derecha (θ≈+31.6°, espejo de B2). */
.ayc-native.ayc-native .qs-philo-b4 { left: 692px; top: 89px; }
/* B5 "Caminamos contigo" — inferior-derecha (θ≈+62°, espejo de B1). */
.ayc-native.ayc-native .qs-philo-b5 { left: 838px; top: 244px; }

/* ---- RESPONSIVE (≤1024, cliente jun-2026 "cambiar el diseño por dispositivo"): el hub en ARCO
        (burbujas absolutas con left fijos hasta ~994px sobre un stage 1100×620) NO escala y causaba
        OVERFLOW horizontal en móvil. En tablet/móvil el diseño CAMBIA a PILA VERTICAL: la cúpula
        (mensaje central) → tarjeta navy redondeada arriba, y las 5 burbujas (icono · línea·punto ·
        círculo) en columna centrada. Cada burbuja vuelve a flujo normal (position:static). ---- */
@media (max-width: 1024px){
  .ayc-native.ayc-native .qs-philo-stage{
    height: auto !important; max-width: 520px !important; margin: 24px auto 0 !important;
  }
  .ayc-native.ayc-native .qs-philo-stage > .e-con-inner{
    display: flex !important; flex-direction: column !important; align-items: center !important;
    height: auto !important; gap: 30px !important;
  }
  .ayc-native.ayc-native .qs-philo-item{
    position: static !important; left: auto !important; top: auto !important;
    width: auto !important; margin: 0 !important;
  }
  .ayc-native.ayc-native .qs-philo-arc{
    position: static !important; margin: 0 auto 6px !important;
    width: 100% !important; max-width: 420px !important; height: auto !important;
    border-radius: 26px !important; padding: 30px 26px !important; order: -1;
  }
  .ayc-native.ayc-native .qs-philo-arc .qs-philo-arc-text,
  .ayc-native.ayc-native [data-id="qs-philo-arc-h"] .elementor-heading-title{ max-width: none !important; }
}


/* 7) QUIÉNES FORMAMOS / TEAM (qs-team-sec) — equipo multicultural (fotos/grid + carrusel).
      NATIVO: containers + image + heading + text-editor (CERO html widget; el carrusel-slab de
      text-editor anterior se reemplazó por árbol nativo). El JS reusado (animations.js
      initTeamCarousel) sigue manejando .qs-team-track/.qs-team-card/.qs-team-dot/.qs-team-arrow.
      Diseño (qs-crops/team.png @1440): banda gris clara, título navy + subtítulo navy + lead
      gris-teal; 3 tarjetas-foto visibles con overlay navy degradado abajo y "Lorem ipsum"/"Lorem
      ipsum" blancos; 4 dots verdes (activo lleno, inactivo hueco) centrados; pie gris-teal con 2ª
      línea bold navy. TODOS los font-size = tokens base (--fs-section/--fs-h3/--fs-body). */

/* La banda gris reserva aire vertical equilibrado (la sección es full-width → el padding va en el
   .e-con; el padding del modelo no aterriza, se fija aquí). ~64px arriba / ~70px abajo = ritmo del PDF
   (título no pegado al borde superior de la banda). */
.ayc-native.ayc-native[data-id="qs-team-sec"] {
  padding-top: 64px;
  padding-bottom: 72px;
  /* [2026-06-25 CORRECCIÓN QS3] El diseño muestra "Quiénes formamos AYC Group" sobre fondo BLANCO
     (las tarjetas son navy, la SECCIÓN es blanca). Antes lo puse navy = ERROR. → fondo BLANCO; los
     textos vuelven a su color navy/gris original (se quita el override blanco). */
  background: #FFFFFF !important;
}

/* Cabecera: columna centrada, ritmo equilibrado entre título → subtítulo → lead → carrusel → pie. */
.ayc-native.ayc-native [data-id="qs-team-title"] .elementor-heading-title {
  font-family: var(--ayc-font-head);
  font-weight: 700;
  font-size: var(--fs-section);
  line-height: 1.2;
  color: var(--ayc-navy);
  text-align: center;
  margin: 0 0 12px;
}
.ayc-native.ayc-native [data-id="qs-team-sub"] .elementor-heading-title {
  font-family: var(--ayc-font-head);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.25;
  color: var(--ayc-navy);
  text-align: center;
  margin: 0 0 18px;
}
.ayc-native.ayc-native [data-id="qs-team-text"] .elementor-widget-container { text-align: center; }
.ayc-native.ayc-native [data-id="qs-team-text"] p {
  font-family: var(--ayc-font-body);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--color-muted);
  text-align: center;
  margin: 0 0 30px;
}

/* ---- CARRUSEL: viewport recorta, track desliza (transform inline del JS). ---- */
.ayc-native.ayc-native .qs-team-carousel {
  position: relative;
  width: 100%;
  margin: 0 auto;
}
.ayc-native.ayc-native .qs-team-viewport,
.ayc-native.ayc-native .qs-team-viewport > .e-con-inner {
  overflow: hidden;
  width: 100%;
  max-width: none;
  padding: 8px 4px;
}
/* Track: fila real (Elementor pone column en .e-con-inner; aquí es full → en el .e-con y el inner). */
.ayc-native.ayc-native .qs-team-track,
.ayc-native.ayc-native .qs-team-track > .e-con-inner {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 28px;
  width: 100%;
  max-width: none;
  padding: 0;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
/* 3 tarjetas visibles: ancho = (100% − 2 gaps de 28px)/3 (diseño ≈384px, gap ≈28px).
   [2026-08-28 FLIP] La tarjeta pasa a ser la RAÍZ DE PERSPECTIVA del giro 3D:
     · overflow: hidden → visible. Por spec, cualquier `overflow` distinto de
       `visible` fuerza `transform-style: flat` → aplanaría el preserve-3d del
       flipper y el giro se vería como un simple aplastado horizontal. El recorte
       redondeado se muda a las CARAS (.qs-team-face), que SÍ pueden llevar
       overflow:hidden porque son hojas del contexto 3D.
     · `perspective` = profundidad del giro. 1400px da un volteo suave; por debajo
       de ~900px el borde se deforma en “ojo de pez” al pasar por los 90°.
   El border-radius se conserva aquí SOLO para que la box-shadow salga redondeada
   (el fondo blanco lo pone ahora la cara frontal). */
.ayc-native.ayc-native .qs-team-card {
  flex: 0 0 calc((100% - 56px) / 3);
  min-width: 0;
  position: relative;
  padding: 0;
  border-radius: 18px;
  overflow: visible;
  background: transparent;
  /* La sombra NO va aquí sino en las CARAS: si se queda en la tarjeta (que no
     gira) se ve un rectángulo fantasma quieto detrás del giro. En las caras
     rota con ellas y el volteo queda limpio (verificado en captura a 62°). */
  aspect-ratio: 4 / 5;
  perspective: 1400px;
}

/* FLIPPER: el ÚNICO elemento que gira. Crea el contexto 3D que contiene las dos
   caras. NO puede recibir overflow / opacity / filter / clip-path: cualquiera de
   ellos aplana el preserve-3d y rompe el efecto. */
.ayc-native.ayc-native .qs-team-flip {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  padding: 0;
  transform: rotateY(0deg);
  transform-style: preserve-3d;
  transition: transform .62s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}

/* CARAS: ambas ocupan la tarjeta entera y se apilan; la trasera nace girada 180°.
   backface-visibility:hidden → en cada instante solo se pinta la que mira al
   espectador (sin esto se verían las dos superpuestas y el texto en espejo). */
.ayc-native.ayc-native .qs-team-face {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  padding: 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(8,30,70,.12);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.ayc-native.ayc-native .qs-team-front {
  transform: rotateY(0deg);
  background: #FFFFFF;
}
/* Las 3 tarjetas visibles son idénticas (mismo tamaño/sombra), como en el diseño.
   Se anula el realce de la central para que los bordes sup./inf. queden alineados. */
.ayc-native.ayc-native .qs-team-card.is-featured {
  transform: none;
  box-shadow: 0 10px 28px rgba(8,30,70,.12);
  z-index: 1;
}

/* Foto: image widget → display:contents para dimensionar el <img> al 100% de la tarjeta. */
.ayc-native.ayc-native .qs-team-card .qs-team-photo,
.ayc-native.ayc-native .qs-team-card .qs-team-photo > .elementor-widget-container {
  display: contents;
}
.ayc-native.ayc-native .qs-team-card .qs-team-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
/* Overlay navy degradado al pie para legibilidad de los textos.
   [2026-08-28 FLIP] Cuelga de la CARA FRONTAL, no de la tarjeta: si siguiera en
   .qs-team-card se quedaría quieto (fuera del contexto 3D) y se vería flotando
   sobre la cara trasera durante el giro. */
.ayc-native.ayc-native .qs-team-front::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
  background: linear-gradient(180deg, rgba(8,30,70,0) 0%, rgba(8,30,70,0.35) 50%, rgba(8,30,70,0.85) 100%);
  pointer-events: none;
  z-index: 1;
}
/* Bloque de info sobre el overlay. */
.ayc-native.ayc-native .qs-team-card .qs-team-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 0 16px 22px;
  text-align: center;
  background: transparent;
}
.ayc-native.ayc-native .qs-team-card .qs-team-name .elementor-heading-title {
  font-family: var(--ayc-font-head);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.2;
  color: #FFFFFF;
  text-align: center;
  text-shadow: 0 2px 6px rgba(0,0,0,0.30);
  margin: 0 0 2px;
}
.ayc-native.ayc-native .qs-team-card .qs-team-role .elementor-widget-container { text-align: center; }
.ayc-native.ayc-native .qs-team-card .qs-team-role p {
  font-family: var(--ayc-font-body);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: 1.3;
  color: rgba(255,255,255,0.92);
  text-align: center;
  text-shadow: 0 2px 6px rgba(0,0,0,0.30);
  margin: 0;
}

/* Flechas: el diseño muestra SOLO dots → flechas ocultas (el JS sigue funcionando con los dots). */
.ayc-native.ayc-native .qs-team-carousel .qs-team-arrow { display: none; }

/* DOTS verdes (estándar carrusel AYC): activo = disco verde lleno; inactivo = hueco con borde verde. */
.ayc-native.ayc-native .qs-team-dots,
.ayc-native.ayc-native .qs-team-dots > .e-con-inner {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  max-width: none;
  padding: 0;
  margin-top: 22px;
}
.ayc-native.ayc-native .qs-team-dot {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  min-height: 0;
  border-radius: 50%;
  background: transparent;
  border: 2px solid var(--ayc-green);
  cursor: pointer;
  padding: 0;
  transition: background .25s, transform .25s;
}
.ayc-native.ayc-native .qs-team-dot.is-active {
  background: var(--ayc-green);
  transform: scale(1.15);
}

/* Pie: lead gris-teal (--fs-body) + 2ª línea bold navy (--fs-h3). Aire equilibrado arriba. */
.ayc-native.ayc-native [data-id="qs-team-foot"] { width: 100%; margin-top: 34px; }
.ayc-native.ayc-native [data-id="qs-team-foot"] .elementor-widget-container { text-align: center; }
.ayc-native.ayc-native [data-id="qs-team-foot"] p {
  font-family: var(--ayc-font-body);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--color-muted);
  text-align: center;
  margin: 0;
}
.ayc-native.ayc-native [data-id="qs-team-foot"] p strong {
  font-family: var(--ayc-font-head);
  font-weight: 700;
  font-size: var(--fs-h3);
  color: var(--ayc-navy);
}

/* 8) QUÉ NOS HACE DIFERENTES (qs-diff-sec) — serpentina horizontal de 5 nodos conectados.
      NATIVO: cada nodo = container con disco (image widget = icono blanco real qs-diff-icon-N.png)
      + heading (título card) + icon-list (bullets). Los discos van en anillo blanco grueso; los
      conectores en C (verdes arriba, navy abajo) son pseudo-elementos CSS sobre los discos.
      Nodos 1/3/5 = disco VERDE con texto DEBAJO; nodos 2/4 = disco NAVY con texto ENCIMA (zigzag).
      Medido 1:1 vs qs-crops/diff_graphic.png @1440 (5 nodos equiespaciados, paso ≈ ancho/5,
      disco ≈150px en anillo blanco ≈210px). TODOS los font-size = tokens base (--fs-section/-h3/-body).
      ============================================================ */

/* Aire arriba/abajo de la banda gris: el título no pegado al borde superior (cliente jun-2026,
   = trato dado a "Nuestra filosofía"). El settings del data-id dejaba el título a ~10px del tope. */
.ayc-native.ayc-native[data-id="qs-diff-sec"] { padding-top: 60px; padding-bottom: 48px;
  background: #F4F5F7 !important; /* 2026-06-25 CORRECCIÓN QS3: el diseño muestra "Qué nos hace diferentes" sobre GRIS CLARO (no blanco). Diferencia con el equipo (blanco) arriba. */
}

/* Título de sección "Qué nos hace diferentes" → navy bold centrado (token --fs-section).
   Aire equilibrado arriba/abajo de la banda (la banda gris #F4F5F7 vive en settings del data-id). */
.ayc-native.ayc-native [data-id="qs-diff-title"] .elementor-heading-title {
  font-family: var(--ayc-font-head);
  font-weight: 700;
  font-size: var(--fs-section);
  line-height: 1.2;
  color: var(--ayc-navy);
  text-align: center;
  margin: 0 0 56px;
}

/* Inner: columna centrada. Content-width 1400 (Elementor capaba a ~1200/1280) → el row de nodos
   alcanza 1400: columnas de 280px, "Acompañamiento" (largo) cabe a 26px sin cruzar la línea y todo
   gana aire (bullets, discos vs líneas). */
.ayc-native.ayc-native [data-id="qs-diff-inner"] { --content-width: 1400px; }
.ayc-native.ayc-native [data-id="qs-diff-inner"] > .e-con-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible;
  max-width: 1400px !important;
}

/* ---- STAGE / ROW: fila real de 5 nodos equiespaciados (el flex vive en .e-con-inner). ---- */
.ayc-native.ayc-native [data-id="qs-diff-row"],
.ayc-native.ayc-native [data-id="qs-diff-row"] > .e-con-inner {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  width: 100%;
  max-width: 1400px;
  margin-left: auto;    /* CENTRAR el diagrama en la sección (estaba pegado a la izquierda, left=10) */
  margin-right: auto;
  padding: 0 10px;      /* INSET 10px → los discos flex caen en 148/424/700/976/1252 (= SVG) y las
                           verticales de los extremos (x10/x1390) NO se cortan en el borde del box. */
  position: relative;
  overflow: visible;
}
/* La banda reserva alto para los brackets RECTOS (verticales largos + curva solo en esquina) del
   diseño → más espacio vertical que los arcos. Medido del diseño adjunto: green cy≈145, navy cy≈331,
   apex bracket ±136 del centro → row 480. */
.ayc-native.ayc-native [data-id="qs-diff-row"] { min-height: 480px; }

/* ---- NODO: columna; ancho equitativo (1/5). Posición relativa para anclar disco/conectores. ---- */
.ayc-native.ayc-native .qs-diff-node,
.ayc-native.ayc-native .qs-diff-node > .e-con-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: none;
  padding: 0;
  gap: 0;
  overflow: visible;
}
.ayc-native.ayc-native .qs-diff-node {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  z-index: 2;
}
/* El disco se ancla en una franja media de la banda; el texto cae arriba o abajo según el zigzag.
   La franja media = línea del serpentín (≈ y centro de la banda). */
/* Los nodos son e-con-FULL (SIN .e-con-inner) → el padding/justify va en el NODO mismo.
   Nodos verdes (1/3/5): disco arriba, BAJADO con padding-top para que el cap aireado (R107) quepa
   sin recortarse en el borde superior de la banda (green cy ≈ 124). Nodos navy (2/4): el texto va
   arriba y el disco debajo por flujo natural (cy ≈ 278); el cup R107 cabe (278+115<470). */
.ayc-native.ayc-native .qs-diff-node-1,
.ayc-native.ayc-native .qs-diff-node-3,
.ayc-native.ayc-native .qs-diff-node-5 { justify-content: flex-start; padding-top: 52px; }
.ayc-native.ayc-native .qs-diff-node-2,
.ayc-native.ayc-native .qs-diff-node-4 { justify-content: flex-end; padding-bottom: 56px; }

/* ---- DISCO: anillo blanco grueso + disco de color con icono blanco centrado. ---- */
.ayc-native.ayc-native .qs-diff-disc {
  width: 186px;
  height: 186px;
  flex: 0 0 186px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 3;
  box-sizing: border-box;
  /* anillo blanco alrededor del disco de color (38px — medido del DISEÑO adjunto:
     halo 185 / disco coloreado 110). */
  background-clip: padding-box;
  border: 38px solid #FFFFFF;
  box-shadow: 0 6px 18px rgba(8,30,70,.10);
}
.ayc-native.ayc-native .qs-diff-disc > .e-con-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  max-width: none;
  padding: 0;
}
.ayc-native.ayc-native .qs-diff-disc-green { background: var(--ayc-green); }
.ayc-native.ayc-native .qs-diff-disc-navy  { background: var(--ayc-navy-deep); }

/* Icono blanco real dentro del disco. */
.ayc-native.ayc-native .qs-diff-disc .qs-diff-ico { width: auto; }
.ayc-native.ayc-native .qs-diff-disc .qs-diff-ico .elementor-widget-container { line-height: 0; }
.ayc-native.ayc-native .qs-diff-disc .qs-diff-ico img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  display: block;
}

/* ---- TEXTO del nodo: título card (--fs-h3 navy bold) + bullets (--fs-body). ---- */
.ayc-native.ayc-native .qs-diff-txt,
.ayc-native.ayc-native .qs-diff-txt > .e-con-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 248px;   /* columnas de 280px → texto 248 = ~16px de cada línea + MENOS líneas (el texto
                         a 196px se iba a 9 líneas y estiraba la banda, desalineando los discos navy).
                         "Acompañamiento" (266@26) desborda el contenedor pero queda dentro de las líneas
                         (±140 del centro) sin cruzarlas. */
  padding: 0;
  gap: 6px;
  overflow: visible;
}
/* RONDA 4: separar texto del anillo conector ~30px (antes ~29px de solape texto↔tubo) y CORREGIR
   el nombre de clase (era .qs-diff-node-below/-above → el margen nunca aplicaba; la clase real es
   .qs-diff-below/-above). El serpentín nuevo es CAP verde (abre abajo) + CUP navy (abre arriba):
   - BELOW (verde): el cap llega a ~y132 bajo el disco; con margin-top 28 el texto arranca en ~y178
     → ~46px claros del tubo (texto no lo pisa) SIN empujar el disco (el disco verde queda arriba).
   - ABOVE (navy): el cup queda ENTERO bajo el disco navy → el texto-encima ya no toca ningún tubo;
     se deja 18px para NO desplazar el disco navy hacia abajo (mantiene la alineación con el SVG,
     cuyos cups están en cy=255). */
.ayc-native.ayc-native .qs-diff-below .qs-diff-txt { margin-top: 28px; }
.ayc-native.ayc-native .qs-diff-above .qs-diff-txt { margin-bottom: 18px; }

.ayc-native.ayc-native .qs-diff-cardtitle .elementor-heading-title {
  font-family: var(--ayc-font-head);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.18;
  color: var(--ayc-navy);
  text-align: center;
  margin: 0;
}

/* Bullets: icon-list nativo. Punto verde como viñeta (el diseño usa • verde). */
.ayc-native.ayc-native .qs-diff-bullets .elementor-icon-list-items { margin: 0; padding: 0; }
.ayc-native.ayc-native .qs-diff-bullets .elementor-icon-list-item {
  align-items: flex-start;
  padding: 1px 0;
  margin: 0;
}
/* Sin icono FA: pintamos un • verde como marcador a través de ::before del texto. */
.ayc-native.ayc-native .qs-diff-bullets .elementor-icon-list-icon { display: none; }
.ayc-native.ayc-native .qs-diff-bullets .elementor-icon-list-text {
  font-family: var(--ayc-font-body);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: 1.32;
  color: var(--ayc-navy);   /* NAVY (= diseño y = títulos de nodo); antes gris-teal --color-muted, se veía débil */
  text-align: center;
  position: relative;
  padding-left: 0;
  width: 100%;
}
.ayc-native.ayc-native .qs-diff-bullets .elementor-icon-list-text::before {
  content: '\2022';
  color: var(--ayc-green);
  font-weight: 700;
  margin-right: 5px;
}

/* ============================================================
   CONECTORES — SERPENTÍN CONTINUO (RONDA 4). Una cadena en S fluida que ENCADENA los 5 discos:
   CAP verde (∩, abre abajo, arco 240° sobre los discos 1/3/5) + CUP navy (U, abre arriba, arco
   240° bajo los discos 2/4), UNIDOS disco-a-disco por tubos-puente (curvas Bézier) — NO 5 anillos
   sueltos. En cada empalme hay un CHEVRON (flecha) del color del tubo entrante: verde apuntando
   ABAJO al bajar al cup navy, navy apuntando ARRIBA al subir al cap verde (4 chevrons internos;
   los extremos de D1-izq y D5-der son cabos redondeados, como el recorte). Es DECORACIÓN: un SVG
   (qs-diff-connectors.svg) pintado de background-image sobre la ROW (no es un widget html).
   viewBox 1280×470 = tamaño exacto de la row. Centros de disco MEDIDOS en live @1440 tras separar
   el texto: D1/3/5 (cx, cy=75) verdes arriba; D2/4 (cx, cy=273) navy abajo — el cy navy=273 (no
   255) porque el margen del texto-encima baja el disco navy; el SVG se regeneró a ese cy para que
   los cups coincidan con los discos. R=93 (centerline), tubo 21px. Generador: gen en /tmp medido
   contra qs-crops/diff_graphic.png. Va DETRÁS de los discos (z-index) pero SOBRE la banda gris.
   ============================================================ */
/* La row es e-con-full (SIN .e-con-inner): el flex y el fondo van en el propio [data-id]. */
.ayc-native.ayc-native [data-id="qs-diff-row"] {
  background-image: url('/wp-content/uploads/2026/05/qs-diff-connectors.svg?v=12');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 1400px 480px;
}
/* Los discos van por encima del tubo (z-index 3 ya definido); el texto también (z-index 2 del nodo). */

/* ---- RESPONSIVE (cliente jun-2026: "debe cambiar el diseño por dispositivo"). El diagrama
        horizontal de 5 nodos con serpentín SVG fijo (1280×470) NO escala. En tablet/móvil (≤1024)
        el DISEÑO CAMBIA a una PILA VERTICAL de tarjetas (disco arriba + título + bullets), centrada,
        SIN el serpentín. Uniforme (sin zigzag): en los nodos 2/4 el DOM es [TEXT,DISC] → se usa
        column-reverse para que el disco quede ARRIBA igual que en 1/3/5. ---- */
@media (max-width: 1024px){
  .ayc-native.ayc-native [data-id="qs-diff-row"]{
    background-image: none !important;   /* oculta el serpentín fijo (no responsive) */
    flex-direction: column !important;
    align-items: center !important;
    min-height: 0 !important;
    max-width: 480px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 40px !important;
  }
  /* los nodos son e-con-FULL (sin .e-con-inner): el flex/padding van en el NODO mismo */
  .ayc-native.ayc-native .qs-diff-node{
    flex: 0 0 auto !important; width: 100% !important;
    justify-content: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  /* disco SIEMPRE arriba, texto debajo (layout uniforme apilado). Nodos 2/4 DOM [TEXT,DISC] → reverse */
  .ayc-native.ayc-native .qs-diff-below{ flex-direction: column !important; }
  .ayc-native.ayc-native .qs-diff-above{ flex-direction: column-reverse !important; }
  .ayc-native.ayc-native .qs-diff-above .qs-diff-txt,
  .ayc-native.ayc-native .qs-diff-below .qs-diff-txt{
    margin-top: 18px !important;
    margin-bottom: 0 !important;
    max-width: 360px !important;
  }
}

/* 9) CTA (qs-cta-sec) — "Queremos conocer tu historia".
      REUSA la estructura del CTA compartido ($="-cta-sec") pero el DISEÑO de QS (qs-crops/cta.png)
      NO usa la tarjeta gris: el bloque (H2 + subtítulo + botón) flota directamente sobre una BANDA
      degradada navy→teal-blue (lightens top→bottom). Overrides SOLO de QS (RONDA 2, 5 gaps medidos):
      (1) inner container [data-id="qs-cta-inner"] = transparente, sin radio, sin sombra, centrado.
      (2) H2 BLANCO (el shared lo pone navy para la tarjeta gris).
      (3) subtítulo BLANCO !important (el shared lo pone gris-teal con !important + inline).
      (4) sección = degradado vertical navy rgb(26,49,91) → teal-blue #0075a9 (el shared lo pinta
          BLANCO con clase cuádruple 0,5,0 → batirlo con clase QUÍNTUPLE 0,6,0 + [data-id=] exacto).
      (5) la banda queda como backdrop visible del bloque blanco centrado.
      SIN tocar font-size: se conservan los tokens del shared (--fs-cta-title / --fs-cta-sub / botón). */

/* (4) BANDA degradada navy→teal-blue. DOS reglas que vencer:
   - shared: blanco con .ayc-native ×4 [data-id$="-cta-sec"] (spec 0,5,0).
   - Elementor lazy-load (gotcha FLASH): inline `<style>` con
     `.e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded){background-image:none!important}` (0,5,0 +
     !important) → como esta sección es el 9º .e-con.e-parent y aún no está lazy-cargada, MATA la
     imagen. Para un degradado CSS (nada que lazy-load) hay que re-afirmarlo con clase QUÍNTUPLE +
     [data-id=] exacto (0,6,0, > 0,5,0) Y con !important (para batir el !important del lazy-load).
   El degradado aclara de navy (arriba) a teal-blue (#0075a9, azul de marca) abajo. */
.ayc-native.ayc-native.ayc-native.ayc-native.ayc-native[data-id="qs-cta-sec"] {
  background-color: transparent !important;
  background-image: linear-gradient(180deg, rgb(26,49,91) 0%, #0075a9 100%) !important;
}

/* (1) INNER = sin tarjeta: transparente, sin radio, sin sombra. El shared pinta la tarjeta gris en
   `[data-id$="-cta-sec"] > .e-con` (spec 0,3,0); clase doblada + [data-id=] exacto + > .e-con = 0,4,0
   → gana sin !important. Se conserva el centrado (max-width/padding) para que el bloque quede centrado
   sobre la banda, vertical y horizontalmente. */
.ayc-native.ayc-native[data-id="qs-cta-sec"] > .e-con {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

/* (2) H2 BLANCO sobre la banda. El shared lo pone navy en
   `[data-id$="-cta-sec"] .elementor-widget-heading .elementor-heading-title` (0,3,0) → empate de spec
   con clase doblada + [data-id=] exacto, pero quienes-somos.css carga DESPUÉS → gana por orden. */
.ayc-native.ayc-native[data-id="qs-cta-sec"] .elementor-widget-heading .elementor-heading-title {
  color: #FFFFFF;
}

/* (3) SUBTÍTULO BLANCO sobre la banda. El shared usa gris-teal con !important + el <p> trae color
   inline → necesita !important. TAMAÑO: el CTA de QS (PDF) tiene el subtítulo MUCHO más pequeño que
   el encabezado (~21 vs ~40); el shared lo deja en --fs-cta-sub (34), que aplanaba la jerarquía →
   se baja a var(--fs-body)=21 para QS (token base; el shared sigue en 34 para los CTA de servicio). */
.ayc-native.ayc-native[data-id="qs-cta-sec"] .elementor-widget-text-editor p {
  color: #FFFFFF !important;
  font-size: var(--fs-cta-sub) !important; /* RONDA 8: ESTÁNDAR CTA = 34 (--fs-cta-sub), igual que los
                                              CTA de servicio (Advisors/Accountants/Ayuda). El cliente
                                              pidió ESTANDARIZAR todos los CTA a 38/34; el 21 previo lo
                                              dejaba excesivamente pequeño. Título sigue --fs-cta-title(38). */
}

/* ============================================================
   RESPONSIVE DE LAYOUT — QUIÉNES SOMOS (2026-06-22)
   ============================================================
   La fundación móvil (escala de tokens --fs-* en ayc-base.css @media + chrome
   header→hamburguesa / footer→apilado) YA está. Aquí SOLO ajusto el LAYOUT de
   las secciones de ESTA página (intro, timeline, stats, valores, equipo). Los
   dos diagramas absolutos (qs-philo arco / qs-diff serpentín) YA apilan vertical
   en sus propios bloques @media de arriba (L891 / L1353) → no se tocan aquí.
   INVARIANTE: desktop ≥1025 byte-idéntico — todo lo de abajo vive en
   @media (max-width:1024px) (tablet) y @media (max-width:767px) (móvil).
   PROHIBIDO display:none sobre contenido real: las columnas se REFLUYEN (apilan),
   no se ocultan. ============================================================ */

/* ---- TABLET (≤1024): reflujo de grids/columnas a 1-2 col, sin overflow ---- */
@media (max-width: 1024px){

  /* INTRO (qs-intro-sec): foto+texto a 2 columnas. En tablet se mantienen lado a
     lado pero con MENOS padding lateral del inner (Elementor mete 60px → en
     pantallas medias deja poco aire); imagen fluida sin desbordar. */
  .ayc-native.ayc-native[data-id="qs-intro-inner"] > .e-con-inner,
  .ayc-native.ayc-native[data-id="qs-intro-sec"] > .e-con-boxed.qs-intro-grid > .e-con-inner{
    padding-left: 28px !important;
    padding-right: 28px !important;
    gap: 28px !important;
  }
  .ayc-native.ayc-native .qs-intro-figcol{ flex: 0 0 44% !important; max-width: 44% !important; }
  .ayc-native.ayc-native .qs-intro-txtcol{ flex: 1 1 auto !important; max-width: 56% !important; }
  .ayc-native.ayc-native .qs-intro-figure img{ max-width: 100% !important; height: auto !important; }

  /* STATS (qs-stats-row): 5 columnas con borde → en tablet REFLUYE a una rejilla
     que envuelve (3+2). Se quita el nowrap y los bordes verticales (que se ven
     rotos al envolver) por una separación con gap; cada stat ocupa ~1/3. */
  .ayc-native.ayc-native [data-id="qs-stats-row"],
  .ayc-native.ayc-native [data-id="qs-stats-row"] > .e-con-inner{
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 28px 12px !important;
  }
  .ayc-native.ayc-native [data-id="qs-stats-row"] .qs-stat{
    flex: 0 0 calc((100% - 24px) / 3) !important;   /* 3 por fila en tablet */
    max-width: calc((100% - 24px) / 3) !important;
    border-right: 0 !important;
    border-left: 0 !important;
    padding: 0 8px !important;
  }
  .ayc-native.ayc-native [data-id="qs-stats-row"] .qs-stat:first-child{ border-left: 0 !important; }

  /* VALORES (qs-val-row): 4 tarjetas nowrap → 2×2 en tablet. El inner capado a
     1320 se libera para envolver; las tarjetas ya tienen badge a caballo (overflow
     visible) que se conserva. */
  .ayc-native.ayc-native [data-id="qs-val-inner"] > .e-con-inner{ max-width: 640px !important; }
  .ayc-native.ayc-native [data-id="qs-val-row"],
  .ayc-native.ayc-native [data-id="qs-val-row"] > .e-con-inner{
    flex-wrap: wrap !important;
    justify-content: center !important;
    max-width: 640px !important;
    gap: 56px 20px !important;     /* gap vertical generoso: el badge sobresale −85px arriba de cada tarjeta */
  }
  .ayc-native.ayc-native .qs-val-card{
    flex: 0 0 calc((100% - 20px) / 2) !important;   /* 2 por fila */
    max-width: calc((100% - 20px) / 2) !important;
  }

  /* EQUIPO (qs-team carousel): el JS calcula el paso por el ancho de tarjeta. En
     tablet mostramos 2 tarjetas visibles (en vez de 3) para que las fotos no se
     aplasten; el viewport ya recorta (overflow:hidden). */
  .ayc-native.ayc-native .qs-team-card{
    flex: 0 0 calc((100% - 28px) / 2) !important;   /* 2 visibles (gap 28) */
  }

  /* TIMELINE (qs-tl-sec): los slides son 100vw con padding lateral 100px → en
     pantallas medias deja poco ancho de texto. Se reduce el padding para que el
     bloque de texto respire (sigue siendo scroll-pinned; el track va clipeado por
     el viewport con overflow:hidden → no genera scroll horizontal del documento). */
  .ayc-native.ayc-native .qs-tl-slide{ padding: 48px 56px 92px !important; }
  .ayc-native.ayc-native .qs-tl-block,
  .ayc-native.ayc-native .qs-tl-block p.qs-tl-desc{ max-width: 560px !important; }
}

/* ---- MÓVIL (≤767): TODO a 1 columna, gaps/padding mínimos, 0 overflow ---- */
@media (max-width: 767px){

  /* INTRO: apilar a 1 columna (foto arriba, texto debajo). Se baja el padding
     lateral del inner para que NO desborde (a 360 los 60px lo sacaban a 362px).
     La foto a ancho completo (centrada, max 420) y el texto debajo. */
  .ayc-native.ayc-native[data-id="qs-intro-inner"] > .e-con-inner,
  .ayc-native.ayc-native[data-id="qs-intro-sec"] > .e-con-boxed.qs-intro-grid,
  .ayc-native.ayc-native[data-id="qs-intro-sec"] > .e-con-boxed.qs-intro-grid > .e-con-inner{
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  .ayc-native.ayc-native[data-id="qs-intro-sec"] > .e-con-boxed.qs-intro-grid > .e-con-inner{
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 24px !important;
  }
  .ayc-native.ayc-native .qs-intro-figcol,
  .ayc-native.ayc-native .qs-intro-txtcol{
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .ayc-native.ayc-native .qs-intro-figure{ text-align: center !important; }
  .ayc-native.ayc-native .qs-intro-figure img{
    max-width: 420px !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
  }
  /* el texto se centra y queda legible bajo la foto */
  .ayc-native.ayc-native[data-id="qs-intro-sec"] .qs-intro-txtcol .elementor-widget-text-editor p{
    text-align: left !important;
  }

  /* STATS: de 3×fila (tablet) a 2×fila en móvil; gap más compacto. Sin bordes
     verticales (ya quitados en tablet). Todas las 5 cifras siguen visibles. */
  .ayc-native.ayc-native [data-id="qs-stats-row"]{ padding-left: 12px !important; padding-right: 12px !important; }
  .ayc-native.ayc-native [data-id="qs-stats-row"] .qs-stat{
    flex: 0 0 calc((100% - 16px) / 2) !important;   /* 2 por fila en móvil */
    max-width: calc((100% - 16px) / 2) !important;
    padding: 0 4px !important;
  }
  .ayc-native.ayc-native [data-id="qs-stats-row"],
  .ayc-native.ayc-native [data-id="qs-stats-row"] > .e-con-inner{
    gap: 24px 16px !important;
  }

  /* VALORES: 1 tarjeta por fila, ancho cómodo, centradas. El badge sigue a caballo. */
  .ayc-native.ayc-native [data-id="qs-val-inner"] > .e-con-inner{ max-width: 360px !important; }
  .ayc-native.ayc-native [data-id="qs-val-row"],
  .ayc-native.ayc-native [data-id="qs-val-row"] > .e-con-inner{
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    max-width: 360px !important;
    gap: 64px !important;     /* aire para el badge que sobresale arriba de cada tarjeta */
  }
  .ayc-native.ayc-native .qs-val-card{
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 320px !important;
  }

  /* EQUIPO: 1 tarjeta visible por viewport (swipe vía dots/JS). El viewport recorta. */
  .ayc-native.ayc-native .qs-team-card{
    flex: 0 0 100% !important;
  }
  .ayc-native.ayc-native .qs-team-track,
  .ayc-native.ayc-native .qs-team-track > .e-con-inner{ gap: 16px !important; }

  /* TIMELINE: padding lateral mínimo para que el texto del slide quepa a 360px
     sin recorte. El año/título/desc ya escalan por tokens base (--fs-tl-year 34,
     --fs-section 26, --fs-body 16). */
  .ayc-native.ayc-native .qs-tl-slide{ padding: 36px 22px 84px !important; }
  .ayc-native.ayc-native .qs-tl-block,
  .ayc-native.ayc-native .qs-tl-block p.qs-tl-desc{ max-width: 100% !important; }
}

/* ============================================================================
   [2026-08-28] EQUIPO — FLIP 3D CON LA BIOGRAFÍA EN LA CARA TRASERA
   ----------------------------------------------------------------------------
   SUSTITUYE al bloque "[2026-08-24] BIOGRAFÍAS EN HOVER / TAP", que revelaba la
   bio animando `max-height: 0 → 100%`. Motivo del cambio (feedback del cliente:
   «se ve rara… con lag, como si se escribiera la descripción»): `max-height` con
   destino porcentual no es interpolable de forma estable — el navegador recalcula
   el layout en cada frame y el texto se descubre a tirones, línea a línea. Eso
   NO se arregla cambiando la curva: hay que dejar de animar una propiedad de
   layout y animar solo `transform`, que va en el compositor.

   MECÁNICA (3 niveles, obligatorios en este orden):
     .qs-team-card  → `perspective` (y overflow:visible, ver bloque §7)
     .qs-team-flip  → `transform-style: preserve-3d` + rotateY(0→180deg)
     .qs-team-face  → `backface-visibility: hidden`; la trasera nace en 180deg
   Cara FRONTAL = exactamente el reposo aprobado en el PDF (foto + degradado navy
   + nombre + cargo). Cara TRASERA = fondo navy sólido + nombre + cargo + bio.
   El nombre/cargo de la trasera son widgets propios (qs-tm-bname-N/qs-tm-brole-N):
   un mismo nodo no puede estar en las dos caras a la vez.

   DURACIÓN: .62s con cubic-bezier(.22,1,.36,1) (ease-out, sin overshoot) = el
   mismo easing que ya usan el track del carrusel y el resto de la página.
   ========================================================================== */

/* Disparo: hover en desktop · clase .is-open en táctil (la alterna initTeamCarousel). */
.ayc-native.ayc-native .qs-team-card:hover .qs-team-flip,
.ayc-native.ayc-native .qs-team-card.is-open .qs-team-flip {
  transform: rotateY(180deg);
}

/* CARA TRASERA. El navy es sólido (no degradado transparente) porque detrás ya
   no hay foto que velar: la foto se ha ido con la cara frontal. */
.ayc-native.ayc-native .qs-team-back {
  transform: rotateY(180deg);
  background: linear-gradient(180deg, rgba(8,30,70,0.94) 0%, rgba(8,30,70,0.97) 100%);
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  padding: 18px 20px;
  /* [conserva la regla de 2026-08-27, ahora a nivel de cara] En reposo la trasera
     NO captura clics: en el EDITOR de Elementor un clic en el centro de la tarjeta
     debe seleccionar la foto, no el texto de la bio. Antes esto vivía en
     .qs-team-bio; ahora inertiza la cara entera, que es más robusto. */
  pointer-events: none;
}
.ayc-native.ayc-native .qs-team-card:hover .qs-team-back,
.ayc-native.ayc-native .qs-team-card.is-open .qs-team-back {
  pointer-events: auto;   /* ya visible: seleccionable / copiable */
}
.ayc-native.ayc-native .qs-team-back > .elementor-widget {
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
}

/* Tipografía de la trasera: MISMOS tokens que la frontal (nombre --fs-h3 / cargo
   y bio --fs-body). El nombre de la trasera es un text-editor, no un heading:
   así no se duplica el <h4> del frente en el DOM (SEO/lectores de pantalla). */
.ayc-native.ayc-native .qs-team-back .qs-team-bname p {
  font-family: var(--ayc-font-head);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.2;
  color: #FFFFFF;
  text-align: center;
  margin: 0 0 2px;
}
.ayc-native.ayc-native .qs-team-back .qs-team-brole p {
  font-family: var(--ayc-font-body);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: 1.3;
  color: rgba(255,255,255,0.92);
  text-align: center;
  margin: 0;
}
.ayc-native.ayc-native .qs-team-back .qs-team-bio {
  margin-top: 12px;
}
.ayc-native.ayc-native .qs-team-back .qs-team-bio p {
  font-family: var(--ayc-font-body);
  font-weight: 500;
  font-size: var(--fs-body);
  /* 1.35 (no 1.45): medido a 372px de tarjeta, las bios largas (Jennifer 308 car.,
     Lis 301) ocupan 312px de los ~380px útiles de la cara. Con 1.45 se salían. */
  line-height: 1.35;
  color: rgba(255,255,255,0.95);
  text-align: center;
  margin: 0;
}

/* Encuadre por persona. Los data-id NO se renumeraron al reordenar (ver nota de
   orden abajo): siguen atados a la PERSONA, así que estos recortes siguen siendo
   los de Jennifer y Teresa aunque cambien de posición en el carrusel. */
.ayc-native.ayc-native [data-id="qs-tm-card-4"] .qs-team-photo img { object-position: 52% top; }  /* Jennifer Ricart */
.ayc-native.ayc-native [data-id="qs-tm-card-6"] .qs-team-photo img { object-position: 48% top; }  /* Teresa Seijo */

/* ORDEN DE LAS TARJETAS  ·  vigente desde 2026-09-04
   ----------------------------------------------------------------------------
   El orden lo manda el DOM (el array de hijos de qs-tm-track en _elementor_data),
   NO el CSS. Los NODOS se mueven conservando sus ids; nunca se renumeran.

   ORDEN ACTUAL (petición del cliente 2026-09-01: «poner el perfil de David al
   final, para no parecer por encima de Andrés (socio) y por respeto a la
   antigüedad»). Como el id ya coincidía con la persona, el orden pedido resultó
   ser el numérico natural 1→8:
     1º qs-tm-card-1  Ariadna Ojeda    5º qs-tm-card-5  Elianys Guanipa
     2º qs-tm-card-2  Andrés Pérez     6º qs-tm-card-6  Teresa Seijo
     3º qs-tm-card-3  Massiely Valeta  7º qs-tm-card-7  Lis Rodríguez
     4º qs-tm-card-4  Jennifer Ricart  8º qs-tm-card-8  David Seijo

   HISTÓRICO: sustituye al orden del 2026-08-28 («los dueños primero»: Ariadna,
   David, Andrés…), que ponía qs-tm-card-8 en 2ª posición. La instrucción del
   01-sep es posterior y la deroga.

   POR QUÉ NO SE RENUMERAN LOS IDS: son el ancla de los ajustes POR PERSONA (los
   object-position de arriba). Renumerar movería el encuadre de Jennifer a otra
   cara. Con ids estables cualquier regla por data-id sigue apuntando a quien
   debe; el precio es que el número del id no indica posición por sí solo —hoy
   coinciden, pero eso es una casualidad de este orden concreto—: consultar
   siempre esta tabla. */

/* Accesibilidad: sin giro si el usuario desactivó las animaciones. La trasera
   deja de estar volteada (si no, el texto saldría en espejo), se apila encima y
   se limita a aparecer/desaparecer. */
@media (prefers-reduced-motion: reduce) {
  .ayc-native.ayc-native .qs-team-flip { transition: none; }
  .ayc-native.ayc-native .qs-team-card:hover .qs-team-flip,
  .ayc-native.ayc-native .qs-team-card.is-open .qs-team-flip { transform: none; }
  .ayc-native.ayc-native .qs-team-face {
    -webkit-backface-visibility: visible;
            backface-visibility: visible;
  }
  .ayc-native.ayc-native .qs-team-back {
    transform: none;
    opacity: 0;
    z-index: 3;
    transition: none;
  }
  .ayc-native.ayc-native .qs-team-card:hover .qs-team-back,
  .ayc-native.ayc-native .qs-team-card.is-open .qs-team-back { opacity: 1; }
}

/* Móvil/tablet: en táctil el :hover se queda "pegado" tras el tap (sticky hover),
   así que ahí el giro lo manda SOLO .is-open. Idéntico criterio al bloque anterior. */
@media (max-width: 1024px) {
  .ayc-native.ayc-native .qs-team-card:hover .qs-team-flip { transform: rotateY(0deg); }
  .ayc-native.ayc-native .qs-team-card.is-open .qs-team-flip { transform: rotateY(180deg); }
  .ayc-native.ayc-native .qs-team-card:hover .qs-team-back { pointer-events: none; }
  .ayc-native.ayc-native .qs-team-card.is-open .qs-team-back { pointer-events: auto; }
  .ayc-native.ayc-native .qs-team-back { padding: 16px 16px; }
}

/* Móvil ≤767: la tarjeta cae a 262×328 px (1 por viewport) y la cara trasera se
   queda sin aire: medido, la bio más larga (Jennifer, 308 car.) pedía 341px de
   contenido en 296px útiles → se recortaba 22.8px por arriba y por abajo. Se
   recupera el espacio SIN tocar los tokens de tamaño (--fs-body sigue mandando):
   menos padding lateral (el texto gana ancho → menos líneas), interlineado más
   compacto y márgenes internos mínimos. */
@media (max-width: 767px) {
  .ayc-native.ayc-native .qs-team-back { padding: 8px 10px; }
  /* El nombre de la TRASERA baja a --fs-body (sigue siendo token): en móvil es
     una repetición del que ya se lee en la cara frontal y esos 7px de alto son
     los que necesita la bio. El de la cara FRONTAL (el <h4> real) no se toca. */
  .ayc-native.ayc-native .qs-team-back .qs-team-bname p {
    font-size: var(--fs-body);
    line-height: 1.2;
    margin: 0;
  }
  .ayc-native.ayc-native .qs-team-back .qs-team-brole p { line-height: 1.15; }
  .ayc-native.ayc-native .qs-team-back .qs-team-bio { margin-top: 4px; }
  .ayc-native.ayc-native .qs-team-back .qs-team-bio p { line-height: 1.22; }
}

/* ============================================================================
   §3-bis  [2026-08-27] TIMELINE — ENCUADRE POR HITO EN MÓVIL / TABLET
   ----------------------------------------------------------------------------
   PROBLEMA (medido, no supuesto):
   El slide es 100vw × 100vh y el fondo va con `background-size: cover`. En
   desktop (1536×864 = 16:9) la foto entra casi entera (se ve el 96% del ancho).
   En móvil 390×844 la relación cae a 0.46 → cover escala POR ALTURA y solo
   sobrevive el ~26% central del ancho de la imagen (medido: visible x =
   720–1200 px de 1920). Con el recorte centrado se perdían:
     · qs-2016.jpg → el rótulo "ayuda center" de la fachada (está en x 285–445).
     · qs-2022.jpg → la 1ª directiva por la izquierda (el grupo ocupa x 620–1145,
       o sea 525 px > los 499 px que caben) → se veían 4 de 5.
     · qs-2021.jpg → la escena de asesoría entera (solo se veía el monitor).

   POR QUÉ AQUÍ Y NO EN EL JS:
   animations.js -> fixQsTimelineBgs() forzaba `background-position:center center`
   con setProperty(...,'important'); un inline !important no se puede reencuadrar
   por breakpoint y esa función ni siquiera escucha `resize` (al rotar el móvil el
   valor quedaría rancio). Se eliminó esa línea del JS (queda removeProperty para
   limpiar inlines heredados). El JS sigue garantizando la IMAGEN (fallback por
   data-index); el CSS decide el ENCUADRE. Por eso estas reglas NO necesitan
   !important: (0,4,0) de `.ayc-native.ayc-native [data-index] .qs-tl-slide-bg`
   gana a la base (0,3,0) de la L243, y van al final del archivo.

   CÓMO SE CALCULAN LOS %:  con `cover` y recorte lateral, el % NO es "el punto
   de la foto", es el reparto del sobrante:  x_visible_izq = (P/100)·(Wescalado−C)/s.
   A 390×844 y foto 16:9 → x_izq ≈ P·14.2 px de original y ventana de 499 px.

   SOLO ≤1024. Desktop NO se toca (verificado: a 1536×864 la ventana visible es
   36.9–1883.1 px antes y después).
   ========================================================================== */
@media (max-width: 1024px){

  /* 2016 — "Adquisición de oficina propia". Sujeto = rótulo "ayuda center"
     (x 285–445 de 1920). 12% → ventana 170–670 px: el rótulo queda dentro con
     aire a ambos lados y la fachada sigue leyéndose. */
  .ayc-native.ayc-native [data-index="4"] .qs-tl-slide-bg { background-position: 12% center; }

  /* 2021 — "Expansión acelerada". Sujeto = la escena de asesoría (la pareja de
     clientes ocupa x 1190–1520). 74% → ventana 1096–1535: entran las dos caras
     y el borde derecho del monitor. Antes solo se veía monitor + planta. */
  .ayc-native.ayc-native [data-index="5"] .qs-tl-slide-bg { background-position: 74% center; }

  /* 2022 — "Nace AYC Group". Sujeto = LOS 5 DIRECTIVOS (x 620–1145 = 525 px).
     A 390 px de ancho caben 499 px de original: NO entra el grupo completo al
     100%, así que se centra en el grupo (centro x=882) para repartir el recorte:
     44.5% → ventana 632–1131, se pierden ~12 px de hombro en cada extremo y los
     CINCO quedan visibles (cara + torso + manos). Ver nota "LÍMITE FÍSICO". */
  .ayc-native.ayc-native [data-index="6"] .qs-tl-slide-bg { background-position: 44.5% center; }

  /* Los otros 5 hitos se quedan en el `center center` de la regla base (L243):
     1999 (skyline), 2008 (fachada), 2012 (el "8100"), 2025 (celebración) ya
     conservan su sujeto centrado. 2005 es un LÍMITE CONOCIDO: el rótulo
     "Palmetto Bay Centre" ocupa x 36%–84% (no cabe en el 26% visible) y además
     está tan arriba que el header fijo (82 px) lo tapa → ningún
     background-position lo rescata; haría falta otra foto o un recorte propio. */
}

/* Ken-Burns: en móvil el `scale()` encima de un recorte ya durísimo se come otro
   4% (14% en el slide 0, el único que lleva .is-active). Para 2022 esos píxeles
   son justo los que separan "se ven los 5" de "se ven 4". Se neutraliza SOLO en
   ≤767: el zoom es estático de facto (initTimelineCarousel NO alterna .is-active
   en los slides, solo en los dots), así que no se pierde animación, solo recorte.
   Tablet y desktop conservan el scale() tal cual. */
@media (max-width: 767px){
  .ayc-native.ayc-native .qs-tl-slide-bg,
  .ayc-native.ayc-native .qs-tl-slide.is-active .qs-tl-slide-bg { transform: none; }
}