/* =============================================================================
   GSS · Modules Rail (productos) — marker .gss-modules
   Carrusel horizontal de módulos de la plataforma GRC.
   Portado de ModulesRail.jsx (Claude Design). CSS namespaced bajo .gss-modules.
   ============================================================================= */

.gss-modules {
  padding: 120px 0 80px;
  /* contención: aísla layout/paint del resto de la página (perf) */
  contain: layout paint;
}

.gss-modules .gss-modules__inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 32px;
}

.gss-modules__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 48px;
  gap: 32px;
  flex-wrap: wrap;
}

.gss-modules__title {
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--gss-ink-950, #020a22);
  max-width: 720px;
  margin: 0;
}
.gss-modules__title .gss-modules__accent { color: var(--gss-neon-blue, #5078ff); }
.gss-modules__title .gss-modules__muted { color: var(--gss-ink-400, #9aa0ad); font-weight: 300; }

.gss-modules__nav { display: flex; gap: 8px; flex-shrink: 0; }
.gss-modules__nav button {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--gss-ink-950, #020a22);
  color: #fff;
  font-size: 18px;
  border: 0;
  cursor: pointer;
  /* solo transform/background (GPU-friendly), nunca all */
  transition: background 180ms var(--ease-emph, cubic-bezier(.2,.8,.2,1)),
              transform 180ms var(--ease-emph, cubic-bezier(.2,.8,.2,1));
  display: flex; align-items: center; justify-content: center;
  -webkit-appearance: none; appearance: none;
}
.gss-modules__nav button:hover { background: var(--gss-neon-blue, #5078ff); transform: translateY(-1px); }
.gss-modules__nav button:disabled {
  background: var(--gss-ink-200, #dfe3ea);
  color: var(--gss-ink-400, #9aa0ad);
  cursor: not-allowed;
  transform: none;
}
.gss-modules__nav button:focus-visible {
  outline: 2px solid var(--gss-neon-blue, #5078ff);
  outline-offset: 2px;
}

.gss-modules__rail {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 0 32px;
  scrollbar-width: none;
  scroll-behavior: smooth;
  /* permite swipe horizontal fluido en móvil sin bloquear scroll vertical */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  /* touch-action: pan-x permite el desplazamiento horizontal por gesto; pan-y
     deja que el scroll vertical de la página siga funcionando sobre el rail */
  touch-action: pan-x pan-y;
}
.gss-modules__rail::-webkit-scrollbar { display: none; }
/* gutters que alinean la primera/última card con el contenedor central */
.gss-modules__rail::before,
.gss-modules__rail::after {
  content: "";
  flex-shrink: 0;
  /* alinea la 1ª/última card con el contenedor central (1360px) pero garantiza
     siempre un aire mínimo de 40px aunque el viewport sea estrecho (~1366px) */
  width: max(40px, calc((100vw - 1360px) / 2 + 32px));
}

.gss-modules__card {
  flex: 0 0 440px;
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--gss-ink-200, #dfe3ea);
  border-radius: 20px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  min-height: 520px;
  position: relative;
  /* la card es un enlace: sin subrayado y heredando color del texto */
  text-decoration: none;
  color: inherit;
  /* evita que el navegador intente "arrastrar" el enlace al hacer swipe,
     lo que impediría el scroll horizontal en móvil */
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  transition: transform 280ms var(--ease-emph, cubic-bezier(.2,.8,.2,1)),
              box-shadow 280ms,
              border-color 280ms;
}
.gss-modules__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl, 0 24px 48px rgba(4,20,56,.14), 0 8px 16px rgba(4,20,56,.06));
  border-color: var(--gss-neon-blue, #5078ff);
}
/* el nombre se tiñe de azul al pasar el ratón: pista de que la card es clicable */
.gss-modules__card:hover .gss-modules__name { color: var(--gss-neon-blue, #5078ff); }
.gss-modules__card:focus-visible {
  outline: 2px solid var(--gss-neon-blue, #5078ff);
  outline-offset: 3px;
}
.gss-modules__idx {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  color: var(--gss-ink-400, #9aa0ad);
  letter-spacing: 0.1em;
  margin-bottom: 24px;
}
.gss-modules__name {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--gss-ink-950, #020a22);
  margin: 0 0 16px;
  transition: color 200ms var(--ease-emph, cubic-bezier(.2,.8,.2,1));
}
.gss-modules__desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--gss-ink-500, #787882);
  margin: 0 0 20px;
}
.gss-modules__standards {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 24px;
}
.gss-modules__standards span {
  padding: 4px 10px;
  background: var(--gss-ink-100, #eef1f6);
  border-radius: 999px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 600;
  color: var(--gss-ink-700, #3a4758);
  letter-spacing: 0.04em;
}
.gss-modules__viz {
  margin-top: auto;
  height: 180px;
  background: var(--gss-ink-50, #f7f8fb);
  border-radius: 12px;
  border: 1px solid var(--gss-ink-200, #dfe3ea);
  padding: 16px;
  position: relative;
  overflow: hidden;
  /* la altura es fija (180px) → sin CLS al cargar el SVG inline */
}
.gss-modules__viz svg { width: 100%; height: 100%; display: block; }

/* ---------- Indicador de desplazamiento ---------- */
.gss-modules__progress {
  max-width: 1360px;
  margin: 8px auto 0;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.gss-modules__progress-track {
  position: relative;
  flex: 1;
  height: 4px;
  background: var(--gss-ink-200, #dfe3ea);
  border-radius: 999px;
  cursor: pointer;
  touch-action: none;
}
.gss-modules__progress-thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 30%;
  min-width: 40px;
  background: var(--gss-neon-blue, #5078ff);
  border-radius: 999px;
  transition: width 120ms linear;
  will-change: left, width;
}
.gss-modules__hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--gss-ink-500, #787882);
  user-select: none;
}
.gss-modules__hint-arrow {
  color: var(--gss-neon-blue, #5078ff);
  font-weight: 700;
  animation: gss-modules-nudge 1.6s ease-in-out infinite;
}
@keyframes gss-modules-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(5px); }
}

/* ---------- Responsive / móvil ---------- */
@media (max-width: 768px) {
  .gss-modules { padding: 72px 0 48px; }
  .gss-modules .gss-modules__inner { padding: 0 20px; }
  .gss-modules__header { margin-bottom: 28px; gap: 16px; }
  /* en móvil la nav por flechas se oculta: el usuario hace swipe */
  .gss-modules__nav { display: none; }
  .gss-modules__rail { gap: 14px; padding: 4px 0 20px; }
  .gss-modules__rail::before,
  .gss-modules__rail::after { width: 20px; }
  .gss-modules__card {
    flex-basis: 84vw;
    min-height: 0;
    padding: 24px;
    border-radius: 16px;
  }
  /* los SVG/imágenes internos no deben capturar el gesto de swipe */
  .gss-modules__card * { -webkit-user-drag: none; }
  .gss-modules__name { font-size: 24px; }
  .gss-modules__viz { height: 150px; }
  /* indicador: en móvil el track ocupa todo y el texto se reduce */
  .gss-modules__progress { padding: 0 20px; gap: 14px; margin-top: 14px; }
  .gss-modules__hint-text { display: none; } /* solo dejamos la flecha animada */
  .gss-modules__progress-thumb { min-width: 48px; }
}

/* ---------- Accesibilidad de movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  .gss-modules__rail { scroll-behavior: auto; }
  .gss-modules__card,
  .gss-modules__nav button { transition: none; }
  .gss-modules__card:hover { transform: none; }
  .gss-modules__hint-arrow { animation: none; }
  .gss-modules__progress-thumb { transition: none; }
}