/* -----------------------------------------------------------------------------
   Tokens de marca usados por los componentes de la home (gss-hero / gss-roles /
   gss-modules). Se incluyen aquí —scoped global— para que los componentes sean
   autosuficientes aunque el tokens.css global del tema no los defina todos.
   Si el tema ya define estas variables, estas declaraciones son idénticas y no
   hacen daño (misma cascada). Valores: BrandBook GSS 2025.
   --------------------------------------------------------------------------- */
:root {
  --gss-neon-blue: #5078ff;
  --gss-aquamarine: #00ffd7;
  --gss-sky-blue: #50dcff;
  --gss-ink-950: #020a22;
  --gss-ink-800: #041438;
  --gss-ink-700: #3a4758;
  --gss-ink-600: #54607a;
  --gss-ink-500: #787882;
  --gss-ink-400: #9aa0ad;
  --gss-ink-300: #c4cad4;
  --gss-ink-200: #dfe3ea;
  --gss-ink-100: #eef1f6;
  --gss-ink-50: #f7f8fb;
  --gss-success: #2bd07b;
  --gss-warning: #ffb648;
  --gss-danger: #f25a5a;
  --gss-danger-bg: #fde7e7;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --ease-emph: cubic-bezier(0.2, 0.8, 0.2, 1);
  --shadow-glow-aqua: 0 8px 32px rgba(0, 255, 215, 0.28);
  --shadow-xl: 0 24px 48px rgba(4,20,56,.14), 0 8px 16px rgba(4,20,56,.06);
  --shadow-md: 0 6px 16px rgba(4,20,56,.08), 0 2px 4px rgba(4,20,56,.04);
}

/* =============================================================================
   GSS · Hero (marker .gss-hero) + Browser Mockup (.bmock) + Video lightbox
   Portado de HeroMando.jsx + BrowserMockup.jsx (Claude Design).
   CSS namespaced bajo .gss-hero. El lightbox (.gss-hero-vlightbox) es fixed a
   nivel body. Cargado por components-loader.php al detectar .gss-hero.

   LCP: el H1, el lead y los CTAs son texto plano que pinta de inmediato (no
   dependen de JS ni de imágenes). El mockup (.bmock) es decorativo y se activa
   tras el primer render (lazy init en gss-hero.js). El gradiente es CSS puro.
   ============================================================================= */

/* ================= HERO MANDO ================= */
.gss-hero {
  padding: 160px 0 110px;
  margin-bottom: -1px; /* evita hairline blanca entre secciones por redondeo */
  position: relative;
  overflow: hidden;
  color: white;
  background:
    radial-gradient(115% 120% at 6% 4%, #0b1f6b 0%, rgba(11,31,107,0) 46%),
    radial-gradient(90% 95% at 100% 100%, rgba(0,255,215,0.34) 0%, rgba(0,255,215,0) 52%),
    radial-gradient(70% 80% at 92% 8%, rgba(80,220,255,0.45) 0%, rgba(80,220,255,0) 55%),
    linear-gradient(122deg, #2740c4 0%, #5078ff 44%, #50dcff 100%);
}
/* faint grid sheen for premium depth */
.gss-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(120% 100% at 30% 30%, black 0%, transparent 72%);
  mask-image: radial-gradient(120% 100% at 30% 30%, black 0%, transparent 72%);
  pointer-events: none;
}
.gss-hero .container { position: relative; z-index: 1; }
.gss-hero__watermark {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 460px;
  max-width: 38vw;
  opacity: 0.10;
  /* la imagen NEONBLUE se fuerza a blanco para que funcione como marca de agua
     sutil sobre el gradiente azul del hero */
  filter: brightness(0) invert(1);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}.gss-hero__grid {
  display: grid;
  grid-template-columns: 0.8fr 1.25fr;
  gap: 96px;
  align-items: center;
}

.gss-hero__kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.72);
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.16);
}
.gss-hero__kicker .live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0,255,215,0.16);
  color: #00ffd7;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 10px;
}
.gss-hero__kicker .live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00ffd7;
  animation: pulse-dot 1.6s ease-in-out infinite;
}

.gss-hero h1 {
  font-size: clamp(40px, 4.6vw, 64px);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: white;
  margin: 0 0 24px;
}
.gss-hero h1 em {
  font-style: normal;
  color: rgba(255,255,255,0.42);
  font-weight: 800;
}
.gss-hero h1 mark {
  background: none;
  color: #00ffd7;
  position: relative;
  display: inline-block;
}

.gss-hero__lead {
  font-size: 19px;
  line-height: 1.55;
  color: rgba(255,255,255,0.84);
  max-width: 500px;
  margin: 0 0 36px;
}
.gss-hero__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}

.gss-hero__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.16);
}
.gss-hero__stat .num {
  font-size: 30px;
  font-weight: 700;
  color: white;
  letter-spacing: -0.02em;
  line-height: 1;
}
.gss-hero__stat .num span { color: #00ffd7; }
.gss-hero__stat .lbl {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,0.66);
  line-height: 1.3;
}

/* primary CTA on gradient: aquamarine pill (matches live site) */
.gss-hero .btn--demo {
  background: #00ffd7;
  color: var(--gss-ink-950);
}
.gss-hero .btn--demo:hover {
  background: white;
  transform: translateY(-1px);
  box-shadow: var(--shadow-glow-aqua);
}
.gss-hero .btn--video {
  background: rgba(255,255,255,0.08);
  color: white;
  border: 1px solid rgba(255,255,255,0.34);
  backdrop-filter: blur(6px);
}
.gss-hero .btn--video:hover,
.gss-hero .btn--video:hover * {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.6);
  color: white; /* el texto "VER VÍDEO" se mantiene blanco en hover */
}
.gss-hero .btn--video:hover .play {
  background: #00ffd7; /* el círculo del play conserva su color aqua */
}
.gss-hero .btn--video .play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #00ffd7;
  color: var(--gss-ink-950, #020a22);
  margin-right: 2px;
  flex-shrink: 0;
}
/* ================= HERO BROWSER MOCKUP ================= */
 .gss-hero .bmock {
  position: relative;
  z-index: 1;
  /* margen interno para que las tarjetas flotantes (float/pill) queden dentro
     del área visible y no las recorte el overflow:hidden del hero */
  padding: 24px 30px 36px;
}
 .gss-hero .bmock__window {
  position: relative;
  z-index: 2;
  background: white;
  border-radius: 14px;
  box-shadow: 0 40px 90px -28px rgba(4,20,56,0.5), 0 10px 30px rgba(4,20,56,0.2), 0 0 0 1px rgba(255,255,255,0.45);
  overflow: hidden;
}
 .gss-hero .bmock__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #eef1f6;
  border-bottom: 1px solid var(--gss-ink-200);
}
 .gss-hero .bmock__lights { display: flex; gap: 6px; }
 .gss-hero .bmock__lights i {
  width: 11px; height: 11px; border-radius: 50%;
  display: block;
}
 .gss-hero .bmock__lights i:nth-child(1) { background: #ff5f57; }
 .gss-hero .bmock__lights i:nth-child(2) { background: #febc2e; }
 .gss-hero .bmock__lights i:nth-child(3) { background: #28c840; }
 .gss-hero .bmock__url {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  background: white;
  border: 1px solid var(--gss-ink-200);
  border-radius: 999px;
  padding: 6px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--gss-ink-500);
  max-width: 420px;
  margin: 0 auto;
}
 .gss-hero .bmock__url .lock { color: var(--gss-success); font-size: 10px; }
 .gss-hero .bmock__url .path { color: var(--gss-ink-700); }
 .gss-hero .bmock__url .caret {
  width: 5px; height: 11px;
  border-right: 1.5px solid var(--gss-neon-blue);
  margin-left: 1px;
  animation: caret-blink 1.1s step-end infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }

 .gss-hero .bmock__app {
  display: grid;
  grid-template-columns: 46px 1fr;
  background: var(--gss-ink-50);
}
 .gss-hero .bmock__rail {
  background: #f1f3fc;
  border-right: 1px solid #e4e7f4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
}
 .gss-hero .bmock__rail .logo {
  width: 26px; height: 26px;
  margin-bottom: 4px;
  display: flex; align-items: center; justify-content: center;
}
 .gss-hero .bmock__rail .logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
 .gss-hero .bmock__rail .ico {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: #54607a;
  font-size: 12px;
  transition: all 220ms;
}
 .gss-hero .bmock__rail .ico.on {
  background: rgba(80,120,255,0.14);
  color: var(--gss-neon-blue);
}

 .gss-hero .bmock__main {
  display: flex;
  flex-direction: column;
  height: 426px;
}

/* App header: breadcrumb + tabs */
 .gss-hero .bmock__head {
  background: white;
  border-bottom: 1px solid var(--gss-ink-200);
  padding: 9px 16px 0;
  flex-shrink: 0;
}
 .gss-hero .bmock__crumbs {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  color: var(--gss-ink-400);
  margin-bottom: 8px;
}
 .gss-hero .bmock__crumbs b { color: var(--gss-ink-800); font-weight: 600; }
 .gss-hero .bmock__crumbs .sep { color: var(--gss-ink-300); }
 .gss-hero .bmock__ai {
  margin-left: auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  cursor: pointer;
  flex-shrink: 0;
}
 .gss-hero .bmock__ai svg,
 .gss-hero .bmock__ai img {
  width: 22px; height: 22px; display: block;
  filter: drop-shadow(0 0 5px rgba(0,255,215,0.6));
  animation: ai-twinkle 2.8s ease-in-out infinite;
}
@keyframes ai-twinkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  45% { transform: scale(1.22) rotate(10deg); opacity: 0.85; }
}
 .gss-hero .bmock__tabs2 { display: flex; gap: 16px; }
 .gss-hero .bmock__tab2 {
  font-size: 10px;
  color: var(--gss-ink-500);
  padding-bottom: 8px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
 .gss-hero .bmock__tab2.on {
  color: var(--gss-neon-blue);
  border-color: var(--gss-neon-blue);
  font-weight: 600;
}

 .gss-hero .bmock__screen {
  position: relative;
  flex: 1;
  overflow: hidden;
}
 .gss-hero .bmock__view {
  position: absolute;
  inset: 0;
  padding: 14px 16px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 480ms var(--ease-emph), transform 480ms var(--ease-emph);
  pointer-events: none;
  display: flex;
  flex-direction: column;
}
 .gss-hero .bmock__view.active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* KPI cards */
 .gss-hero .bmock__kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
 .gss-hero .bmock__kpi {
  background: white;
  border: 1px solid var(--gss-ink-200);
  border-radius: 10px;
  padding: 9px 11px;
}
 .gss-hero .bmock__kpi .l {
  font-size: 8px;
  color: var(--gss-ink-500);
  letter-spacing: 0.03em;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
 .gss-hero .bmock__kpi .n {
  font-size: 18px;
  font-weight: 700;
  color: var(--gss-ink-950);
  font-feature-settings: "tnum";
  line-height: 1;
}
 .gss-hero .bmock__kpi .n.red { color: var(--gss-danger); }
 .gss-hero .bmock__kpi .n.green { color: var(--gss-success); }
 .gss-hero .bmock__kpi .n.blue { color: var(--gss-neon-blue); }
 .gss-hero .bmock__kpi .s { font-size: 7.5px; color: var(--gss-ink-400); margin-top: 4px; }
 .gss-hero .bmock__kpi .seg {
  display: flex; gap: 1.5px; height: 4px; margin-top: 7px;
  border-radius: 999px; overflow: hidden;
}
 .gss-hero .bmock__kpi .seg i { display: block; height: 100%; }
 .gss-hero .bmock__kpi .prog {
  height: 4px; border-radius: 999px; background: var(--gss-ink-100); margin-top: 7px; overflow: hidden;
}
 .gss-hero .bmock__kpi .prog i { display: block; height: 100%; border-radius: 999px; background: var(--gss-neon-blue); }

/* Chart panel */
 .gss-hero .bmock__panel {
  background: white;
  border: 1px solid var(--gss-ink-200);
  border-radius: 12px;
  padding: 13px 15px;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
 .gss-hero .bmock__panel .ph {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--gss-ink-800);
  margin-bottom: 12px;
  display: flex; align-items: center; justify-content: space-between;
}
 .gss-hero .bmock__panel .ph .nra {
  font-size: 8px; color: var(--gss-ink-400); font-family: var(--font-mono);
}
 .gss-hero .bmock__chartbody { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; }

/* Stacked bars */
.stk { display: flex; align-items: flex-end; justify-content: space-around; gap: 16px; height: 150px; }
.stk__col { width: 38px; display: flex; flex-direction: column-reverse; border-radius: 4px; overflow: hidden; }
.stk__col .sg { width: 100%; }
.stk__labels { display: flex; justify-content: space-around; gap: 16px; margin-top: 8px; }
.stk__labels span { width: 38px; font-size: 7.5px; color: var(--gss-ink-500); text-align: center; line-height: 1.2; }

/* Legend chips */
 .gss-hero .bmock__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; justify-content: center; }
 .gss-hero .bmock__chips div { display: flex; align-items: center; gap: 5px; font-size: 8px; color: var(--gss-ink-600); }
 .gss-hero .bmock__chips i { width: 8px; height: 8px; border-radius: 2px; display: block; }

/* Histogram */
.hist { position: relative; flex: 1; min-height: 0; display: flex; align-items: flex-end; gap: 3px; padding-bottom: 2px; }
.hist .hb {
  flex: 1;
  background: linear-gradient(180deg, #7fd0f4 0%, #aee2fa 100%);
  border-radius: 3px 3px 0 0;
}
.hist__mark { position: absolute; top: 0; bottom: 0; width: 0; z-index: 2; }
.hist__mark.dash { border-left: 1.5px dashed var(--gss-ink-700); }
.hist__mark.solid { border-left: 1.5px solid var(--gss-warning); }

/* Horizontal heatmap (clean, numbered) */
 .gss-hero .bmock__heatwrap { display: grid; grid-template-columns: 16px 1fr; gap: 8px; align-items: center; flex: 1; min-height: 0; }
 .gss-hero .bmock__yaxis {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 7px; letter-spacing: 0.12em; color: var(--gss-ink-400);
  display: flex; align-items: center; justify-content: center; text-transform: uppercase;
}
 .gss-hero .bmock__heat {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 38px);
  gap: 6px;
}
 .gss-hero .bmock__heat span {
  border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: rgba(4,20,56,0.62);
  animation: heat-in 550ms var(--ease-emph) backwards;
}
 .gss-hero .bmock__xaxis { font-size: 7px; letter-spacing: 0.12em; color: var(--gss-ink-400); text-align: center; text-transform: uppercase; margin-top: 6px; }
@keyframes heat-in { from { opacity: 0; transform: scale(0.6); } }

/* Evaluación cards grid */
 .gss-hero .bmock__cards { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; flex: 1; min-height: 0; }
 .gss-hero .bmock__card {
  background: white; border: 1px solid var(--gss-ink-200); border-radius: 10px;
  padding: 11px 13px; display: flex; flex-direction: column; gap: 5px;
}
 .gss-hero .bmock__card .ct { font-size: 11px; font-weight: 700; color: var(--gss-ink-950); letter-spacing: -0.01em; }
 .gss-hero .bmock__card .cmeta { font-size: 8.5px; color: var(--gss-ink-500); }
 .gss-hero .bmock__card .cfoot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 6px; border-top: 1px solid var(--gss-ink-100); }
 .gss-hero .bmock__card .cfoot .el { font-size: 8px; color: var(--gss-ink-400); }
 .gss-hero .bmock__card .cfoot .ok { font-size: 8.5px; color: var(--gss-success); font-weight: 600; }

/* Donut */
 .gss-hero .bmock__donutwrap { display: flex; align-items: center; justify-content: center; gap: 28px; flex: 1; }
 .gss-hero .bmock__legend { display: flex; flex-direction: column; gap: 9px; }
 .gss-hero .bmock__legend div { display: flex; align-items: center; gap: 8px; font-size: 9.5px; color: var(--gss-ink-700); }
 .gss-hero .bmock__legend i { width: 9px; height: 9px; border-radius: 3px; display: block; flex-shrink: 0; }
 .gss-hero .bmock__legend b { color: var(--gss-ink-950); font-weight: 700; margin-left: 2px; }

/* Tornado */
.torn { display: flex; flex-direction: column; gap: 14px; flex: 1; justify-content: center; }
.torn__top { display: flex; align-items: center; justify-content: space-between; font-size: 10px; color: var(--gss-ink-800); margin-bottom: 5px; }
.torn__top .nm { display: flex; align-items: center; gap: 5px; }
.torn__top .eur { font-family: var(--font-mono); color: var(--gss-ink-500); font-size: 9px; }
.torn__bar { display: flex; align-items: center; gap: 9px; }
.torn__pct { font-size: 9.5px; font-weight: 700; width: 28px; font-family: var(--font-mono); }
.torn__track { flex: 1; height: 11px; border-radius: 999px; background: var(--gss-ink-100); overflow: hidden; }
.torn__fill { height: 100%; border-radius: 999px; }
/* subtle entrance: fade the whole active view in (no size collapse) */
 .gss-hero .bmock__view.active .stk__col,
 .gss-hero .bmock__view.active .hb,
 .gss-hero .bmock__view.active .torn__fill { animation: soft-in 520ms var(--ease-emph) both; }
@keyframes soft-in { from { opacity: 0; } to { opacity: 1; } }

/* Dots */
 .gss-hero .bmock__dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 18px;
  position: relative;
  z-index: 3;
}
 .gss-hero .bmock__dots button,
.gss-hero .bmock__dot {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.45);
  transition: all 220ms;
}
 .gss-hero .bmock__dots button.on,
.gss-hero .bmock__dot.on { width: 24px; background: #00ffd7; }

/* Floating cards — OUTSIDE the window so they never clip */
 .gss-hero .bmock__float {
  position: absolute;
  left: 0;
  bottom: 56px;
  z-index: 5;
  background: white;
  border-radius: 14px;
  padding: 13px 15px;
  box-shadow: 0 24px 50px -16px rgba(4,20,56,0.45);
  width: 184px;
  animation: float-bob 5.5s ease-in-out infinite;
}
@keyframes float-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
 .gss-hero .bmock__float .ft { font-size: 10px; font-weight: 700; color: var(--gss-ink-950); margin-bottom: 10px; }
 .gss-hero .bmock__pill {
  position: absolute;
  right: 0;
  top: 150px;
  z-index: 5;
  background: white;
  border-radius: 12px;
  padding: 11px 14px;
  box-shadow: 0 20px 44px -16px rgba(4,20,56,0.4);
  display: flex;
  align-items: center;
  gap: 10px;
  animation: float-bob 6.2s ease-in-out infinite;
}
 .gss-hero .bmock__pill .ic {
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--gss-danger-bg); color: var(--gss-danger);
  display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0;
}
 .gss-hero .bmock__pill .tx { line-height: 1.2; }
 .gss-hero .bmock__pill .tx b { display: block; font-size: 15px; font-weight: 700; color: var(--gss-ink-950); }
 .gss-hero .bmock__pill .tx span { font-size: 8.5px; color: var(--gss-ink-500); }
/* aquamarine quarter-circle accent behind window */
 .gss-hero .bmock__accent {
  position: absolute;
  bottom: -26px;
  right: -26px;
  width: 130px; height: 130px;
  border-radius: 0 0 130px 0;
  background: linear-gradient(135deg, #00ffd7, var(--gss-sky-blue));
  z-index: 0;
  opacity: 0.9;
}

/* ================= VIDEO LIGHTBOX ================= */
.gss-hero-vlightbox {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(2,10,34,0.86);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  animation: lb-in 240ms var(--ease-emph) forwards;
}
@keyframes lb-in { to { opacity: 1; } }
.gss-hero-vlightbox__inner {
  position: relative;
  width: min(960px, 100%);
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0,0,0,0.6);
  animation: lb-pop 320ms var(--ease-emph);
}
@keyframes lb-pop { from { transform: scale(0.94); opacity: 0; } }
.gss-hero-vlightbox__inner iframe { width: 100%; height: 100%; border: 0; display: block; }
.gss-hero-vlightbox__close {
  position: absolute;
  top: -48px;
  right: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: white;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.gss-hero-vlightbox__close span {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  transition: all 160ms;
}
.gss-hero-vlightbox__close:hover span { background: rgba(255,255,255,0.15); }

@media (max-width: 960px) {
 .gss-hero .bmock__float { left: -10px; bottom: 10px; width: 158px; }
 .gss-hero .bmock__pill { right: 0; top: 20px; }
}


/* =============================================================================
   OPTIMIZACIÓN LCP + RESPONSIVE MÓVIL (añadido en la adaptación a WordPress)
   ============================================================================= */

/* El contenedor del hero usa el .container global de Impreza/tema o este
   fallback namespaced si se usa aislado. */
.gss-hero .gss-hero__container {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
  z-index: 1;
}

/* Contención del mockup: su repintado (animaciones internas) no afecta al
   resto de la página. */
.gss-hero .bmock { contain: layout paint; }

/* Estado inicial del mockup antes de engancharse el JS: visible pero sin
   animaciones de rotación (las clases .active las gestiona el JS). Evita
   parpadeos y no bloquea el LCP del texto. */
.gss-hero .bmock__view { will-change: opacity, transform; }

/* Las imágenes del rail/AI del mockup llevan tamaño explícito → sin CLS */
.gss-hero .bmock__rail .logo img { width: 100%; height: 100%; }

/* ---------- Responsive / móvil ---------- */
@media (max-width: 960px) {
  .gss-hero__grid { grid-template-columns: 1fr; gap: 40px; }
  /* en una sola columna el mockup recupera padding simétrico */
  .gss-hero .bmock { padding: 20px 0 32px; }
}

@media (max-width: 768px) {
  .gss-hero { padding: 96px 0 48px; min-height: 0; }
  /* salvaguarda: nada dentro del hero puede provocar scroll horizontal */
  .gss-hero, .gss-hero * { max-width: 100%; }
  .gss-hero .bmock__window { max-width: 100%; }
  .gss-hero .gss-hero__container { padding: 0 20px; }
  .gss-hero h1 { font-size: clamp(34px, 9vw, 48px); margin-bottom: 18px; }
  .gss-hero__lead { font-size: 16px; margin-bottom: 28px; max-width: none; }
  .gss-hero__ctas { margin-bottom: 32px; gap: 10px; }
  .gss-hero__ctas .btn { width: 100%; justify-content: center; }
  .gss-hero__stats { grid-template-columns: 1fr 1fr; gap: 18px 16px; padding-top: 24px; }
  .gss-hero__stat .num { font-size: 26px; }
  .gss-hero__watermark { display: none; }

  /* El mockup es muy detallado: lo escalamos para que entre sin desbordar
     horizontalmente y mantenga proporción. El grid interno (rail 46px + main)
     podría ser ancho; el window controla el overflow. */
  .gss-hero .bmock { padding: 0; }
  .gss-hero .bmock__window { border-radius: 12px; }
  .gss-hero .bmock__main { height: 340px; }
  .gss-hero .bmock__float,
  .gss-hero .bmock__pill { display: none; } /* tarjetas flotantes fuera en móvil */
  .gss-hero .bmock__dots { margin-top: 14px; }
}

@media (max-width: 480px) {
  .gss-hero { padding: 88px 0 40px; }
  .gss-hero__stats { grid-template-columns: 1fr 1fr; }
  .gss-hero .bmock__kpis { grid-template-columns: repeat(2, 1fr); }
  /* el rail lateral del mockup se estrecha para ganar espacio en pantallas muy pequeñas */
  .gss-hero .bmock__app { grid-template-columns: 38px 1fr; }
  .gss-hero .bmock__main { height: 320px; }
  /* breadcrumb del mockup puede apretar: reducimos tipografía */
  .gss-hero .bmock__tabs2 { gap: 10px; }
}

/* ---------- Accesibilidad de movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  .gss-hero .bmock__view,
  .gss-hero .bmock__ai svg,
  .gss-hero .bmock__url .caret,
  .gss-hero .bmock__float,
  .gss-hero-vlightbox,
  .gss-hero-vlightbox__inner {
    animation: none !important;
    transition: none !important;
  }
  .gss-hero .bmock__view { transform: none; }
}

/* Body lock cuando el lightbox está abierto (excepción regla 2: nivel body) */
.gss-no-scroll { overflow: hidden; }

/* Botón "play" del CTA de vídeo: usa › en vez de ▶ para evitar el fallback a
   emoji de color en algunos sistemas (gotcha conocido en la toolchain GSS) */
.gss-hero .btn--video .play::before {
  content: "";
  width: 0; height: 0;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent var(--gss-ink-950, #020a22);
  margin-left: 2px; /* centrado óptico del triángulo */
}

/* Base de botones del hero (en el diseño venían de utilidades globales;
   aquí van namespaced bajo .gss-hero para que el componente sea autosuficiente) */
.gss-hero .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: transform 180ms var(--ease-emph), background 180ms var(--ease-emph),
              box-shadow 180ms, border-color 180ms;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}
.gss-hero .btn--arrow::after { content: "→"; transition: transform 180ms; }
.gss-hero .btn--arrow:hover::after { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .gss-hero .btn, .gss-hero .btn--arrow::after { transition: none; }
}