/* =============================================================================
   gss-grcb — GRC Maturity Score · banner lateral (rediseño estilo Sprinto)
   Componente reutilizable GSS. Namespacing bajo .gss-grcb.
   CSS-only, sin JS. Poppins ya encolada globalmente en el tema.

   Rediseño 2026-07-23: menos texto, titular dominante arriba + botón abajo.
   - Título sube al top (fuera el spacer que lo empujaba al centro).
   - Kicker mínimo hace de contexto; eliminada la línea de pie redundante.
   - Gráfico de madurez de arcoíris de 5 colores → rampa monocroma
     (blanco translúcido ascendente, cima en aguamarina): mantiene el
     "escalar hacia la madurez" sin competir con el titular.
   ============================================================================= */

.gss-grcb {
  /* Tokens locales (colors_and_type.css no se carga en producción) */
  --grcb-neon:      #5078ff;
  --grcb-neon-600:  #4166e6;
  --grcb-neon-700:  #3655c4;
  --grcb-aqua:      #00ffd7;
  --grcb-ink:       #041438;
  --grcb-white:     #ffffff;

  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
  min-height: clamp(180px, 90cqi, 220px); /* solo suelo: la altura la marca el contenido (compacto) */
  margin-inline: auto;
  position: relative;
  /* El banner se mide a sí mismo: los tamaños en cqi escalan con SU ancho,
     así encaja igual en el rail 1/5 (~190px) que a 320px en móvil. */
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  padding: clamp(18px, 7.5cqi, 30px) clamp(15px, 7cqi, 28px) clamp(16px, 6.5cqi, 26px);
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(150deg, var(--grcb-neon) 0%, var(--grcb-neon-600) 55%, var(--grcb-neon-700) 100%);
  box-shadow: 0 16px 32px rgba(4, 20, 56, .14);
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s cubic-bezier(.2,.8,.2,1);
}

.gss-grcb * { box-sizing: border-box; }

/* Resplandor aguamarina superior derecho */
.gss-grcb__glow {
  position: absolute;
  top: -70px;
  right: -70px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,255,215,.22), transparent 70%);
  pointer-events: none;
}

/* Antiguo empujador flex: neutralizado. Ahora el banner se compacta al
   contenido y el espaciado se reparte con márgenes, no estirando la tarjeta.
   Se deja el selector para no tener que editar el HTML ya pegado. */
.gss-grcb__grow { display: none; }

.gss-grcb__head { position: relative; flex-shrink: 0; }

.gss-grcb__title {
  margin: 0;
  color: var(--grcb-white);
  font-size: clamp(21px, 10cqi, 31px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.015em;
}
.gss-grcb__accent { color: var(--grcb-aqua); }

/* Gráfico de barras ascendente (madurez 1→5) — decorativo, monocromo calmado.
   La rampa de blancos translúcidos culmina en la barra 5 (aguamarina): la
   metáfora de "escalar hacia la madurez" sin el ruido del arcoíris. */
.gss-grcb__chart {
  position: relative;
  margin-top: clamp(20px, 9cqi, 26px);   /* título ↔ gráfico */
  display: flex;
  align-items: flex-end;
  gap: 7px;
  height: clamp(42px, 20cqi, 56px);
  flex-shrink: 0;           /* nunca se colapsa en columnas estrechas */
}
.gss-grcb__bar {
  flex: 1;
  border-radius: 4px 4px 0 0;
  transform-origin: bottom;
}
.gss-grcb__bar--1 { height: 30%;  background: rgba(255,255,255,.18); }
.gss-grcb__bar--2 { height: 46%;  background: rgba(255,255,255,.28); }
.gss-grcb__bar--3 { height: 62%;  background: rgba(255,255,255,.40); }
.gss-grcb__bar--4 { height: 80%;  background: rgba(255,255,255,.55); }
.gss-grcb__bar--5 { height: 100%; background: var(--grcb-aqua); box-shadow: 0 0 18px rgba(0,255,215,.55); }

/* CTA — pill aguamarina sobre fondo de marca (acento bloqueado) */
.gss-grcb__cta {
  position: relative;
  margin-top: clamp(26px, 12cqi, 34px);   /* gráfico ↔ botón: un poco más de aire */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: clamp(44px, 20cqi, 50px);
  flex-shrink: 0;           /* el botón mantiene su alto siempre */
  border-radius: 999px;
  background: var(--grcb-aqua);
  color: var(--grcb-ink);
  font-size: clamp(12px, 6cqi, 14px);
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0,255,215,.35);
  transition: transform .14s cubic-bezier(.2,.8,.2,1), box-shadow .22s cubic-bezier(.2,.8,.2,1), background-color .22s;
}
.gss-grcb__cta:hover,
.gss-grcb__cta:focus-visible {
  color: var(--grcb-ink);
  background: #1affe0;
  box-shadow: 0 10px 26px rgba(0,255,215,.5);
  transform: translateY(-2px);
}
.gss-grcb__cta:focus-visible {
  outline: 3px solid rgba(255,255,255,.85);
  outline-offset: 2px;
}
.gss-grcb__cta .gss-grcb__arrow { transition: transform .22s cubic-bezier(.2,.8,.2,1); }
.gss-grcb__cta:hover .gss-grcb__arrow { transform: translateX(4px); }

/* Hover suave de toda la tarjeta */
.gss-grcb:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 44px rgba(4, 20, 56, .2);
}

@media (prefers-reduced-motion: reduce) {
  .gss-grcb,
  .gss-grcb__cta,
  .gss-grcb__cta .gss-grcb__arrow { transition: none; }
  .gss-grcb:hover,
  .gss-grcb__cta:hover { transform: none; }
}