/**
 * Líneas de negocio.
 *
 * Referencia: index.html:152-191 · nosotros.html:258.
 */

.cg-lineas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(272px, 100%), 1fr));
  gap: clamp(18px, 2.2vw, 28px);
}

.cg-linea {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(430px, 54vw, 560px);
  border-radius: var(--cg-radius);
  overflow: hidden;
  isolation: isolate;
  transition: transform .42s var(--cg-ease), box-shadow .42s ease;
}

.cg-linea:hover {
  transform: translateY(-6px);
  box-shadow: var(--cg-shadow-hover);
}

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

.cg-linea:hover .cg-linea__foto { transform: scale(1.07); }

/* El velo es el único diferenciador cromático entre las dos líneas */
.cg-linea::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
}

.cg-linea--gruas::after { background: var(--cg-veil-linea-gruas); }
.cg-linea--manlift::after { background: var(--cg-veil-linea-manlift); }

.cg-linea__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: clamp(24px, 3vw, 38px);
}

.cg-linea .cg-eyebrow { color: var(--cg-gold); }

.cg-linea__titulo {
  font-size: clamp(25px, 2.6vw, 32px);
  line-height: 1.25;
  font-weight: 700;
  color: var(--cg-white);
}

/* Lista de alcances: el guion hace de viñeta y toma el acento de la línea */
.cg-linea__lista {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.cg-linea__lista li {
  display: flex;
  gap: 12px;
  font-size: var(--cg-fs-btn);
  line-height: 1.4;
  color: var(--cg-white);
}

.cg-linea__lista li span { font-weight: 700; }
.cg-linea--gruas .cg-linea__lista li span { color: var(--cg-orange); }
.cg-linea--manlift .cg-linea__lista li span { color: var(--cg-gold); }

.cg-linea__texto {
  font-size: 17px;
  line-height: 1.55;
  color: var(--cg-blue-200);
}

/* Sobre el velo tierra el azul se apaga: el párrafo va en blanco cálido
   (nosotros.html:280 manlift frente a :270 grúas) */
.cg-linea--manlift .cg-linea__texto { color: var(--cg-brown-100); }

/* Botón píldora al pie. En grúas es naranja; en manlift se invierte a blanco
   para no competir con el velo tierra. */
.cg-linea__cta {
  align-self: flex-start;
  margin-top: 6px;
  padding: 16px 32px;
  gap: 10px;
}

.cg-linea--gruas .cg-linea__cta {
  background: var(--cg-orange);
  color: var(--cg-white);
}

.cg-linea--gruas .cg-linea__cta:hover {
  background: var(--cg-orange-dark);
  color: var(--cg-white);
  gap: 16px;
}

.cg-linea--manlift .cg-linea__cta {
  background: var(--cg-white);
  color: var(--cg-brown-900);
}

.cg-linea--manlift .cg-linea__cta:hover {
  color: var(--cg-orange);
  gap: 16px;
}

/* Variante compacta de Nosotros (nosotros.html:264): la tarjeta entera enlaza,
   es más baja y cierra con enlace de flecha en vez de píldora. */
.cg-linea--compacta {
  min-height: clamp(320px, 36vw, 380px);
  color: inherit;
}

/* Con tarjeta compacta la columna pide más ancho mínimo que en portada
   (nosotros.html:263 usa 360px frente a los 272px de index.html:159).
   Sin :has() se queda en el valor de portada, que es un degradado aceptable. */
.cg-lineas:has(.cg-linea--compacta) {
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
}

.cg-linea__flecha {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 6px;
  font-size: var(--cg-fs-body);
  font-weight: 600;
  transition: gap var(--cg-t-ui) ease;
}

.cg-linea--gruas .cg-linea__flecha { color: var(--cg-orange); }
.cg-linea--manlift .cg-linea__flecha { color: var(--cg-gold); }
a.cg-linea:hover .cg-linea__flecha { gap: 15px; }