/* =========================================================================
   GRID S.A. — Estilos generales
   Base: referencia de diseño "Dala" adaptada a la identidad de GRID.
   ========================================================================= */

/* ---------- Tokens: modo oscuro (predeterminado) ---------- */
:root {
  --negro: #000000;
  --cian: #00D6FF;
  --verde: #00CA00;
  --violeta: #514AFF;

  --fondo: #000000;
  --texto: #FFFFFF;
  --texto-2: #BDBDBD;
  --texto-3: #9A9A9A;
  --linea: rgba(255, 255, 255, 0.14);
  --acento: #00D6FF;          /* etiquetas y énfasis */
  --acento-2: #00CA00;
  --boton: #514AFF;
  --boton-texto: #FFFFFF;
  --boton-hover: #6560FF;
  --velo: rgba(0, 0, 0, 0.78); /* halo detrás de los textos sobre partículas */
  --nav-fondo: rgba(0, 0, 0, 0.55);
  --cr-azul: #00D6FF;          /* acentos propios de Chain Reaction (sin violeta) */
  --cr-verde: #00CA00;

  --fuente: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ancho: 1280px;
  --margen: clamp(16px, 4vw, 48px);
  --radio: 24px;
  --t-display: clamp(46px, 6.8vw, 104px);
  --t-grande: clamp(38px, 5.6vw, 78px);
  --t-titulo: clamp(30px, 3.6vw, 48px);
  --t-sub: clamp(22px, 2.4vw, 30px);
  --peso-cuerpo: 300;
  color-scheme: dark;
}

/* ---------- Tokens: modo claro ---------- */
:root[data-theme="light"] {
  --fondo: #FAFAFB;
  --texto: #0B0B0F;
  --texto-2: #3B3D45;
  --texto-3: #5E616B;
  --linea: rgba(0, 0, 0, 0.12);
  --acento: #007FA3;
  --acento-2: #007A00;
  --boton: #514AFF;
  --boton-texto: #FFFFFF;
  --boton-hover: #3E37E8;
  --velo: rgba(250, 250, 251, 0.86);
  --nav-fondo: rgba(250, 250, 251, 0.7);
  --cr-azul: #122CA6;
  --cr-verde: #007A00;
  --peso-cuerpo: 400;
  color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  font-weight: var(--peso-cuerpo);
  font-size: 18px;
  line-height: 1.55;
  font-feature-settings: "ss01" on, "cv11" on;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color .5s ease, color .5s ease;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { font-weight: 400; margin: 0; letter-spacing: -0.04em; line-height: 1.05; }
::selection { background: var(--violeta); color: #fff; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 4px; border-radius: 6px; }

.saltar {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--boton); color: #fff; padding: 10px 16px; border-radius: 12px; text-decoration: none;
}
.saltar:focus { top: 12px; }

/* Lienzo de partículas: fijo, detrás del contenido */
#particulas {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  z-index: 0; pointer-events: none;
}
.contenido { position: relative; z-index: 1; overflow-x: clip; }

/* ---------- Navegación ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding: 14px var(--margen);
  transition: background-color .35s ease, backdrop-filter .35s ease, padding .35s ease;
}
.nav.con-fondo { background: var(--nav-fondo); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.nav__fila { max-width: var(--ancho); margin: 0 auto; display: flex; align-items: center; gap: 24px; }
.nav__logo { display: flex; align-items: center; color: var(--texto); text-decoration: none; flex-shrink: 0; }
.nav__logo svg { height: 40px; width: auto; }
.nav__menu { display: flex; align-items: center; gap: 4px; margin: 0 0 0 auto; padding: 0; list-style: none; }
.nav__menu > li { position: relative; }
.nav__enlace {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--texto-3); text-decoration: none; background: none; border: 0; cursor: pointer; font-family: inherit;
  transition: color .2s ease;
}
.nav__enlace:hover, .nav__enlace[aria-current="page"], .nav__menu > li:focus-within > .nav__enlace { color: var(--texto); }
.nav__sub {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 250px;
  list-style: none; margin: 0; padding: 10px;
  background: var(--fondo); border: 1px solid var(--linea); border-radius: 18px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.nav__menu > li:hover > .nav__sub, .nav__menu > li:focus-within > .nav__sub { opacity: 1; visibility: visible; transform: none; }
.nav__sub a { display: block; padding: 10px 12px; border-radius: 12px; text-decoration: none; font-size: 15px; color: var(--texto-2); font-weight: 400; }
.nav__sub a:hover, .nav__sub a[aria-current="page"] { color: var(--texto); background: var(--linea); }
.nav__acciones { display: flex; align-items: center; gap: 8px; }
.icono-btn {
  width: 42px; height: 42px; border-radius: 999px; display: inline-grid; place-items: center;
  background: transparent; color: var(--texto); border: 1px solid var(--linea); cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}
.icono-btn:hover { border-color: var(--texto-3); }
.icono-btn svg { width: 18px; height: 18px; }
.tema-sol { display: none; }
:root[data-theme="light"] .tema-sol { display: block; }
:root[data-theme="light"] .tema-luna { display: none; }
.nav__hamburguesa { display: none; }

/* Control de movimiento (flotante) */
.control-mov {
  position: fixed; right: 16px; bottom: 16px; z-index: 40;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 999px;
  background: var(--nav-fondo); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--linea); color: var(--texto);
  font: 600 12px/1 var(--fuente); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
}
.control-mov svg { width: 14px; height: 14px; }
.control-mov .ic-play { display: none; }
.movimiento-pausado .control-mov .ic-play { display: block; }
.movimiento-pausado .control-mov .ic-pausa { display: none; }

/* ---------- Botones ---------- */
.botones { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 22px; border-radius: 999px; min-height: 48px;
  font: 600 14px/1 var(--fuente); letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.btn--principal { background: var(--boton); color: var(--boton-texto); }
.btn--principal:hover { background: var(--boton-hover); transform: translateY(-1px); }
.btn--fantasma { color: var(--texto); border-color: var(--linea); background: transparent; }
.btn--fantasma:hover { border-color: var(--texto); }
.btn .flecha { transition: transform .25s ease; }
.btn:hover .flecha { transform: translateX(3px); }
.enlace-flecha {
  display: inline-flex; align-items: center; gap: 8px; color: var(--texto); text-decoration: none;
  font: 600 13px/1 var(--fuente); letter-spacing: 0.08em; text-transform: uppercase;
  border-bottom: 1px solid var(--linea); padding-bottom: 6px;
}
.enlace-flecha:hover { border-color: var(--acento); }

/* ---------- Estructura ---------- */
.envoltura { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); }
.seccion { position: relative; padding: clamp(80px, 14vh, 150px) 0; }
.seccion--pantalla { min-height: 100vh; display: flex; align-items: center; }
.seccion--alta { min-height: 130vh; display: flex; align-items: center; }
.dos-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.col-texto { max-width: 640px; }
.col-der { grid-column: 2; }
.legible { position: relative; }
.legible::before {
  content: ""; position: absolute; inset: -60px -80px; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at center, var(--velo) 0%, var(--velo) 38%, transparent 72%);
}

.etiqueta {
  display: inline-block; margin-bottom: 18px;
  font: 600 13px/1.3 var(--fuente); letter-spacing: 0.1em; text-transform: uppercase; color: var(--acento);
}
.etiqueta--verde { color: var(--acento-2); }
.display { font-size: var(--t-display); line-height: 0.98; letter-spacing: -0.045em; margin-bottom: 28px; }
.display strong, .grande strong, .titulo strong { font-weight: 600; }
.grande { font-size: var(--t-grande); line-height: 1.02; margin-bottom: 24px; }
.titulo { font-size: var(--t-titulo); line-height: 1.08; margin-bottom: 20px; }
.subtitulo { font-size: var(--t-sub); line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 12px; }
.bajada { font-size: clamp(18px, 1.5vw, 21px); color: var(--texto-2); max-width: 560px; margin-bottom: 32px; }
.texto-2 { color: var(--texto-2); }
.firma-marca {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 36px;
  font-size: 15px; color: var(--texto-3); letter-spacing: 0.02em;
}
.firma-marca::before { content: ""; width: 28px; height: 1px; background: currentColor; }

/* Frases grandes centradas (como el manifiesto de la referencia) */
.manifiesto { text-align: center; max-width: 980px; margin: 0 auto; }
.manifiesto p {
  font-size: clamp(26px, 3.4vw, 46px); line-height: 1.18; letter-spacing: -0.03em;
  color: var(--texto); font-weight: 400; margin-bottom: 0.9em;
}
.manifiesto p.tenue { color: var(--texto-3); }

/* Listas sin cajas: elementos flotando separados por líneas finas */
.lista-limpia { list-style: none; margin: 0; padding: 0; }
.lista-limpia li { padding: 18px 0; border-top: 1px solid var(--linea); }
.lista-limpia li:last-child { border-bottom: 1px solid var(--linea); }
.lista-limpia strong { font-weight: 600; display: block; margin-bottom: 4px; font-size: 19px; }
.lista-limpia span { color: var(--texto-2); }
.lista-puntos { margin: 0 0 1em; padding-left: 1.1em; color: var(--texto-2); }
.lista-puntos li { margin-bottom: 6px; }

.rejilla-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 56px); }
.rejilla-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(28px, 4vw, 64px); }
.bloque h3 { font-size: clamp(22px, 2vw, 27px); letter-spacing: -0.02em; margin-bottom: 12px; }
.bloque p { color: var(--texto-2); }
.numero { font: 600 13px/1 var(--fuente); letter-spacing: 0.1em; color: var(--acento); display: block; margin-bottom: 16px; }

/* Productos */
.producto { padding: 36px 0; border-top: 1px solid var(--linea); }
.producto__logo { height: 54px; width: auto; color: var(--texto); margin-bottom: 22px; }
.producto__nombre { font-size: clamp(30px, 3.4vw, 46px); margin-bottom: 14px; }
.producto--cr .etiqueta { color: var(--cr-azul); }
.producto--cr .numero, .cr .etiqueta, .cr .numero { color: var(--cr-azul); }
.cr .etiqueta--verde { color: var(--cr-verde); }
.cr .btn--principal { background: var(--cr-azul); color: #000; }
:root[data-theme="light"] .cr .btn--principal { color: #fff; }
.cr .btn--principal:hover { filter: brightness(1.08); background: var(--cr-azul); }
.cr ::selection { background: var(--cr-azul); color: #000; }

.pendiente {
  display: block; padding: 18px 20px; border: 1px dashed var(--texto-3); border-radius: 16px;
  color: var(--texto-2); font-size: 15px;
}
.pendiente strong { color: var(--texto); font-weight: 600; }
.marca-pendiente {
  display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 18px; margin-bottom: 22px;
  border: 1px dashed var(--texto-3); border-radius: 14px; font-size: 13px; color: var(--texto-3);
  letter-spacing: 0.06em; text-transform: uppercase;
}

/* Etapas (Greenfield / Brownfield) */
.etapas { list-style: none; margin: 0; padding: 0; counter-reset: etapa; }
.etapas li { counter-increment: etapa; display: grid; grid-template-columns: 52px 1fr; gap: 8px; padding: 14px 0; border-top: 1px solid var(--linea); }
.etapas li::before { content: counter(etapa, decimal-leading-zero); font: 600 13px/1.9 var(--fuente); color: var(--acento); letter-spacing: 0.08em; }
.cr .etapas li::before { color: var(--cr-azul); }

/* Testimonios */
.cita { margin: 0; padding: 32px 0; border-top: 1px solid var(--linea); }
.cita blockquote { margin: 0 0 18px; font-size: clamp(20px, 1.9vw, 26px); line-height: 1.35; letter-spacing: -0.015em; font-weight: 400; }
.cita figcaption { color: var(--texto-3); font-size: 15px; }
.cita figcaption strong { color: var(--acento); font-weight: 600; display: block; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 4px; }

/* Equipo */
.persona { padding-top: 24px; border-top: 1px solid var(--linea); }
.persona__foto {
  aspect-ratio: 4 / 5; border-radius: var(--radio); margin-bottom: 22px;
  display: grid; place-items: center; text-align: center; padding: 20px;
  border: 1px dashed var(--texto-3); color: var(--texto-3); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
}
.persona__rol { font: 400 12px/1.4 var(--fuente); letter-spacing: 0.1em; text-transform: uppercase; color: var(--acento); margin-bottom: 8px; }
.persona__nombre { font-size: 27px; letter-spacing: -0.02em; margin-bottom: 10px; }

/* Ideas */
.idea { padding: 30px 0; border-top: 1px solid var(--linea); display: grid; grid-template-columns: 200px 1fr; gap: 24px; }
.idea__tema { font: 600 12px/1.6 var(--fuente); letter-spacing: 0.1em; text-transform: uppercase; color: var(--acento); }
.idea h3 { font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -0.02em; margin-bottom: 10px; }

/* Formulario */
.formulario { display: grid; gap: 18px; }
.campo { display: grid; gap: 8px; }
.campo label { font: 600 12px/1 var(--fuente); letter-spacing: 0.1em; text-transform: uppercase; color: var(--texto-3); }
.campo input, .campo textarea, .campo select {
  width: 100%; padding: 15px 18px; border-radius: 16px; font: 400 17px/1.4 var(--fuente);
  background: transparent; color: var(--texto); border: 1px solid var(--linea);
  transition: border-color .2s ease;
}
.campo select option { color: #000; }
.campo textarea { min-height: 150px; resize: vertical; }
.campo input:focus, .campo textarea:focus, .campo select:focus { outline: none; border-color: var(--acento); }
.oculto { position: absolute !important; left: -9999px; }
.aviso-form { font-size: 15px; color: var(--texto-2); min-height: 1.4em; }

/* Encabezado de subpáginas */
.cabecera { min-height: 92vh; display: flex; align-items: center; padding-top: 120px; }
.migas { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-3); margin-bottom: 26px; }
.migas a { color: var(--texto-3); text-decoration: none; }
.migas a:hover { color: var(--texto); }

/* Llamado final */
.cta { text-align: center; }
.cta .botones { justify-content: center; }
.cta .bajada { margin-left: auto; margin-right: auto; }

/* ---------- Pie ---------- */
.pie { position: relative; z-index: 1; padding: 80px 0 100px; border-top: 1px solid var(--linea); background: var(--fondo); }
.pie__fila { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.pie__logo svg { height: 64px; width: auto; color: var(--texto); margin-bottom: 18px; }
.pie h4 { font: 600 12px/1 var(--fuente); letter-spacing: 0.1em; text-transform: uppercase; color: var(--texto-3); margin-bottom: 18px; }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: 10px; }
.pie a { color: var(--texto-2); text-decoration: none; font-size: 15px; }
.pie a:hover { color: var(--texto); }
.pie__firma { font-size: 20px; letter-spacing: -0.02em; color: var(--texto); margin-bottom: 10px; }
.pie__legal { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--linea); color: var(--texto-3); font-size: 13px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }

/* ---------- Apariciones al hacer scroll ---------- */
.js .aparece { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.js .aparece.visible { opacity: 1; transform: none; }
.js .aparece[data-retraso="1"] { transition-delay: .12s; }
.js .aparece[data-retraso="2"] { transition-delay: .24s; }
.js .aparece[data-retraso="3"] { transition-delay: .36s; }
@media (prefers-reduced-motion: reduce) {
  .js .aparece { opacity: 1; transform: none; transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .nav__enlace { padding: 10px 8px; font-size: 12px; }
  .pie__fila { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
  .nav__menu {
    position: fixed; inset: 0; z-index: -1; flex-direction: column; align-items: stretch; gap: 0;
    padding: 96px var(--margen) 40px; background: var(--fondo); overflow-y: auto;
    opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s;
  }
  .menu-abierto .nav__menu { opacity: 1; visibility: visible; }
  .menu-abierto { overflow: hidden; }
  .nav__menu > li { border-bottom: 1px solid var(--linea); }
  .nav__enlace { font-size: 15px; padding: 18px 0; width: 100%; justify-content: space-between; color: var(--texto); }
  .nav__sub { position: static; opacity: 1; visibility: visible; transform: none; border: 0; padding: 0 0 12px; background: none; min-width: 0; }
  .nav__sub a { padding: 8px 0 8px 14px; }
  .nav__hamburguesa { display: inline-grid; }
  .nav__acciones { margin-left: auto; }
  .nav__logo svg { height: 34px; }
}
@media (max-width: 860px) {
  .dos-col, .rejilla-2, .rejilla-3 { grid-template-columns: 1fr; }
  .col-der { grid-column: auto; }
  .idea { grid-template-columns: 1fr; gap: 8px; }
  /* en celular, la figura queda arriba y el texto en la mitad inferior */
  .seccion--pantalla, .seccion--alta, .cabecera { align-items: flex-end; padding-top: 40vh; padding-bottom: 72px; min-height: 100vh; }
  .display { font-size: clamp(40px, 10.5vw, 72px); }
  .seccion--pantalla.texto-arriba { align-items: center; padding-top: 120px; }
  .legible::before { inset: -40px -24px; }
}
@media (max-width: 560px) {
  body { font-size: 17px; }
  .pie__fila { grid-template-columns: 1fr; }
  .btn { width: 100%; justify-content: center; }
  .control-mov { right: 12px; bottom: 12px; padding: 10px 12px; }
}

/* =========================================================================
   v2 — Desplegables, línea de tiempo y franja de clientes
   ========================================================================= */

/* Botón para abrir los desplegables con clic, toque o teclado */
.con-sub { display: flex; align-items: center; }
.nav__abrir {
  width: 26px; height: 26px; margin-left: -6px; padding: 0; display: inline-grid; place-items: center;
  background: none; border: 0; border-radius: 999px; color: var(--texto-3); cursor: pointer;
}
.nav__abrir svg { width: 12px; height: 12px; transition: transform .2s ease; }
.nav__abrir:hover, .con-sub.abierto > .nav__abrir { color: var(--texto); }
.con-sub.abierto > .nav__abrir svg { transform: rotate(180deg); }
.nav__menu > li.abierto > .nav__sub { opacity: 1; visibility: visible; transform: none; }
@media (max-width: 960px) {
  .con-sub { display: block; }
  .nav__abrir { display: none; }
}

/* Línea de tiempo */
.linea-tiempo {
  list-style: none; margin: 40px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative;
}
.linea-tiempo::before {
  content: ""; position: absolute; left: 0; right: 0; top: 13px; height: 1px;
  background: linear-gradient(90deg, var(--verde), var(--cian), var(--violeta));
  opacity: .7;
}
.hito { position: relative; padding-top: 44px; }
.hito::before {
  content: ""; position: absolute; top: 6px; left: 0; width: 15px; height: 15px; border-radius: 50%;
  background: var(--fondo); border: 2px solid var(--acento);
}
.hito__anio {
  display: block; font-size: clamp(40px, 4.6vw, 64px); line-height: 1; letter-spacing: -0.04em;
  font-weight: 300; color: var(--texto); margin-bottom: 14px;
}
.hito__texto { display: block; font-size: 18px; color: var(--texto-2); max-width: 240px; }
@media (max-width: 860px) {
  .linea-tiempo { grid-template-columns: 1fr; gap: 0; padding-left: 34px; }
  .linea-tiempo::before { left: 7px; right: auto; top: 8px; bottom: 8px; width: 1px; height: auto;
    background: linear-gradient(180deg, var(--verde), var(--cian), var(--violeta)); }
  .hito { padding: 0 0 34px; }
  .hito::before { left: -34px; top: 8px; }
  .hito__anio { font-size: 44px; margin-bottom: 6px; }
}

/* Franja de clientes (logos en movimiento continuo) */
.clientes { overflow: hidden; }
.clientes__pista {
  position: relative; margin-top: 36px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.clientes__cinta { display: flex; flex-wrap: nowrap; width: max-content; animation: cinta 58s linear infinite; }
.clientes__pista:hover .clientes__cinta, .movimiento-pausado .clientes__cinta { animation-play-state: paused; }
/* logos: v4 (50 % de la v3) × 1,30 = 31 px de alto; siempre en una sola fila horizontal */
.clientes__lista { display: flex; flex-wrap: nowrap; align-items: center; gap: 62px; list-style: none; margin: 0; padding: 0 31px; }
.clientes__logo { flex: none; height: 52px; display: grid; place-items: center; }
.clientes__logo img { height: 31.2px; width: auto; max-width: 110.5px; object-fit: contain; }
.logo-claro { display: none; }
:root[data-theme="light"] .logo-claro { display: block; }
:root[data-theme="light"] .logo-oscuro { display: none; }
@keyframes cinta { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 560px) {
  .clientes__lista { gap: 42px; padding: 0 21px; }
  .clientes__logo { height: 42px; }
  .clientes__logo img { height: 23.4px; max-width: 78px; }
  .clientes__cinta { animation-duration: 49s; }
}
@media (prefers-reduced-motion: reduce) {
  .clientes__pista { -webkit-mask-image: none; mask-image: none; }
  .clientes__cinta { animation: none; width: auto; }
  .clientes__lista { flex-wrap: wrap; justify-content: center; row-gap: 28px; }
  .clientes__lista[aria-hidden="true"] { display: none; }
}
[id] { scroll-margin-top: 80px; }
img.persona__foto { width: 100%; height: auto; padding: 0; border: 0; object-fit: cover; display: block; background: var(--linea); }

/* v6 — Logo de Factor RH, aviso de privacidad y página legal */
.producto__logo--frh { height: 86px; width: auto; margin-bottom: 22px; }
.nota-privacidad { font-size: 13px; color: var(--texto-3); margin: -4px 0 0; }
.nota-privacidad a, .texto-legal a, .pie__legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.texto-legal { max-width: 780px; }
.texto-legal h2.subtitulo { font-size: clamp(20px, 2vw, 24px); margin: 40px 0 12px; }
.texto-legal p, .texto-legal li { color: var(--texto-2); font-size: 17px; }
.texto-legal code { font-size: 15px; padding: 1px 6px; border-radius: 6px; background: var(--linea); }