/* ══════════════════════════════════════════════════════════════════════════
   El Quillay — capa de sitio sobre el design system "Organic" (ds.css).

   ds.css sigue siendo la fuente de verdad de tipografía, radios, sombras y
   de la ESTRUCTURA de la paleta (qué tokens existen y cómo los usan los
   componentes). Este archivo aporta: los VALORES de color de la marca,
   layout responsivo, componentes propios del sitio y la aparición en scroll.

   Hasta el 2026-09-08 esta capa no redefinía ningún token. Cambió a
   propósito: la paleta del mockup era cálida (crema y terracota) y leía como
   sitio de estética, no como consultora B2B. Los valores nuevos se
   sobrescriben AQUÍ, en un solo bloque, y ds.css queda intacto. Así el
   cambio de marca es una diff de treinta líneas y no una bifurcación del
   design system.
   ══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   PALETA DE MARCA
   ═══════════════════════════════════════════════════════════════════════════

   Derivada de los colores del logo, no elegida a ojo:

     · VERDE  #30614e — muestreado del isotipo. Es el 26% de los píxeles
       opacos y el verde más frecuente en las cuatro variantes del logo.
     · NAVY   #10243F — definido por el cliente. El logo trae #0f2b43, que
       es prácticamente el mismo color, así que la paleta cierra sola.
     · BLANCO #ffffff — el fondo dominante.

   Las escalas se generaron en OKLab, no en HSL: en HSL los peldaños de
   luminosidad no son perceptualmente parejos y el 400 sale casi igual al
   500. El croma se atenúa hacia los extremos —los tintes claros van casi
   grises— porque un tinte de fondo saturado es justamente lo que hace que
   una página se vea de consumo y no corporativa. Cada peldaño se mapeó al
   gamut sRGB bajando croma, no recortando canales: recortar canales corre
   el tono y un verde claro sale menta.

   El verde del logo tiene una propiedad afortunada que decidió la
   arquitectura: da 7,13:1 contra blanco. Sirve a la vez de color de enlace
   sobre blanco Y de fondo de botón con texto blanco, ambos en AAA.

   Los 21 pares de color que el sitio usa de verdad están validados contra
   WCAG 2.1. Ninguno baja de AA y la mayoría llega a AAA. Si cambia un
   valor de aquí, hay que volver a correr esa validación.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── verde de marca: reemplaza la familia terracota ── */
  --color-accent-100: #eef6f2;
  --color-accent-200: #dae7e1;
  --color-accent-300: #bcd2c8;
  --color-accent-400: #95b5a7;
  --color-accent-500: #6e9a87;
  --color-accent-600: #4e7f6b;
  --color-accent-700: #30614e;   /* el verde del logo, sin tocar */
  --color-accent-800: #1c4a39;
  --color-accent-900: #043022;
  --color-accent: #30614e;

  /* ── navy: reemplaza la familia salvia. Las bandas oscuras del sitio
        (.sec--dark) usan el peldaño 900, que es el navy exacto pedido. ── */
  --color-accent-2-100: #eef4fc;
  --color-accent-2-200: #dbe4f1;
  --color-accent-2-300: #bfcde2;
  --color-accent-2-400: #99aecc;
  --color-accent-2-500: #7590b7;
  --color-accent-2-600: #56759f;
  --color-accent-2-700: #3e5c85;
  --color-accent-2-800: #264165;
  --color-accent-2-900: #10243f;
  --color-accent-2: #10243f;

  /* ── neutros grises fríos: reemplazan los beige cálidos. Croma 0,008,
        prácticamente acromáticos, con una pizca del tono del navy para que
        no se vean sucios al lado de las bandas navy. El 900 ES el navy: así
        el pie del sitio queda navy sin una regla aparte. ── */
  --color-neutral-100: #f5f9fe;
  --color-neutral-200: #edf0f6;
  --color-neutral-300: #dce0e5;
  --color-neutral-400: #c1c4c9;
  --color-neutral-500: #a1a5aa;
  --color-neutral-600: #83868b;
  --color-neutral-700: #64676b;
  --color-neutral-800: #424549;
  /* El pie va un tono MÁS profundo que las bandas .sec--dark, que usan el
     navy exacto de marca. Sin esa diferencia, una sección oscura seguida del
     pie se funde en un solo bloque navy de dos pantallas de alto: pasa en la
     portada, donde la última sección es .sec--dark. */
  --color-neutral-900: #091a30;

  --color-bg: #ffffff;
  --color-surface: #f5f9fe;   /* panel apenas más frío que el blanco */
  --color-text: #1c2735;      /* navy muy oscuro, 15,10:1 sobre blanco */
  --color-divider: #dce0e5;

  /* ═══════════════════════════════════════════════════════════════════════
     TIPOGRAFÍA — Inter, la misma del sitio de Power Switch
     ═══════════════════════════════════════════════════════════════════════

     Reemplaza a Caprasimo y Figtree, que venían del mockup. Caprasimo es una
     serif display de fantasía: leía editorial, no corporativa, y era la
     segunda causa —después del color— de que el sitio se sintiera de
     estética. Inter es una sans neutra pensada para interfaz y texto denso.

     Una sola familia para titulares y cuerpo. La jerarquía la da el peso y
     el tamaño, no un cambio de familia: en un sitio de nueve páginas de
     texto corrido eso se lee más ordenado que un contraste de dos familias.

     Se sirve desde el propio dominio (ver fonts.css), así que no hay
     petición a Google en ninguna página.
     ═══════════════════════════════════════════════════════════════════ */

  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* 800, el mismo `font-extrabold` que usa Power Switch en sus titulares de
     sección. Caprasimo pesaba visualmente en 400 porque es una display; con
     Inter, 700 se queda corto y un titular de 50 px se lee como párrafo
     grande. En pwswitch el 800 aparece diez veces y el 700 queda para lo
     chico: encabezados de tabla, títulos de tarjeta. Aquí igual. */
  --font-heading-weight: 800;

  /* tracking-tight de Tailwind, que es lo que pwswitch aplica a todos sus
     titulares. Inter en peso alto necesita cerrar el espaciado o las
     palabras largas del español se ven separadas. */
  --track-titular: -.025em;
  /* En los tamaños de despliegue (50 px y más) hay que cerrar todavía más:
     el espaciado óptico crece con el cuerpo. */
  --track-display: -.032em;

  /* ═══════════════════════════════════════════════════════════════════════
     RADIOS — de «Organic» a corporativo
     ═══════════════════════════════════════════════════════════════════════

     Escala anterior: 8 / 16 / 28 px, más un 32 px escrito a mano en las
     tarjetas. Con esos valores una tarjeta de servicio y un formulario
     quedaban casi en cápsula, que es el otro gesto que hacía parecer el
     sitio un catálogo de bienestar.

     Los círculos verdaderos —iconos, botón de volver arriba, el distintivo,
     las pastillas del menú— siguen en 999px o 50%: un icono redondo tiene
     que quedar redondo. Lo que baja son los PANELES.
     ═══════════════════════════════════════════════════════════════════ */

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

/* ─── base ─────────────────────────────────────────────────────────────── */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* El overflow-x va en las DOS. Declararlo solo en body no basta: la pista
   del carrusel de industrias mide ~1750 px porque va duplicada para que el
   bucle no tenga costura, y hay motores que no propagan el recorte de body
   a la raíz. El resultado era una barra de scroll horizontal en pantallas
   angostas. */
html { overflow-x: hidden; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  overflow-x: hidden;
}

/* Los estados van OSCURECIENDO, no aclarando. Con la paleta cálida daba
   igual porque el terracota tenía margen a los dos lados; con el verde del
   logo, aclarar baja el contraste a 4,59:1 —apenas AA— y aclarar sobre
   blanco además se lee como si el enlace se desactivara. */
a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-accent-800); }

.btn { white-space: nowrap; }
.btn-primary:hover { background: var(--color-accent-800); }
.btn-primary:active { background: var(--color-accent-900); }

/* ═══════════════════════════════════════════════════════════════════════════
   JERARQUÍA TIPOGRÁFICA
   ═══════════════════════════════════════════════════════════════════════════

   Copiada del sistema de Power Switch, que es de tres piezas y una sola
   regla de color:

     1. EYEBROW  — 12 px, peso 700, mayúsculas, espaciado ancho. Muted sobre
        fondo claro; en color de acento sobre fondo oscuro.
     2. TITULAR  — peso 800, espaciado cerrado, en el gris más oscuro. NUNCA
        en el color de acento: el acento se gasta en una sola cosa por
        pantalla, y si el titular ya lo usa, no queda para lo importante.
     3. FILETE   — una barra corta de acento bajo el titular.

   El acento queda reservado para: el filete, los botones, los enlaces y el
   dato destacado. Nada más. Eso es lo que hace que cuando aparece, se vea.
   ═══════════════════════════════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6 { letter-spacing: var(--track-titular); }

/* Los titulares de despliegue cierran más. */
.q-hero__title, .q-page__title { letter-spacing: var(--track-display); }

/* ── Elementos que usan la familia de titular sin declarar peso ──────────
   Con Caprasimo daba igual: tenía un solo peso y ya era pesada. Inter en
   400 dejaba estos quince elementos leyéndose como texto corrido. Se les
   asigna peso según su papel, no según su tamaño. */

/* Cifras y nombres de despliegue: el objeto principal de su bloque. */
.q-figure__n,
.q-case__n,
.q-stat__n,
.q-quote__text,
.q-perfil__nombre,
.q-perfil__dato b { font-weight: 800; letter-spacing: var(--track-titular); }

/* Títulos de componente: bold, no extrabold. Cuatro tarjetas seguidas en
   800 compiten con el titular de la sección. */
.q-inc__t,
.q-link-card__t,
.q-why__n,
.q-case__t,
.q-foot__name,
.q-cookies__t,
.q-brand__name,
.q-marquee__item--word,
.card-title { font-weight: 700; letter-spacing: -.015em; }

/* Y los encabezados menores del design system bajan de 800 a 700, igual que
   en pwswitch, donde los <th> van en font-bold. Los h3 que titulan una
   tarjeta entran aquí: cuatro tarjetas en 800 al lado de un titular de
   sección en 800 aplanan la jerarquía, y deja de saberse qué manda. */
h4, h5, h6,
.q-svc h3, .q-why h3, .prose h3 { font-weight: 700; letter-spacing: -.015em; }

/* ── 1. EYEBROW ─────────────────────────────────────────────────────────
   Un solo tratamiento. Antes había SEIS: chips navy, chips grises, chips
   verdes, chips con borde, texto atenuado y este .eyebrow, repartidos sin
   criterio entre las páginas. Los chips siguen existiendo, pero para lo que
   son —etiquetas de especialidad, plazos de una etapa—, no para encabezar
   una sección. */
.eyebrow {
  display: block;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-neutral-700);
}
/* Sobre navy el gris muted desaparece; ahí el eyebrow toma el acento, en el
   peldaño claro, que da 7,02:1 contra el navy. El verde de marca daría
   2,19:1 y sería ilegible. */
.sec--dark .eyebrow,
.q-foot .eyebrow { color: var(--color-accent-400); }

/* ── 3. FILETE de acento bajo el titular ────────────────────────────────
   El gesto de pwswitch: una barra de 64x4 px en color de acento. Va como
   pseudo-elemento para no ensuciar el markup con un div vacío en cada
   sección. */
.q-rule::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-top: 18px;
  border-radius: 2px;
  background: var(--color-accent);
}
/* Sobre navy, el verde de marca no llega al 3:1 que WCAG pide para un
   elemento no textual. Se aclara. */
.sec--dark .q-rule::after { background: var(--color-accent-400); }

/* El DS deja los campos en pill; en un textarea multilínea eso rompe la lectura. */
textarea.input { border-radius: var(--radius-lg); padding: 10px 14px; }

/* El DS no estiliza <select>; se le da la misma voz que al resto de campos. */
select.input {
  appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364676b' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}

/* La cabecera es sticky: los destinos de ancla se detienen debajo de ella. */
section[id], [id].anchor { scroll-margin-top: 92px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--color-accent); color: var(--color-bg);
  padding: 10px 18px; border-radius: 0 0 999px 0; font-size: 14px;
}
.skip-link:focus { left: 0; color: var(--color-bg); }

/* ─── utilidades de layout ─────────────────────────────────────────────── */

.wrap { max-width: 1180px; margin: 0 auto; }

.sec { padding: var(--pt, 72px) 6vw var(--pb, 72px); }
.sec--neutral { background: var(--color-neutral-100); }

/* .tag-neutral usa neutral-100 de fondo, que es EXACTAMENTE el fondo de
   .sec--neutral: los chips quedaban invisibles, fondo sobre fondo. Pasaba
   también con la paleta cálida, así que es un defecto viejo que solo se
   hizo evidente al mirarlo de cerca. Sobre esa sección el chip va en blanco,
   y en todas partes lleva un filo por si algún día cambia el fondo. */
.tag-neutral { border: 1px solid var(--color-divider); }
.sec--neutral .tag-neutral { background: var(--color-bg); }
.sec--surface  { background: var(--color-surface); }
.sec--dark { background: var(--color-accent-2-900); color: var(--color-neutral-200); }
.sec--dark h1, .sec--dark h2, .sec--dark h3 { color: var(--color-neutral-100); }

/* WCAG 1.4.11 pide 3:1 para un componente que NO es texto. El verde de
   marca sobre el navy de estas bandas da 2,19:1: el texto de adentro se lee
   perfecto (blanco sobre verde, 7,13:1) pero la pieza pierde su silueta y se
   deja de leer como botón o como tarjeta. Un filo claro se la devuelve, sin
   cambiar el verde ni inventar un color fuera de la paleta. */
.sec--dark .btn-primary,
.sec--dark .q-link-card--accent {
  border: 1px solid var(--color-accent-400);
}
.sec--dark .q-why__n--solid { border-color: var(--color-accent-400); }
.sec--relative { position: relative; overflow: hidden; }

.split {
  display: grid;
  /* Mismo motivo que en .cards: los mínimos van acotados al 100% para que
     una columna de 320 px no desborde una pantalla de 320 px. Sin esto el
     formulario se salía cuatro píxeles en los teléfonos más angostos. */
  grid-template-columns:
    minmax(min(var(--amin, 300px), 100%), var(--a, 1fr))
    minmax(min(var(--bmin, 300px), 100%), var(--b, 1fr));
  gap: var(--gap, 56px);
  align-items: var(--ai, center);
}

.cards {
  display: grid;
  /* El min() no es adorno: minmax() con un mínimo fijo NO encoge por debajo
     de ese valor, así que una grilla con --min:520px —la de las fichas de
     asesor— desbordaba la pantalla de un teléfono de 375 px y el texto se
     cortaba a la derecha. Acotar el mínimo al 100% del contenedor deja que
     la columna colapse cuando no cabe. */
  grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 300px), 100%), 1fr));
  gap: var(--gap, 22px);
}

/* Con CUATRO servicios, el ancho automático da tres columnas en escritorio
   y deja la cuarta tarjeta huérfana en una fila sola. Dos columnas se leen
   como matriz y no dejan hueco. Por debajo de 1000px manda el auto-fit con
   el mínimo por defecto de 300px: dos columnas en tablet, una en teléfono.
   Un mínimo de 320px quedaba a dos píxeles del límite en una tablet de 768,
   porque la barra de scroll se come parte del ancho, y caía a una columna. */
@media (min-width: 1000px) {
  .q-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.stack { display: flex; flex-direction: column; gap: var(--gap, 16px); }
.stack--start { align-items: flex-start; }

.row { display: flex; gap: var(--gap, 12px); flex-wrap: wrap; align-items: var(--ai, center); }
.row--between { justify-content: space-between; }
.row--end { align-items: flex-end; }

.lede { margin: 0; font-size: 18px; line-height: 1.6; color: var(--color-neutral-800); }
.body-text { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--color-neutral-800); }
.sec--dark .body-text { color: inherit; opacity: .78; }

/* ─── texto largo (páginas legales) ────────────────────────────────────── */

.prose { max-width: 74ch; }
.prose h2 { margin: 42px 0 12px; font-size: 26px; }
.prose h3 { margin: 28px 0 8px; font-size: 19px; }
.prose p, .prose li { font-size: 15.5px; line-height: 1.7; color: var(--color-neutral-800); }
.prose p { margin: 0 0 14px; }
.prose ul, .prose ol { margin: 0 0 14px; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.prose a { text-decoration: underline; }
.prose__note {
  background: var(--color-accent-100); color: var(--color-accent-800);
  border-radius: var(--radius-lg); padding: 16px 20px;
  font-size: 14px; line-height: 1.6; margin-bottom: 28px;
}
.prose__date { font-size: 13px; color: var(--color-neutral-700); }

/* ─── cabecera ─────────────────────────────────────────────────────────── */

.q-nav {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-divider);
  transition: box-shadow .3s ease, background .3s ease;
}
.q-nav.is-scrolled {
  box-shadow: var(--shadow-sm);
  background: color-mix(in srgb, var(--color-bg) 95%, transparent);
}
.q-nav__inner {
  max-width: 1180px; margin: 0 auto;
  padding: 12px 6vw;
  display: flex; align-items: center; gap: 30px;
  transition: padding .3s ease;
}
.q-nav.is-scrolled .q-nav__inner { padding-block: 7px; }

.q-brand { display: flex; align-items: center; gap: 11px; margin-right: auto; color: var(--color-text); }
.q-brand:hover { color: var(--color-text); }
.q-brand img { display: block; flex: none; transition: transform .35s cubic-bezier(.22,.61,.36,1); }
.q-brand:hover img { transform: rotate(-8deg) scale(1.06); }
.q-brand__name { font-family: var(--font-heading); font-size: 19px; line-height: 1; }
.q-brand__tag {
  font-size: 7.5px; letter-spacing: .22em; text-transform: uppercase;
  white-space: nowrap; color: var(--color-neutral-700);
}

.q-links { display: flex; align-items: center; gap: 20px; font-size: 13.5px; }
/* El CTA vive dos veces en el marcado: en la barra (escritorio) y dentro del
   panel desplegable (móvil). Solo uno se muestra a la vez. */
.q-links .btn-primary { display: none; }
.q-links a { color: var(--color-text); opacity: .75; white-space: nowrap; }
.q-links a:hover { opacity: 1; color: var(--color-accent-700); }
.q-links a[aria-current="page"] { color: var(--color-accent-700); opacity: 1; }
/* El CTA es un botón, no un enlace de navegación: conserva su relleno y su
   texto sobre el acento, aunque viva dentro de .q-links. */
.q-links a.btn-primary,
.q-links a.btn-primary[aria-current="page"] { color: var(--color-bg); opacity: 1; }
.q-links a.btn-primary:hover { color: var(--color-bg); }

.q-menu { position: relative; }
.q-menu-panel {
  position: absolute; top: 100%; left: -14px; padding-top: 12px;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease;
}
.q-menu:hover .q-menu-panel,
.q-menu:focus-within .q-menu-panel { opacity: 1; visibility: visible; transform: none; }
.q-menu-panel__box {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--color-bg); border: 1px solid var(--color-divider);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: 8px; min-width: 236px;
}
.q-menu-panel a { display: block; padding: 9px 14px; border-radius: 999px; opacity: .85; }
.q-menu-panel a:hover { background: var(--color-accent-100); opacity: 1; }

/* barra de progreso de lectura */
.q-progress {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 0;
  background: var(--color-accent);
  transition: width .1s linear;
}

/* botón hamburguesa — solo móvil */
.q-burger {
  display: none; width: 42px; height: 42px; flex: none;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--color-divider);
  border-radius: 999px; cursor: pointer; color: var(--color-text);
}
.q-burger:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.q-burger span {
  display: block; width: 17px; height: 1.6px; background: currentColor; border-radius: 2px;
  position: relative; transition: transform .28s ease, opacity .2s ease;
}
.q-burger span::before, .q-burger span::after {
  content: ""; position: absolute; left: 0; width: 17px; height: 1.6px;
  background: currentColor; border-radius: 2px; transition: transform .28s ease;
}
.q-burger span::before { top: -5.5px; }
.q-burger span::after { top: 5.5px; }
.q-burger[aria-expanded="true"] span { transform: rotate(45deg); }
.q-burger[aria-expanded="true"] span::before { transform: translateY(5.5px) rotate(-90deg); }
.q-burger[aria-expanded="true"] span::after { opacity: 0; }

/* ─── héroe ────────────────────────────────────────────────────────────── */

.q-blob { position: absolute; border-radius: 50%; pointer-events: none; will-change: transform; }
.q-blob--a { top: -180px; right: -140px; width: 560px; height: 560px; background: var(--color-accent-2-100); }
.q-blob--b { bottom: -220px; left: -160px; width: 420px; height: 420px; background: var(--color-accent-100); }
.q-blob--svc { top: -200px; right: -120px; width: 520px; height: 520px; background: var(--color-accent-100); }
.q-blob--svc-2 { top: -200px; right: -120px; width: 520px; height: 520px; background: var(--color-accent-2-100); }

/* El titular declara el nicho, así que es más largo que un lema de tres
   palabras: necesita más ancho de medida y un cuerpo algo menor para no
   partirse en cinco líneas. */
.q-hero__title {
  margin: 0; font-size: clamp(33px, 4.4vw, 50px); line-height: 1.06;
  letter-spacing: -.02em; max-width: 21ch; text-wrap: balance;
}
.q-page__title {
  margin: 0; font-size: clamp(34px, 5.4vw, 52px); line-height: 1.06;
  letter-spacing: -.02em; text-wrap: balance;
}

.q-stats { display: flex; gap: 34px; margin-top: 16px; flex-wrap: wrap; }
.q-stat__n { font-family: var(--font-heading); font-size: 27px; line-height: 1; }
.q-stat__l { font-size: 12px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }

.q-badge {
  position: absolute; bottom: -24px; left: -24px;
  background: var(--color-bg); border-radius: 999px;
  padding: 10px 22px 10px 10px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: var(--shadow-md);
}
.q-badge img { display: block; flex: none; }
.q-badge span { font-size: 13px; line-height: 1.35; max-width: 19ch; }

/* ─── marco de fotografía ──────────────────────────────────────────────── */

.frame { overflow: hidden; box-shadow: var(--shadow-md); border-radius: var(--fr, var(--radius-lg)); }
.frame--lg { box-shadow: var(--shadow-lg); }

/* Marcador de posición: se reemplaza por <img> cuando lleguen las fotos reales. */
.q-photo {
  position: relative; display: grid; place-items: center;
  height: var(--h, 400px); margin: 0;
  background:
    radial-gradient(120% 90% at 20% 0%, var(--color-accent-2-200), transparent 60%),
    linear-gradient(150deg, var(--color-accent-200), var(--color-neutral-300));
}
.q-photo > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.q-photo__hint {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 18px 26px; text-align: center; max-width: 26ch;
  font-size: 12.5px; line-height: 1.5; color: var(--color-neutral-700);
}
.q-photo__hint svg { opacity: .55; }

/* ─── tarjetas de servicio ─────────────────────────────────────────────── */

.q-svc {
  background: var(--color-surface); border-radius: var(--radius-lg); padding: 32px;
  display: flex; flex-direction: column; gap: 15px;
  transition: box-shadow .25s ease, transform .25s ease;
}
.q-svc:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.q-svc h3 { margin: 0; font-size: 23px; line-height: 1.15; }
.q-svc__icon {
  width: 52px; height: 52px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--color-accent-100); color: var(--color-accent-700);
  transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
.q-svc:hover .q-svc__icon { transform: scale(1.08) rotate(-6deg); }
.q-svc__icon--sage { background: var(--color-accent-2-100); color: var(--color-accent-2-700); }
.q-svc__list {
  margin: 4px 0 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 13px; font-size: 14px;
}
.q-svc__list li { display: flex; gap: 10px; }
.q-svc__dash { color: var(--color-accent); flex: none; }
.q-svc__dash--sage { color: var(--color-accent-2-700); }
.q-svc__list strong { font-weight: 600; }
.q-svc .btn-ghost { align-self: flex-start; margin-top: auto; }

/* ─── "por qué elegirnos" ──────────────────────────────────────────────── */

.q-why { display: flex; flex-direction: column; gap: 13px; }
.q-why__n {
  width: 56px; height: 56px; border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, var(--color-neutral-200) 35%, transparent);
  display: grid; place-items: center;
  font-family: var(--font-heading); font-size: 20px; color: var(--color-accent-400);
}
.q-why__n--solid {
  background: var(--color-accent); border-color: var(--color-accent);
  /* Blanco, no navy: navy sobre el verde de marca da 2,19:1. Misma
     combinación que .btn-primary, que da 7,13:1. */
  color: var(--color-bg);
}
.q-why h3 { margin: 0; font-size: 22px; }
.q-why p { margin: 0; font-size: 15px; line-height: 1.6; opacity: .75; }

/* ─── isotipo / símbolo ────────────────────────────────────────────────── */

.q-mark {
  display: grid; place-items: center;
  background: var(--color-bg); border-radius: 50%; aspect-ratio: 1;
  box-shadow: var(--shadow-md); padding: 14%;
}
.q-mark img { width: 100%; height: auto; display: block; }

/* ─── tarjetas "qué incluye" ───────────────────────────────────────────── */

.q-inc {
  background: var(--color-bg); border-radius: var(--radius-lg); padding: 28px;
  display: flex; flex-direction: column; gap: 10px;
  transition: box-shadow .25s ease, transform .25s ease;
}
.q-inc:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.q-inc__t { font-family: var(--font-heading); font-size: 19px; line-height: 1.2; }
.q-inc p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--color-neutral-800); }

.q-sticky { position: sticky; top: 92px; }

/* ═══════════════════════════════════════════════════════════════════════════
   .q-shift — lo que encontramos / con qué queda
   ═══════════════════════════════════════════════════════════════════════════

   Reemplaza a la línea de tiempo de semanas que tenían las cinco páginas de
   servicio. Se cambió por tres razones:

     · La página ya decía QUÉ incluye el servicio, pero en ningún momento le
       permitía al lector reconocer si le hacía falta. Un síntoma descrito con
       precisión hace que un gerente comercial se vea a sí mismo; un
       cronograma no.
     · «Semanas 1–2 … Semanas 8–10» es una promesa de plazo sobre un trabajo
       que todavía no se ha diagnosticado.
     · Deja de repetir lo mismo que las tarjetas de arriba con otro formato.

   La forma es la de la tabla comparativa de Power Switch: encabezados de
   columna en mayúsculas, filas separadas por un filo, la columna que importa
   en tono oscuro y peso alto, y la otra atenuada. El acento se gasta solo en
   la flecha que une las dos: es el único color de la sección.
   ═══════════════════════════════════════════════════════════════════════ */

.q-shift { display: flex; flex-direction: column; }

.q-shift__head,
.q-shift__row {
  display: grid;
  grid-template-columns: 1fr 46px 1fr;
  align-items: center;
  gap: 0;
}

.q-shift__head {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-divider);
}
.q-shift__h {
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--color-neutral-700);
}
/* La columna de la derecha es la que el lector se lleva: se marca. */
.q-shift__h--b { color: var(--color-text); }

.q-shift__row {
  padding: 17px 0;
  border-bottom: 1px solid var(--color-divider);
}
.q-shift__a {
  font-size: 14.5px; line-height: 1.55;
  color: var(--color-neutral-700);
  padding-right: 8px;
}
.q-shift__b {
  font-size: 14.5px; line-height: 1.55; font-weight: 600;
  color: var(--color-text);
}

/* La flecha: el único punto de color de la sección. */
.q-shift__go {
  display: grid; place-items: center;
  color: var(--color-accent);
}
.q-shift__go svg { display: block; }

/* ── animación ────────────────────────────────────────────────────────────
   La fila entra completa por el sistema de aparición en scroll. Dentro de
   ella, la flecha y el resultado llegan DESPUÉS del síntoma, en ese orden:
   la animación cuenta la misma transformación que cuenta el texto, en vez de
   ser decoración. Los retardos se suman al de la cascada, que viene en --i.

   Solo se aplica con JavaScript activo: sin él la fila se ve entera. */

html.js .q-shift__go,
html.js .q-shift__b {
  opacity: 0;
  transition: opacity .5s var(--q-ease), transform .5s var(--q-ease);
}
html.js .q-shift__go { transform: translateX(-7px) scale(.8); }
html.js .q-shift__b  { transform: translateX(-9px); }

html.js .q-shift__row.is-in .q-shift__go,
html.js .q-shift__row.is-in .q-shift__b { opacity: 1; transform: none; }

html.js .q-shift__row .q-shift__go {
  transition-delay: calc(var(--i, 0) * var(--step, 70ms) + 170ms);
}
html.js .q-shift__row .q-shift__b {
  transition-delay: calc(var(--i, 0) * var(--step, 70ms) + 280ms);
}

@media (prefers-reduced-motion: reduce) {
  html.js .q-shift__go,
  html.js .q-shift__b { opacity: 1; transform: none; transition: none; }
}

/* ── responsivo ──────────────────────────────────────────────────────────
   Bajo 700 px las dos columnas no caben sin partir palabras. La fila se
   apila y la flecha gira para seguir apuntando del síntoma al resultado. */
@media (max-width: 700px) {
  .q-shift__head { display: none; }
  .q-shift__row {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 7px;
    padding: 18px 0;
  }
  .q-shift__go { transform: rotate(90deg); margin-left: 2px; }
  html.js .q-shift__go { transform: rotate(90deg) translateX(-7px) scale(.8); }
  html.js .q-shift__row.is-in .q-shift__go { transform: rotate(90deg); }
  .q-shift__a { padding-right: 0; }
  /* Sin encabezados de columna, el resultado necesita otra marca. */
  .q-shift__b { padding-left: 26px; }
}

/* ─── tarjetas de enlace en fondo oscuro ───────────────────────────────── */

.q-link-card {
  background: color-mix(in srgb, var(--color-neutral-100) 8%, transparent);
  border-radius: var(--radius-lg); padding: 26px;
  display: flex; flex-direction: column; gap: 9px;
  color: var(--color-neutral-200);
  transition: background .25s ease, transform .25s ease;
}
.q-link-card:hover {
  background: color-mix(in srgb, var(--color-neutral-100) 14%, transparent);
  transform: translateY(-3px); color: var(--color-neutral-200);
}
.q-link-card__t { font-family: var(--font-heading); font-size: 20px; color: var(--color-neutral-100); }
.q-link-card p { margin: 0; font-size: 14px; line-height: 1.55; opacity: .75; }
/* Blanco sobre el verde (7,13:1). Y el hover OSCURECE: aclarar a accent-400
   dejaba el texto claro en 2,22:1, peor que el estado de reposo. */
.q-link-card--accent { background: var(--color-accent); color: var(--color-bg); }
.q-link-card--accent:hover { background: var(--color-accent-800); color: var(--color-bg); }
.q-link-card--accent .q-link-card__t { color: inherit; }
.q-link-card--accent p { opacity: .85; }

/* ─── casos ────────────────────────────────────────────────────────────── */

.q-case {
  background: var(--color-surface); border-radius: var(--radius-lg); overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow .25s ease, transform .25s ease;
}
.q-case:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.q-case__body { padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.q-case__n {
  font-family: var(--font-heading); font-size: 38px; line-height: 1;
  color: var(--color-accent-700);
}
.q-case__t { font-family: var(--font-heading); font-size: 18px; }
.q-case p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--color-neutral-800); }

.q-logos { display: flex; gap: 16px; flex-wrap: wrap; flex: 1; }
.q-logos > div {
  flex: 1; min-width: 120px; height: 46px; border-radius: var(--radius-md);
  background: var(--color-neutral-200); display: grid; place-items: center;
  font-size: 11px; color: var(--color-neutral-700);
}

/* ─── contacto ─────────────────────────────────────────────────────────── */

.q-form {
  background: var(--color-bg); color: var(--color-text);
  border-radius: var(--radius-lg); padding: 32px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  position: relative;
}
.q-form--surface { background: var(--color-surface); }
.q-form .full { grid-column: 1 / -1; }
.q-form .check {
  grid-column: 1 / -1; display: flex; gap: 11px; align-items: flex-start;
  font-size: 12.5px; line-height: 1.5; color: var(--color-neutral-800); cursor: pointer;
}
.q-form .check input {
  margin-top: 2px; accent-color: var(--color-accent);
  width: 16px; height: 16px; flex: none;
}
.q-form__note {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 8px;
  justify-content: center; font-size: 11.5px; color: var(--color-neutral-700);
  text-align: center;
}
.q-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.q-field-error { display: none; font-size: 11.5px; color: var(--color-accent-700); margin-top: 4px; }
.field.has-error .input { border-color: var(--color-accent); }
.field.has-error .q-field-error { display: block; }
.check.has-error { color: var(--color-accent-700); }

.q-form__status {
  grid-column: 1 / -1; border-radius: var(--radius-lg); padding: 14px 18px;
  font-size: 14px; line-height: 1.5; display: none;
}
.q-form__status.is-ok { display: block; background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.q-form__status.is-bad { display: block; background: var(--color-accent-100); color: var(--color-accent-800); }

.q-contact-list { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; font-size: 14.5px; }
.q-contact-list > * { display: flex; gap: 11px; align-items: center; }
.q-contact-list a { color: inherit; }
.q-contact-list a:hover { color: var(--color-accent-700); }
.sec--dark .q-contact-list a:hover { color: var(--color-accent-400); }

/* ─── pie ──────────────────────────────────────────────────────────────── */

.q-foot {
  background: var(--color-neutral-900); color: var(--color-neutral-300);
  border-top: 1px solid var(--color-accent-2-800);
}
.q-foot a { color: var(--color-neutral-300); white-space: nowrap; }
.q-foot a:hover { color: var(--color-accent-400); }
.q-foot__col { display: flex; flex-direction: column; gap: 9px; font-size: 13.5px; }
.q-foot__h { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .5; }
.q-foot__name { font-family: var(--font-heading); font-size: 18px; color: var(--color-neutral-100); }
.q-foot__bottom {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding-top: 22px;
  border-top: 1px solid color-mix(in srgb, var(--color-neutral-200) 15%, transparent);
  font-size: 12px; opacity: .6;
}

/* ─── banda de cookies ─────────────────────────────────────────────────── */

.q-cookies {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: 18px 6vw 22px; pointer-events: none;
  transform: translateY(120%); transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.q-cookies.is-open { transform: none; }
.q-cookies__box {
  max-width: 1180px; margin: 0 auto;
  background: var(--color-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 20px 24px; display: flex; gap: 22px; align-items: center; flex-wrap: wrap;
  pointer-events: auto; border: 1px solid var(--color-divider);
}
.q-cookies__t { font-family: var(--font-heading); font-size: 16px; }
.q-cookies p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--color-neutral-700); }

/* ─── volver arriba ────────────────────────────────────────────────────── */

.q-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 45;
  width: 46px; height: 46px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--color-accent); color: var(--color-bg);
  border: none; cursor: pointer; box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s, background .2s ease;
}
.q-top.is-on { opacity: 1; visibility: visible; transform: none; }
.q-top:hover { background: var(--color-accent-600); }

/* ─── aparición en scroll ──────────────────────────────────────────────── */

html.js [data-reveal] {
  opacity: 0;
  transform: translateY(var(--rev-y, 24px));
  transition:
    opacity .6s cubic-bezier(.22, .61, .36, 1),
    transform .6s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--rev-d, 0ms);
  will-change: opacity, transform;
}
html.js [data-reveal="left"]  { transform: translateX(-30px); }
html.js [data-reveal="right"] { transform: translateX(30px); }
html.js [data-reveal="zoom"]  { transform: scale(.94); }
html.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Los hijos directos de un contenedor con data-stagger entran en cascada. */
html.js [data-stagger] > * { transition-delay: calc(var(--i, 0) * var(--step, 70ms)); }

/* En una columna la cascada se acumula sobre más elementos: se acorta el paso
   para que el último no llegue demasiado tarde. */
@media (max-width: 760px) {
  html.js [data-stagger] > * { --step: 45ms; }
}

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .q-blob { transform: none !important; }
}

/* ─── responsivo ───────────────────────────────────────────────────────── */

@media (max-width: 1000px) {
  .split { grid-template-columns: 1fr; gap: 40px; }
  .q-sticky { position: static; }
  .q-badge { left: 12px; bottom: -18px; }
}

@media (max-width: 860px) {
  .q-burger { display: inline-flex; }
  .q-nav__inner { gap: 14px; }
  .q-nav > .q-nav__inner > .btn-primary { display: none; }
  .q-links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 4px;
    background: var(--color-bg); border-bottom: 1px solid var(--color-divider);
    box-shadow: var(--shadow-md); padding: 14px 6vw 22px;
    font-size: 16px;
    display: none;
  }
  .q-links.is-open { display: flex; }
  .q-links > a, .q-menu > a { display: block; padding: 11px 4px; }
  .q-menu-panel {
    position: static; opacity: 1; visibility: visible; transform: none;
    padding-top: 0; padding-left: 14px;
  }
  .q-menu-panel__box { border: none; box-shadow: none; background: transparent; padding: 0; min-width: 0; }
  .q-menu-panel a { padding: 9px 10px; }
  .q-links .btn-primary { display: inline-flex; align-self: flex-start; margin-top: 10px; }
}

@media (max-width: 760px) {
  .sec { padding: calc(var(--pt, 72px) * .74) 6vw calc(var(--pb, 72px) * .74); }
  .q-form { grid-template-columns: 1fr; padding: 24px; }
  .q-svc, .q-case__body { padding: 26px; }
  .q-stats { gap: 22px; }
  .q-cookies__box { padding: 18px; gap: 16px; }
  .q-cookies .row { width: 100%; }
  .q-cookies .row .btn { flex: 1; }
  .q-top { right: 14px; bottom: 14px; }
}

@media (max-width: 460px) {
  .q-brand__name { font-size: 17px; }
  .q-photo { --h: 260px; }
}

/* ─── impresión ────────────────────────────────────────────────────────── */

@media print {
  .q-nav, .q-cookies, .q-top, .q-foot { display: none; }
  html.js [data-reveal] { opacity: 1; transform: none; }
  .sec { padding: 18px 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Capa de refuerzo — septiembre 2026
   Ritmo vertical, cifras de resultado, carrusel de clientes y correcciones
   de contraste y movimiento. Todo con tokens del design system.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* Cuatro pasos derivados de --space-8, en vez de nueve valores sueltos.
     El contraste entre --sec-sm y --sec-xl es lo que da acento al scroll. */
  --sec-sm: calc(var(--space-8) * 1.5);
  --sec-md: calc(var(--space-8) * 2);
  --sec-lg: calc(var(--space-8) * 2.6);
  --sec-xl: calc(var(--space-8) * 3.2);

  --q-ease: cubic-bezier(.22, .61, .36, 1);
}

.sec--sm { --pt: var(--sec-sm); --pb: var(--sec-sm); }
.sec--md { --pt: var(--sec-md); --pb: var(--sec-md); }
.sec--lg { --pt: var(--sec-lg); --pb: var(--sec-lg); }
.sec--xl { --pt: var(--sec-xl); --pb: var(--sec-xl); }

/* ─── contraste del texto atenuado ─────────────────────────────────────── */
/* El DS atenúa con color-mix al 55% de --color-text. Compuesto sobre el
   crema da 3,57:1, bajo el 4,5:1 que WCAG AA pide para texto pequeño.
   El tono 700 de la rampa neutra da 5,53:1 sin salir del sistema. */
.text-muted,
.q-stat__l,
figcaption { color: var(--color-neutral-700); }

/* Sobre fondo oscuro ese mismo tono sería ilegible: se invierte la rampa. */
.sec--dark .text-muted,
.sec--dark .q-stat__l,
.q-foot .text-muted { color: var(--color-neutral-300); }

/* ─── cifra de resultado ───────────────────────────────────────────────── */
/* Reemplaza la tarjeta de caso con foto: la cifra pasa a ser el objeto
   principal y la placa de color ocupa el lugar que tenía la imagen. */

.q-figure {
  background: var(--color-surface);
  border-radius: calc(var(--radius-lg) * 1.15);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow .25s var(--q-ease), transform .25s var(--q-ease);
}
.q-figure:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }

.q-figure__plate {
  padding: var(--space-6) var(--space-6) var(--space-4);
  border-bottom: 1px solid var(--color-divider);
  background:
    radial-gradient(120% 120% at 12% 0%, var(--color-accent-200), transparent 62%),
    var(--color-accent-100);
}
/* La grilla alterna tinte de acento y de salvia: da ritmo sin introducir
   un color que no esté en el sistema. */
.q-figure:nth-child(3n+2) .q-figure__plate {
  background:
    radial-gradient(120% 120% at 12% 0%, var(--color-accent-2-200), transparent 62%),
    var(--color-accent-2-100);
}

.q-figure__n {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: clamp(46px, 5.4vw, 66px);
  line-height: .92;
  letter-spacing: -.03em;
  color: var(--color-accent-800);
  font-variant-numeric: tabular-nums;
}
.q-figure:nth-child(3n+2) .q-figure__n { color: var(--color-accent-2-800); }

.q-figure__unit {
  margin-top: var(--space-2);
  font-size: 13.5px; font-weight: 600; line-height: 1.4;
  color: var(--color-neutral-800);
}

.q-figure__body {
  padding: var(--space-4) var(--space-6) var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-3);
  align-items: flex-start; flex: 1;
}
.q-figure__body p {
  margin: 0; font-size: 14px; line-height: 1.6; color: var(--color-neutral-800);
}
.q-figure__src {
  margin-top: auto; padding-top: var(--space-2);
  font-size: 12px; color: var(--color-neutral-700);
}

/* La cifra y su unidad entran después de que la tarjeta aterriza: primero
   se posa el objeto, luego se afirma el dato. */
html.js .q-figure[data-reveal] .q-figure__n,
html.js .q-figure[data-reveal] .q-figure__unit {
  opacity: 0; transform: translateY(12px);
  transition: opacity .5s var(--q-ease), transform .5s var(--q-ease);
}
html.js .q-figure[data-reveal] .q-figure__n    { transition-delay: 140ms; }
html.js .q-figure[data-reveal] .q-figure__unit { transition-delay: 220ms; }
html.js .q-figure[data-reveal].is-in .q-figure__n,
html.js .q-figure[data-reveal].is-in .q-figure__unit { opacity: 1; transform: none; }

@media (max-width: 760px) {
  .q-figure__plate { padding: var(--space-4) var(--space-4) var(--space-3); }
  .q-figure__body  { padding: var(--space-3) var(--space-4) var(--space-4); }
}

/* ─── carrusel de clientes e industrias ────────────────────────────────── */

.q-marquee {
  --q-logo-h: 38px;
  --q-marquee-gap: calc(var(--space-8) * 1.6);
  --q-marquee-fade: var(--space-8);
  --q-marquee-dur: 40s;
  --q-marquee-bg: var(--color-bg);
}

.q-marquee__head {
  margin-bottom: var(--space-4);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--color-neutral-700);
}

.q-marquee__viewport {
  overflow: hidden;
  /* Fondo opaco obligatorio: mask-image crea un grupo de aislamiento, y sin
     un fondo detrás el mix-blend-mode:multiply de los logos no mezcla nada
     y los recuadros blancos de los JPG no se disuelven. */
  background: var(--q-marquee-bg);
  -webkit-mask-image: linear-gradient(90deg, transparent, currentColor var(--q-marquee-fade),
                      currentColor calc(100% - var(--q-marquee-fade)), transparent);
          mask-image: linear-gradient(90deg, transparent, currentColor var(--q-marquee-fade),
                      currentColor calc(100% - var(--q-marquee-fade)), transparent);
}

.q-marquee__track { display: flex; width: max-content; }
.q-marquee.is-ready:not(.is-static) .q-marquee__track {
  animation: q-marquee-run var(--q-marquee-dur) linear infinite;
}
@keyframes q-marquee-run {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.q-marquee__group { display: flex; margin: 0; padding: 0; list-style: none; }

/* La separación viaja como margen de la celda, no como gap del track: así
   cada grupo incluye su propio aire final, el track mide exactamente dos
   grupos y el -50% empalma sin salto visible. */
.q-marquee__item {
  flex: none; display: grid; place-items: center;
  height: var(--q-logo-h); min-width: 132px;
  margin-right: var(--q-marquee-gap);
}
.q-marquee__item img {
  max-height: 100%; max-width: 100%; width: auto; height: auto;
  mix-blend-mode: multiply;
  filter: grayscale(1) opacity(.62) contrast(1.05);
  transition: filter .26s var(--q-ease);
}
/* Escape para logos diseñados en blanco sobre oscuro. */
.q-marquee__item[data-invert] img { filter: grayscale(1) invert(1) opacity(.62); }

/* Celdas de industria: la franja de respaldo mientras no hay logos. */
.q-marquee__item--word {
  min-width: auto; gap: var(--space-2);
  font-family: var(--font-heading); font-size: 17px; line-height: 1;
  color: var(--color-neutral-700); white-space: nowrap;
  grid-auto-flow: column; align-items: center;
}
.q-marquee__item--word::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--color-accent-300);
}

/* Color y pausa solo en punteros finos: en táctil el :hover queda pegado
   tras el primer toque y la franja se detendría sin poder reanudarla. */
@media (hover: hover) and (pointer: fine) {
  .q-marquee__item img:hover { filter: none; }
  .q-marquee:hover .q-marquee__track,
  .q-marquee:focus-within .q-marquee__track { animation-play-state: paused; }
}

/* Sin movimiento: una sola copia, navegable con dedo o teclado. */
.q-marquee.is-static .q-marquee__track { width: auto; animation: none; }
.q-marquee.is-static .q-marquee__viewport {
  overflow-x: auto; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.q-marquee.is-static .q-marquee__item { scroll-snap-align: center; }

@media (max-width: 760px) {
  .q-marquee {
    --q-logo-h: 30px;
    --q-marquee-gap: var(--space-8);
    --q-marquee-fade: var(--space-6);
  }
  .q-marquee__item { min-width: 108px; }
  .q-marquee__item--word { font-size: 15px; }
}

/* ─── riel de etapas ───────────────────────────────────────────────────── */
/* ─── cita / testimonio ────────────────────────────────────────────────── */

.q-quote { display: flex; flex-direction: column; gap: var(--space-4); max-width: 30ch; }
.q-quote__text {
  margin: 0; font-family: var(--font-heading);
  font-size: clamp(22px, 2.6vw, 30px); line-height: 1.25; letter-spacing: -.015em;
}
.q-quote__text::before { content: "\201C"; color: var(--color-accent-400); }
.q-quote__who  { font-size: 14px; font-weight: 600; }
.q-quote__role { font-size: 13px; color: var(--color-neutral-700); }

/* ─── movimiento: transición del menú móvil ────────────────────────────── */
/* El botón hamburguesa anima sus tres líneas con esmero y el panel que abre
   pasaba de display:none a display:flex, es decir, de golpe. */

@media (max-width: 860px) {
  .q-links {
    display: flex;
    visibility: hidden; opacity: 0; pointer-events: none;
    transform: translateY(-8px);
    transition: opacity .22s var(--q-ease), transform .22s var(--q-ease), visibility .22s;
  }
  .q-links.is-open {
    visibility: visible; opacity: 1; transform: none; pointer-events: auto;
  }
}

@media (max-width: 760px) {
  /* Apilado en una columna cada tarjeta ya entra por separado al hacer
     scroll: el retardo acumulado solo se percibe como lentitud. */
  html.js [data-stagger] > * { --step: 0ms; }
}

@media (prefers-reduced-motion: reduce) {
  .q-links { transition: none; }
  .q-marquee .q-marquee__track { animation: none !important; }
  html.js .q-figure[data-reveal] .q-figure__n,
  html.js .q-figure[data-reveal] .q-figure__unit {
    opacity: 1; transform: none; transition: none;
  }
}

/* ─── ficha de asesor ──────────────────────────────────────────────────── */
/* La evidencia principal de la firma es la trayectoria de quien asesora.
   La ficha está pensada para que un gerente general la cruce con LinkedIn
   en treinta segundos: cargo, años, alcance y formación verificables. */

.q-perfil {
  background: var(--color-surface);
  border-radius: calc(var(--radius-lg) * 1.15);
  padding: var(--space-8);
  display: grid;
  grid-template-columns: 148px 1fr;
  gap: var(--space-8);
  align-items: start;
}

.q-perfil__foto {
  width: 148px; aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  background: var(--color-accent-2-100);
  display: grid; place-items: center;
  overflow: hidden;
}
.q-perfil__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Mientras no hay retrato, el isotipo. Se lee como decisión de marca. */
.q-perfil__foto img.q-perfil__marca {
  width: 58%; height: auto; object-fit: contain; opacity: .45;
}

.q-perfil__cuerpo { display: flex; flex-direction: column; gap: var(--space-3); }
.q-perfil__nombre { font-family: var(--font-heading); font-size: 26px; line-height: 1.1; }
.q-perfil__rol {
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-accent-700); font-weight: 600;
}
.q-perfil__cuerpo p {
  margin: 0; font-size: 15px; line-height: 1.65; color: var(--color-neutral-800);
}

/* Datos duros: lo que un comité de compra revisa primero. */
.q-perfil__datos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
  margin: var(--space-2) 0;
}
.q-perfil__dato { display: flex; flex-direction: column; gap: 3px; }
.q-perfil__dato b {
  font-family: var(--font-heading); font-size: 22px; line-height: 1;
  /* El 400 estaba para neutralizar la negrita del <b> cuando la familia era
     Caprasimo, que no tenía más de un peso. Con Inter esta cifra es el dato
     duro de la ficha y va en extrabold, como el resto de las cifras. */
  font-weight: 800; color: var(--color-accent-800);
  font-variant-numeric: tabular-nums;
}
.q-perfil__dato span { font-size: 12px; line-height: 1.35; color: var(--color-neutral-700); }

.q-perfil__meta { font-size: 13.5px; line-height: 1.6; color: var(--color-neutral-700); }
.q-perfil__meta strong { color: var(--color-neutral-800); font-weight: 600; }

@media (max-width: 760px) {
  .q-perfil {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    padding: var(--space-6);
  }
  .q-perfil__foto { width: 118px; }
  .q-perfil__nombre { font-size: 23px; }
}