/* =============================================================================
   GSS Component — Páginas de sector / industria (Sectores GlobalSuite)
   Marker: .gss-ind        (clase raíz única — la detecta el loader)
   Archivo: assets/css/components/gss-ind.css
   -----------------------------------------------------------------------------
   Una sola hoja para las 10 páginas de sector. El HTML de cada sector es
   estático y vive en un bloque Raw HTML (vc_raw_html) de WPBakery.

   Marker elegido tras comprobar colisión por substring en las dos direcciones
   contra el registro de gss_get_components_registry(): ningún marker existente
   contiene "gss-ind" ni es contenido por él. Ver references/patterns.md.

   Fail-safe: sin JS, TODOS los paneles de pestaña quedan visibles apilados.
   El JS añade .gss-ind--js al root y sólo entonces se activa el comportamiento
   de pestañas. Nunca se oculta contenido que el JS no pueda volver a mostrar.
   ============================================================================ */

/* --- ROOT: variables autocontenidas + contención -------------------------- */
.gss-ind {
  --gss-neon-blue:     #5078ff;
  --gss-neon-blue-700: #3655c4;
  --gss-neon-blue-600: #4166e6;
  --gss-neon-blue-100: #eaeefc;
  --gss-neon-blue-50:  #f4f6ff;
  --gss-aquamarine:    #00ffd7;
  --gss-aquamarine-600:#00e6c2;
  --gss-sky-blue:      #50dcff;
  --gss-white:         #ffffff;

  --gss-ink-950: #020a22;
  --gss-ink-800: #041438;
  --gss-ink-700: #3a4758;
  --gss-ink-600: #5c6675;
  --gss-ink-500: #787882;
  --gss-ink-400: #8a93a6;
  --gss-ink-200: #dfe3ea;
  --gss-ink-150: #eceef3;
  --gss-ink-100: #eef1f6;
  --gss-ink-50:  #f7f8fb;

  /* Semáforo de estado — sólo para badges de dato dentro del mockup */
  --gss-st-r-bg: #fde7e7; --gss-st-r-fg: #c0392b;
  --gss-st-a-bg: #fff3dc; --gss-st-a-fg: #a06a12;
  --gss-st-m-bg: #eaeefc; --gss-st-m-fg: #3655c4;
  --gss-st-v-bg: #e5f9ee; --gss-st-v-fg: #1c7a4a;
  --gss-st-crit: #e66b5b;
  --gss-st-warn: #f49e5a;

  --shadow-md: 0 6px 16px rgba(4,20,56,0.08), 0 2px 4px rgba(4,20,56,0.04);
  --shadow-lg: 0 16px 32px rgba(4,20,56,0.10), 0 4px 8px rgba(4,20,56,0.05);
  --shadow-tab: 0 8px 32px rgba(80,120,255,0.25);
  --shadow-tab-aqua: 0 8px 32px rgba(0,255,215,0.28);
  --ease-emph: cubic-bezier(0.2, 0.8, 0.2, 1);

  --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  font-family: var(--font-sans);
  color: var(--gss-ink-800);
  overflow-x: hidden;
  contain: layout paint;
}
.gss-ind *, .gss-ind *::before, .gss-ind *::after { box-sizing: border-box; }
.gss-ind img { max-width: 100%; display: block; }

/* Reset anti-Impreza: el tema inyecta márgenes en headings y párrafos dentro
   del contenido. Se neutraliza SÓLO dentro del marker.
   ---------------------------------------------------------------------------
   CUIDADO CON LA ESPECIFICIDAD. Este reset es (0,1,1). Una regla de componente
   como `.gss-ind__h2 { margin-top: 14px }` es (0,1,0), así que EL RESET GANA y
   te borra el margen. Toda regla del componente que fije margin o padding sobre
   un h1-h4 / p / ul / ol debe llevar el marker delante para subir a (0,2,0):
       .gss-ind .gss-ind__h2 { margin-top: 14px; }
   Y también sus overrides dentro de @media, o el responsive deja de aplicar.
   Este fallo ya rompió gss-sgrc en producción; aquí volvió a pasar. */
.gss-ind h1, .gss-ind h2, .gss-ind h3, .gss-ind h4, .gss-ind p, .gss-ind ul, .gss-ind ol {
  margin: 0;
  padding: 0;
}
.gss-ind ul, .gss-ind ol { list-style: none; }
.gss-ind a { text-decoration: none; }

/* --- Layout raíz ---------------------------------------------------------- */
.gss-ind__inner { max-width: 1360px; margin: 0 auto; padding: 0 32px; }
.gss-ind__inner--narrow { max-width: 1200px; }
.gss-ind__lede { max-width: 720px; }
.gss-ind__lede--wide { max-width: 760px; }

/* --- Reveal on scroll a prueba de fallos ---------------------------------- */
.gss-ind__reveal { opacity: 1; transform: none; }
.gss-ind--anim .gss-ind__reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease-emph), transform .7s var(--ease-emph);
}
.gss-ind--anim .gss-ind__reveal.is-in { opacity: 1; transform: none; }

/* --- Tipografía compartida ------------------------------------------------ */
.gss-ind__eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gss-neon-blue);
}
.gss-ind__eyebrow--aqua { color: var(--gss-aquamarine); }

.gss-ind .gss-ind__h2 {
  margin-top: 14px;
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.gss-ind .gss-ind__sub {
  margin-top: 18px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--gss-ink-500);
  text-wrap: pretty;
}
.gss-ind__sub--onDark { color: rgba(255,255,255,0.65); }

/* --- Botones -------------------------------------------------------------- */
.gss-ind__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 17px 34px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 180ms var(--ease-emph), background 180ms var(--ease-emph),
              border-color 180ms var(--ease-emph), color 180ms var(--ease-emph);
}
.gss-ind__btn--primary { background: var(--gss-aquamarine); color: var(--gss-ink-800); }
.gss-ind__btn--primary:hover {
  background: var(--gss-aquamarine-600);
  color: var(--gss-ink-800);
  transform: translateY(-1px);
}
.gss-ind__btn--ghost {
  border: 1px solid rgba(255,255,255,0.3);
  color: var(--gss-white);
  font-weight: 600;
}
.gss-ind__btn--ghost:hover {
  border-color: var(--gss-white);
  background: rgba(255,255,255,0.06);
  color: var(--gss-white);
}
.gss-ind__btn--blue { background: var(--gss-neon-blue); color: var(--gss-white); font-weight: 600; }
.gss-ind__btn--blue:hover { background: var(--gss-neon-blue-600); color: var(--gss-white); }
.gss-ind__btn--outlineLight {
  border: 1px solid rgba(255,255,255,0.6);
  color: var(--gss-white);
  font-weight: 600;
}
.gss-ind__btn--outlineLight:hover { background: rgba(255,255,255,0.12); color: var(--gss-white); }
.gss-ind__btn:focus-visible { outline: 2px solid var(--gss-aquamarine); outline-offset: 3px; }

.gss-ind__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--gss-neon-blue);
  transition: color 180ms var(--ease-emph);
}
.gss-ind__link:hover { color: var(--gss-neon-blue-600); }
.gss-ind__link--aqua { color: var(--gss-aquamarine); font-weight: 600; }
.gss-ind__link--aqua:hover { color: var(--gss-white); }

/* =============================================================================
   1. HERO
   ========================================================================== */
.gss-ind__hero {
  position: relative;
  background: var(--gss-ink-800);
  color: var(--gss-white);
  overflow: hidden;
}
.gss-ind__heroImg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 35%;
  opacity: 0.30;
}
.gss-ind__heroVeil {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, #041438 32%, rgba(4,20,56,0.72) 62%, rgba(4,20,56,0.35) 100%);
}
.gss-ind__heroGlow {
  position: absolute;
  top: -140px;
  left: -80px;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(80,120,255,0.32), transparent 70%);
  pointer-events: none;
}
.gss-ind__heroInner { position: relative; padding-top: 96px; }
.gss-ind__heroCopy { max-width: 900px; }

.gss-ind .gss-ind__pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(0,255,215,0.35);
  background: rgba(0,255,215,0.08);
  color: var(--gss-aquamarine);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 10px 20px;      /* más aire a los lados del texto */
  border-radius: 999px;
}

.gss-ind .gss-ind__h1 {
  margin-top: 36px;        /* separación de la píldora al titular */
  font-size: clamp(36px, 5.2vw, 72px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--gss-white);
  text-wrap: balance;
}
.gss-ind__h1 em {
  font-style: normal;
  background: linear-gradient(90deg, #50dcff 0%, #00ffd7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gss-ind .gss-ind__lead {
  margin-top: 26px;
  font-size: 20px;
  line-height: 1.6;
  color: rgba(255,255,255,0.75);
  max-width: 680px;
  text-wrap: pretty;
}
.gss-ind__heroActions { display: flex; gap: 14px; margin-top: 38px; flex-wrap: wrap; }

/* Banda de chips normativos */
.gss-ind__chipband {
  margin-top: 72px;
  padding: 26px 0 30px;
  border-top: 1px solid rgba(255,255,255,0.14);
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 40px;
  align-items: center;
}
.gss-ind__chipbandLabel { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.55); }
.gss-ind__chips { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.gss-ind__chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.05);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  transition: background 180ms var(--ease-emph), border-color 180ms var(--ease-emph);
}
.gss-ind__chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gss-aquamarine);
  flex: none;
}
a.gss-ind__chip:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(0,255,215,0.45);
  color: var(--gss-white);
}

/* =============================================================================
   2. RETOS
   ========================================================================== */
.gss-ind__retos { background: var(--gss-white); border-bottom: 1px solid var(--gss-ink-100); }
.gss-ind__retos .gss-ind__inner { padding-top: 80px; padding-bottom: 88px; }
.gss-ind__retosGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.gss-ind__reto {
  border: 1px solid var(--gss-ink-200);
  border-radius: 20px;
  padding: 28px;
  background: var(--gss-white);
  transition: transform .4s var(--ease-emph), box-shadow .4s var(--ease-emph),
              border-color .4s var(--ease-emph);
}
.gss-ind__reto:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--gss-neon-blue-100);
}
/* Índice del reto (01, 02, 03). Sustituye a la barra de 40x4 que había encima
   del título: quedaba pegada al titular y no aportaba jerarquía. El número sí
   ordena la lectura de las tres tarjetas y deja respirar al h3. */
.gss-ind__retoN {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
  color: var(--gss-neon-blue);
  font-variant-numeric: tabular-nums;
}
.gss-ind .gss-ind__retoT { margin-top: 18px; font-size: 19px; font-weight: 700; line-height: 1.3; }
.gss-ind .gss-ind__retoD { margin-top: 12px; font-size: 15px; line-height: 1.6; color: var(--gss-ink-500); }

/* =============================================================================
   3. PLATAFORMA (mockup + pestañas de vista)
   ========================================================================== */
.gss-ind__plat { background: linear-gradient(180deg, #ffffff 0%, #f4f6ff 100%); }
.gss-ind__plat .gss-ind__inner { padding-top: 88px; padding-bottom: 96px; }

.gss-ind__tabs { display: flex; gap: 10px; margin-top: 40px; flex-wrap: wrap; }
.gss-ind__tab {
  font-family: inherit;
  cursor: pointer;
  border-radius: 999px;
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 600;
  background: var(--gss-white);
  color: var(--gss-ink-700);
  border: 1px solid var(--gss-ink-200);
  transition: background 140ms var(--ease-emph), color 140ms var(--ease-emph),
              border-color 140ms var(--ease-emph), box-shadow 140ms var(--ease-emph);
}
.gss-ind__tab:hover { border-color: var(--gss-neon-blue); color: var(--gss-neon-blue); }
.gss-ind__tab[aria-selected="true"] {
  background: var(--gss-neon-blue);
  color: var(--gss-white);
  border-color: var(--gss-neon-blue);
  box-shadow: var(--shadow-tab);
}
.gss-ind__tab:focus-visible { outline: 2px solid var(--gss-neon-blue); outline-offset: 3px; }

/* Sin JS los tabs no sirven: se ocultan y los paneles quedan apilados. */
.gss-ind__tabs { display: none; }
.gss-ind--js .gss-ind__tabs { display: flex; }

.gss-ind__platGrid {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 32px;
  align-items: start;
}

/* --- Marco del mockup ----------------------------------------------------- */
.gss-ind__mock {
  background: var(--gss-white);
  border: 1px solid var(--gss-ink-200);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.gss-ind__mockBar {
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border-bottom: 1px solid var(--gss-ink-100);
  background: var(--gss-white);
}
.gss-ind__mockLogo { flex: none; height: 22px; width: 116px; object-fit: contain; }
.gss-ind__mockUser { display: flex; align-items: center; gap: 14px; }
.gss-ind__mockAi { width: 20px; height: 20px; flex: none; }
.gss-ind__mockTenant {
  border: 1px solid #c9d4ff;
  border-radius: 999px;
  padding: 6px 15px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gss-ink-700);
  white-space: nowrap;
}
.gss-ind__mockTenant span { color: var(--gss-neon-blue); }
.gss-ind__mockName { font-size: 13px; color: var(--gss-ink-700); }
.gss-ind__mockAvatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--gss-neon-blue-100);
  color: var(--gss-neon-blue-700);
  font-size: 12px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}

.gss-ind__mockBody { display: flex; min-height: 520px; }

.gss-ind__mockNav {
  width: 82px;
  flex: none;
  background: var(--gss-neon-blue-50);
  border-right: 1px solid #e6eaf5;
  padding: 8px 7px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.gss-ind__mockNavItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 3px 2px;
  border-radius: 8px;
  font-size: 9.5px;
  font-weight: 500;
  color: var(--gss-ink-600);
  text-align: center;
}
.gss-ind__mockNavItem svg { width: 16px; height: 16px; }
.gss-ind__mockNavItem--on {
  background: #dfe6ff;
  color: var(--gss-neon-blue-700);
  font-weight: 600;
}
.gss-ind__mockNavSpacer { flex: 1; }

.gss-ind__mockMain {
  flex: 1;
  min-width: 0;
  background: #f5f7fa;
  padding: 18px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: #1a2236;
  font-size: 13px;
}
.gss-ind__crumb { font-size: 12px; color: var(--gss-ink-400); }

/* Paneles: visibles por defecto (fail-safe), ocultos sólo con JS activo */
.gss-ind__panel { display: flex; flex-direction: column; gap: 16px; }
.gss-ind--js .gss-ind__panel[hidden] { display: none; }

.gss-ind__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.gss-ind__kpi {
  background: var(--gss-white);
  border: 1px solid var(--gss-ink-150);
  border-radius: 12px;
  padding: 14px 16px;
  min-width: 0;
}
/* Son <span>: sin display:block quedarían en la misma línea y el margin-top
   del valor no aplicaría (los inline ignoran el margen vertical). */
.gss-ind__kpiL { display: block; font-size: 11px; color: var(--gss-ink-400); }
.gss-ind__kpiV { display: block; font-size: 24px; font-weight: 700; margin-top: 6px; line-height: 1.1; }
.gss-ind__kpiV--crit { color: var(--gss-st-crit); }
.gss-ind__kpiV--warn { color: var(--gss-st-warn); }

.gss-ind__table {
  background: var(--gss-white);
  border: 1px solid var(--gss-ink-150);
  border-radius: 12px;
  overflow: hidden;
}
.gss-ind__tableHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 18px;
}
.gss-ind__tableTitle { font-weight: 600; }
.gss-ind__tableAction { font-size: 11px; color: #4f6bff; font-weight: 500; }
.gss-ind__row {
  display: grid;
  grid-template-columns: 1.4fr repeat(var(--gss-ind-cols, 4), 1fr);
  gap: 10px;
  align-items: center;
  padding: 12px 18px;
  font-size: 12px;
  border-top: 1px solid var(--gss-ind-150, #eceef3);
}
.gss-ind__row--head {
  background: var(--gss-ink-50);
  color: var(--gss-ink-400);
  font-weight: 600;
  border-top: 1px solid var(--gss-ink-150);
}
.gss-ind__badge {
  display: inline-block;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
}
.gss-ind__badge--r { background: var(--gss-st-r-bg); color: var(--gss-st-r-fg); }
.gss-ind__badge--a { background: var(--gss-st-a-bg); color: var(--gss-st-a-fg); }
.gss-ind__badge--m { background: var(--gss-st-m-bg); color: var(--gss-st-m-fg); }
.gss-ind__badge--v { background: var(--gss-st-v-bg); color: var(--gss-st-v-fg); }

/* Panel de IA */
.gss-ind__aiCard {
  background: var(--gss-white);
  border: 1px solid var(--gss-ink-150);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.gss-ind__aiHead { display: flex; align-items: center; gap: 12px; }
.gss-ind__aiIcon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: #eafbf6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.gss-ind__aiIcon img { width: 20px; height: 20px; }
/* También <span>: han de apilarse, no compartir línea. */
.gss-ind__aiTitle { display: block; font-weight: 600; font-size: 14px; }
.gss-ind__aiMeta { display: block; font-size: 11px; color: var(--gss-ink-400); }
.gss-ind .gss-ind__aiSummary {
  background: var(--gss-ink-50);
  border-radius: 10px;
  padding: 16px;
  font-size: 12px;
  line-height: 1.65;
  color: var(--gss-ink-700);
}
.gss-ind__aiRows { display: flex; flex-direction: column; gap: 8px; }
.gss-ind__aiRow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--gss-ink-150);
  border-radius: 10px;
}
.gss-ind__aiRowText { flex: 1; font-size: 12px; }
.gss-ind__aiRowAction { font-size: 11px; color: #4f6bff; font-weight: 600; }
.gss-ind__aiBadge {
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 700;
  flex: none;
}
.gss-ind .gss-ind__aiNote {
  background: var(--gss-neon-blue-100);
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 12px;
  color: var(--gss-ink-700);
}

/* --- Columna de copy del bloque plataforma -------------------------------- */
.gss-ind__platCopy { display: flex; flex-direction: column; gap: 18px; padding-top: 8px; }
.gss-ind__platCopyBlock { display: flex; flex-direction: column; gap: 18px; }
.gss-ind--js .gss-ind__platCopyBlock[hidden] { display: none; }
.gss-ind__h3 { font-size: 26px; font-weight: 700; line-height: 1.2; }
.gss-ind__platText { font-size: 16px; line-height: 1.65; color: var(--gss-ink-500); }
.gss-ind__checks {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid var(--gss-ink-200);
  padding-top: 18px;
}
.gss-ind__check { display: flex; gap: 12px; align-items: flex-start; }
.gss-ind__check svg { flex-shrink: 0; margin-top: 2px; width: 18px; height: 18px; }
.gss-ind__check span { font-size: 15px; line-height: 1.5; color: var(--gss-ink-700); }

/* =============================================================================
   4. PERFILES (fondo oscuro)
   ========================================================================== */
.gss-ind__perf { background: var(--gss-ink-800); color: var(--gss-white); }
.gss-ind__perf .gss-ind__inner { padding-top: 88px; padding-bottom: 96px; }
.gss-ind__perf .gss-ind__h2 { color: var(--gss-white); }

.gss-ind__tabs--dark { margin-top: 44px; gap: 8px; }
.gss-ind__tab--dark {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.72);
  border: 1px solid rgba(255,255,255,0.18);
  font-weight: 500;
  padding: 13px 24px;
}
.gss-ind__tab--dark:hover { color: var(--gss-white); border-color: rgba(0,255,215,0.5); }
.gss-ind__tab--dark[aria-selected="true"] {
  background: var(--gss-aquamarine);
  color: var(--gss-ink-800);
  font-weight: 700;
  border-color: var(--gss-aquamarine);
  box-shadow: var(--shadow-tab-aqua);
}

.gss-ind__perfCard {
  position: relative;
  margin-top: 24px;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(135deg, #0a2159 0%, #061a44 48%, #041438 100%);
  border: 1px solid rgba(255,255,255,0.12);
}
.gss-ind__perfCard + .gss-ind__perfCard { margin-top: 16px; }
.gss-ind--js .gss-ind__perfCard[hidden] { display: none; }
.gss-ind__perfGlow {
  position: absolute;
  top: -180px;
  right: -120px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,255,215,0.20), transparent 70%);
  pointer-events: none;
}
.gss-ind__perfGrid { position: relative; display: grid; grid-template-columns: 1.25fr 1fr; }
.gss-ind__perfMain { padding: 52px 48px; display: flex; flex-direction: column; gap: 22px; }
.gss-ind__perfEyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gss-aquamarine);
}
.gss-ind__perfT {
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--gss-white);
}
.gss-ind__perfT em {
  font-style: normal;
  background: linear-gradient(180deg, transparent 62%, rgba(0,255,215,0.28) 62%);
  color: var(--gss-aquamarine);
  padding: 0 2px;
}
.gss-ind__perfText {
  font-size: 17px;
  line-height: 1.65;
  color: rgba(255,255,255,0.68);
  max-width: 560px;
}
.gss-ind__perfBullets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
  margin-top: 6px;
}
.gss-ind__perfBullet { display: flex; gap: 10px; align-items: flex-start; }
.gss-ind__perfBullet svg { flex-shrink: 0; margin-top: 3px; width: 16px; height: 16px; }
.gss-ind__perfBullet span { font-size: 14px; line-height: 1.45; color: rgba(255,255,255,0.85); }
.gss-ind__perfActions {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 12px;
  flex-wrap: wrap;
}
.gss-ind__perfActions .gss-ind__btn { font-size: 12px; letter-spacing: 0.06em; padding: 15px 30px; }

.gss-ind__perfAside {
  border-left: 1px solid rgba(255,255,255,0.12);
  background: rgba(2,10,34,0.35);
  padding: 40px 40px 34px;
  display: flex;
  flex-direction: column;
}
.gss-ind__perfAsideT {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.42);
}
.gss-ind__perfViews { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.gss-ind__perfView {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 16px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 112px;
}
.gss-ind__perfViewM {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gss-aquamarine);
}
.gss-ind__perfViewN {
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255,255,255,0.88);
  font-weight: 500;
}
.gss-ind .gss-ind__perfIa {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.gss-ind__perfIa img { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.gss-ind__perfIa span { font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,0.6); }

/* =============================================================================
   5. MARCOS Y NORMATIVAS
   ========================================================================== */
.gss-ind__fw { background: var(--gss-white); }
.gss-ind__fw .gss-ind__inner { padding-top: 88px; padding-bottom: 88px; }
.gss-ind__fwGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 44px;
}
.gss-ind__fwGroup { background: var(--gss-ink-50); border-radius: 20px; padding: 28px; }
.gss-ind__fwT { font-size: 17px; font-weight: 700; }
.gss-ind__fwItems { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.gss-ind__fwItem {
  background: var(--gss-white);
  border: 1px solid var(--gss-ink-200);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gss-ink-800);
  transition: border-color 180ms var(--ease-emph), color 180ms var(--ease-emph),
              transform 180ms var(--ease-emph);
}
a.gss-ind__fwItem:hover {
  border-color: var(--gss-neon-blue);
  color: var(--gss-neon-blue);
  transform: translateY(-1px);
}
.gss-ind .gss-ind__fwNote { margin-top: 28px; font-size: 14px; color: var(--gss-ink-500); }
.gss-ind__fwNote a { font-weight: 600; color: var(--gss-neon-blue); }

/* =============================================================================
   6. MÉTODO / PUESTA EN MARCHA
   ========================================================================== */
.gss-ind__met { background: linear-gradient(180deg, #f4f6ff 0%, #ffffff 100%); }
.gss-ind__met .gss-ind__inner { padding-top: 88px; padding-bottom: 88px; }
.gss-ind__metGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.gss-ind__step { border-top: 3px solid var(--gss-neon-blue); padding-top: 20px; }
/* Degradado de marca a lo largo de las 4 fases: neón → sky → aguamarina */
.gss-ind__step--1 { border-top-color: var(--gss-neon-blue); }
.gss-ind__step--2 { border-top-color: #7a9bff; }
.gss-ind__step--3 { border-top-color: var(--gss-sky-blue); }
.gss-ind__step--4 { border-top-color: var(--gss-aquamarine); }
.gss-ind__stepW {
  font-size: 12px;
  font-weight: 700;
  color: var(--gss-neon-blue);
  letter-spacing: 0.06em;
}
.gss-ind .gss-ind__stepT { margin-top: 10px; font-size: 18px; font-weight: 700; }
.gss-ind .gss-ind__stepD { margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--gss-ink-500); }

/* =============================================================================
   7. FAQ  (CSS-only con <details>; sin JS)
   ========================================================================== */
.gss-ind__faq { background: var(--gss-white); }
.gss-ind__faq .gss-ind__inner { padding-top: 72px; padding-bottom: 96px; }
.gss-ind__faqGrid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: start;
}
.gss-ind__faqIntro .gss-ind__h2 { font-size: clamp(26px, 2.9vw, 36px); }
.gss-ind__faqIntro .gss-ind__sub { font-size: 16px; }
.gss-ind__faqIntro .gss-ind__btn { margin-top: 24px; padding: 14px 28px; }
.gss-ind__faqList { display: flex; flex-direction: column; }

.gss-ind__faqItem { border-top: 1px solid var(--gss-ink-200); }
.gss-ind__faqItem > summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 0;
  display: flex;
  gap: 20px;
  align-items: center;
}
.gss-ind__faqItem > summary::-webkit-details-marker { display: none; }
.gss-ind__faqItem > summary:focus-visible { outline: 2px solid var(--gss-neon-blue); outline-offset: 2px; }
.gss-ind__faqQ {
  flex: 1;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--gss-ink-800);
}
.gss-ind__faqIcon {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--gss-neon-blue);
}
.gss-ind__faqIcon::before,
.gss-ind__faqIcon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: opacity 200ms var(--ease-emph);
}
.gss-ind__faqIcon::before { width: 16px; height: 1.5px; }
.gss-ind__faqIcon::after  { width: 1.5px; height: 16px; }
.gss-ind__faqItem[open] .gss-ind__faqIcon::after { opacity: 0; }
.gss-ind .gss-ind__faqA {
  font-size: 15px;
  line-height: 1.65;
  color: var(--gss-ink-500);
  padding-bottom: 22px;
}

/* =============================================================================
   8. CTA FINAL (degradado neón — el Quantum dark ya vive en el footer)
   ========================================================================== */
.gss-ind__cta { background: linear-gradient(110deg, #5078ff 0%, #50dcff 100%); }
.gss-ind__cta .gss-ind__inner {
  padding-top: 80px;
  padding-bottom: 80px;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 56px;
  align-items: center;
}
.gss-ind__ctaT {
  font-size: clamp(30px, 3.6vw, 42px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--gss-white);
  text-wrap: balance;
}
.gss-ind .gss-ind__ctaD {
  margin-top: 20px;
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255,255,255,0.9);
  max-width: 620px;
}
.gss-ind__ctaActions { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.gss-ind__ctaActions .gss-ind__btn { width: 100%; font-size: 14px; padding: 18px 36px; }
.gss-ind__ctaNote { font-size: 13px; color: rgba(255,255,255,0.8); text-align: center; }

/* =============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
  .gss-ind__platGrid { grid-template-columns: 1fr; }
  .gss-ind__perfGrid { grid-template-columns: 1fr; }
  .gss-ind__perfAside { border-left: 0; border-top: 1px solid rgba(255,255,255,0.12); }
  .gss-ind__metGrid { grid-template-columns: repeat(2, 1fr); }
  .gss-ind__faqGrid { grid-template-columns: 1fr; gap: 36px; }
  .gss-ind__cta .gss-ind__inner { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 900px) {
  .gss-ind__inner { padding-left: 20px; padding-right: 20px; }
  .gss-ind__heroInner { padding-top: 64px; }
  .gss-ind__chipband { grid-template-columns: 1fr; gap: 18px; margin-top: 48px; }
  .gss-ind__retosGrid { grid-template-columns: 1fr; }
  .gss-ind__fwGrid { grid-template-columns: 1fr; }
  .gss-ind__kpis { grid-template-columns: repeat(2, 1fr); }
  .gss-ind__perfMain { padding: 36px 24px; }
  .gss-ind__perfAside { padding: 28px 24px; }
  .gss-ind__perfBullets { grid-template-columns: 1fr; }
  .gss-ind__mockNav { display: none; }
  .gss-ind__mockMain { padding: 16px; }
  .gss-ind__retos .gss-ind__inner,
  .gss-ind__plat .gss-ind__inner,
  .gss-ind__perf .gss-ind__inner,
  .gss-ind__fw .gss-ind__inner,
  .gss-ind__met .gss-ind__inner,
  .gss-ind__faq .gss-ind__inner { padding-top: 56px; padding-bottom: 64px; }
}

@media (max-width: 640px) {
  .gss-ind__metGrid { grid-template-columns: 1fr; }
  .gss-ind__perfViews { grid-template-columns: 1fr; }
  .gss-ind__heroActions .gss-ind__btn { width: 100%; }
  /* La tabla del mockup pasa a scroll horizontal contenido */
  .gss-ind__table { overflow-x: auto; }
  .gss-ind__row { min-width: 520px; }
}

/* =============================================================================
   ACCESIBILIDAD — reduce motion neutraliza todo movimiento
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .gss-ind--anim .gss-ind__reveal { opacity: 1; transform: none; transition: none; }
  .gss-ind *,
  .gss-ind *::before,
  .gss-ind *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}