/**
 * Catálogo de servicios.
 *
 * Referencia: index.html:194 (ocho, sobre oscuro) · servicios.html:74 (diez).
 * La tarjeta es fotografía a sangre con el texto superpuesto al pie.
 */

/* Encabezado y filtros comparten fila, alineados por la base */
.cg-servicios__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 32px;
  margin-bottom: 44px;
}

.cg-servicios__intro { max-width: 640px; }

.cg-servicios__head .cg-chips { margin-bottom: 0; }

.cg-chips--servicios .cg-chip {
  font-size: var(--cg-fs-body);
  border-width: 1.5px;
  padding: 12px 26px;
}

/* Sobre fondo oscuro el chip inactivo es transparente con borde claro */
.cg-chips--sobre-oscuro .cg-chip {
  color: var(--cg-white);
  background: transparent;
  border-color: rgba(var(--cg-white-rgb), .65);
}

.cg-chips--sobre-oscuro .cg-chip[aria-pressed='true'],
.cg-chips--servicios .cg-chip[aria-pressed='true'] {
  color: var(--cg-white);
  background: var(--cg-orange);
  border-color: var(--cg-orange);
}

/* Rejilla */
.cg-servicios {
  display: grid;
  gap: var(--cg-gap-dense);
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .cg-servicios--auto,
  .cg-servicios--pares,
  .cg-servicios--fijo { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1080px) {
  .cg-servicios--auto,
  .cg-servicios--pares,
  .cg-servicios--fijo { grid-template-columns: repeat(4, 1fr); }
}

/* Tarjeta */
.cg-servicio {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(272px, 32vw, 320px);
  border-radius: var(--cg-radius);
  overflow: hidden;
  color: inherit;
  isolation: isolate;
  transition: transform .42s var(--cg-ease), box-shadow .42s ease;
}

a.cg-servicio:hover {
  color: inherit;
  transform: translateY(-6px);
  box-shadow: var(--cg-shadow-hover);
}

.cg-servicio__foto {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--cg-t-photo) var(--cg-ease);
}

a.cg-servicio:hover .cg-servicio__foto { transform: scale(1.07); }

/* El velo lleva el color de su línea: azul en grúas, tierra en manlift */
.cg-servicio__velo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--cg-veil-card-gruas);
}

.cg-servicio[data-linea='manlift'] .cg-servicio__velo {
  background: var(--cg-veil-card-manlift);
}

.cg-servicio__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(20px, 2.4vw, 26px);
}

.cg-servicio__linea {
  font-size: var(--cg-fs-eyebrow);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--cg-ls-num);
  text-transform: uppercase;
  color: var(--cg-gold);
}

.cg-servicio__titulo {
  font-size: var(--cg-fs-h3-lg);
  line-height: 1.33;
  font-weight: 700;
  color: var(--cg-white);
}

.cg-servicio__texto {
  font-size: var(--cg-fs-body);
  line-height: 1.5;
  color: var(--cg-blue-200);
}

.cg-servicio__cta { margin-top: 6px; }
a.cg-servicio:hover .cg-servicio__cta { gap: 15px; }

/* Reentrada tras filtrar: fotograma propio, más corto que el izaje de entrada */
@keyframes cgFiltroIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.cg-servicio.is-filtered-in {
  animation: cgFiltroIn .4s var(--cg-ease) calc(var(--fi, 0) * 45ms) both;
}

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

/* Sobre el velo tierra el naranja se pierde: el texto va en blanco cálido y el
   enlace en dorado (servicios.html:150-152) */
.cg-servicio[data-linea='manlift'] .cg-servicio__texto { color: var(--cg-brown-100); }
.cg-servicio[data-linea='manlift'] .cg-servicio__cta { color: var(--cg-gold); }
a.cg-servicio[data-linea='manlift']:hover .cg-servicio__cta { color: var(--cg-gold); }