/**
 * Casos de éxito.
 *
 * Referencia: casos-de-exito.html:106 (completa) · gruas.html:394 (hub) ·
 * gruas-mantenimiento-preventivo.html:267 (servicio).
 */

/* Aquí la cabecera y los chips forman un solo bloque: se acercan entre sí y es
   el bloque entero el que se separa de la rejilla. Al revés que el reparto
   general de .cg-head/.cg-chips, que se deja intacto para el resto de módulos. */
.cg-mod-casos-grid .cg-head { margin-bottom: 20px; }
.cg-mod-casos-grid .cg-chips { gap: 10px; margin-bottom: 40px; }

.cg-casos {
  display: grid;
  gap: var(--cg-gap-photo);
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}

.cg-casos--completa {
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
}

.cg-card--caso { color: inherit; }
.cg-card--caso:hover { color: inherit; }

.cg-card__badge {
  position: absolute;
  left: 16px;
  top: 16px;
  padding: 8px 16px;
  font-size: var(--cg-fs-label);
  font-weight: 600;
  /* Algo más cerrado que --cg-ls-label: sobre la foto el distintivo se lee mejor
     compacto, y así lo trae la maqueta en las nueve tarjetas */
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cg-white);
  border-radius: var(--cg-radius-pill);
}

/* El velo del distintivo marca la línea: azul en grúas, tierra en manlift */
.cg-card__badge--gruas { background: rgba(var(--cg-navy-900-rgb), .9); }
.cg-card__badge--manlift { background: rgba(var(--cg-brown-900-rgb), .92); }

.cg-card--caso .cg-card__body { padding: clamp(24px, 2.8vw, 30px); gap: 16px; }

/* Fuera del listado la tarjeta resume, no desarrolla: cuerpo fijo y más apretado */
.cg-card--caso-servicio .cg-card__body,
.cg-card--caso-hub .cg-card__body { padding: 28px; gap: 14px; }

/* El titular largo del listado necesita el interlineado un punto más corto */
.cg-card--caso-completa .cg-h3--lg { line-height: 1.3; }

.cg-card--caso .cg-card__texto strong {
  font-weight: 600;
  color: var(--cg-navy-700);
}

/* Reto y solución, y servicio y resultado, se leen como pares: van más juntos
   entre sí que respecto al resto del cuerpo de la tarjeta */
.cg-caso__par {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.cg-card__lineas {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cg-caso__resultado {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cg-caso__resultado-valor {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--cg-navy-700);
}

.cg-casos__cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(28px, 3.4vw, 40px);
}

/* Pastilla con contorno, exclusiva de este cierre de módulo: no compite con el
   naranja de las tarjetas y sigue leyéndose como acción principal de la sección */
.cg-casos__cta .cg-btn--linea {
  background: transparent;
  color: var(--cg-navy-700);
  border: 1.5px solid var(--cg-blue-200);
  padding: 17px 36px;
  gap: 12px;
  transition: border-color var(--cg-t-ui) ease, color var(--cg-t-ui) ease,
    transform var(--cg-t-ui) ease;
}
.cg-casos__cta .cg-btn--linea:hover {
  border-color: var(--cg-orange);
  color: var(--cg-orange);
  transform: translateY(-2px);
}

/* Reentrada tras filtrar: más corta que el izaje de entrada y sin desfase, para
   que la rejilla filtrada aparezca de una vez */
@keyframes cgFiltroIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.cg-card--caso.is-filtered-in {
  animation: cgFiltroIn .4s var(--cg-ease) both;
}

.cg-card--caso[hidden] { display: none; }