/**
 * Cierre con llamada a la acción.
 *
 * Referencia: referencia/gruas.html:441 (dos columnas) e index.html:356 (centrado).
 */

/* El fondo navy, el recorte y la tipografía sobre oscuro los pone cg-section--dark */

.cg-cta__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: var(--cg-gap-col);
  align-items: center;
}

.cg-cta__main {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.cg-cta__texto {
  font-size: var(--cg-fs-lead);
  line-height: 1.55;
  font-weight: 300;
  color: var(--cg-blue-200);
  text-wrap: pretty;
}

.cg-cta__datos {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Variante sin datos: una sola columna centrada */
.cg-mod-cta-final--centrado .cg-cta__grid { display: block; }

.cg-mod-cta-final--centrado .cg-cta__main {
  align-items: center;
  text-align: center;
  gap: 26px;
}

.cg-mod-cta-final--centrado .cg-h2 { max-width: 900px; }
.cg-mod-cta-final--centrado .cg-cta__texto { max-width: 760px; }
.cg-mod-cta-final--centrado .cg-btns { justify-content: center; margin-top: 8px; }

/* Variante clara y contenida (manlift.html:264). La sección la contiene base.css
   y el color lo pone la tarjeta de dentro (manlift.html:265). */
.cg-mod-cta-final--claro .cg-cta__grid {
  background: var(--cg-surface);
  border-radius: var(--cg-radius);
  padding: clamp(32px, 4vw, 52px);
  gap: clamp(28px, 4vw, 48px);
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
}

.cg-mod-cta-final--claro .cg-h2 { color: var(--cg-navy-700); }
.cg-mod-cta-final--claro .cg-eyebrow { color: var(--cg-orange); }

.cg-mod-cta-final--claro .cg-cta__texto {
  font-weight: 400;
  color: var(--cg-gray-700);
}