/**
 * Texto con celdas + panel azul.
 *
 * Referencia: gruas.html:249 (tarjetas apiladas sobre panel ancho) ·
 * gruas-mantenimiento-preventivo.html:208 (celdas junto al panel) ·
 * manlift.html:133 (flota, con foto y sin numerar).
 */

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

/* Sin panel el bloque ocupa todo el ancho */
.cg-split--solo { grid-template-columns: 1fr; }

/* Tarjetas a todo el ancho y el panel debajo, también completo */
.cg-split--apilado {
  grid-template-columns: 1fr;
  gap: clamp(20px, 2.4vw, 26px);
}

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

/* ------------------------------------------------ Tarjetas de producto */

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

/* Cuatro tarjetas: dos sub-rejillas de dos, para que nunca queden 3+1 */
.cg-productos--pares {
  grid-template-columns: repeat(auto-fit, minmax(min(520px, 100%), 1fr));
}

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

.cg-producto {
  display: flex;
  flex-direction: column;
  color: inherit;
}

.cg-producto:hover { color: inherit; }

.cg-producto__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  padding: clamp(24px, 2.8vw, 30px);
}

/* Con foto el cuerpo respira menos: la imagen ya aporta aire */
.cg-producto--foto .cg-producto__body { padding: 24px; }

/* La tarjeta con foto no lleva contorno: la imagen ya la delimita */
.cg-producto--foto { border: none; }

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

.cg-producto__texto {
  font-size: var(--cg-fs-body);
  line-height: 1.6;
  color: var(--cg-gray-700);
}

.cg-producto__cta { margin-top: auto; padding-top: 12px; }
.cg-producto:hover .cg-producto__cta { gap: 15px; }

/* Pie con dato: se separa del cuerpo con un filete */
.cg-producto__pie {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--cg-line);
}

.cg-producto__dato {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* La etiqueta del dato no es un acento: acompaña al valor y va en gris */
.cg-producto__dato .cg-label { color: var(--cg-gray-700); }

.cg-producto__dato-valor {
  font-size: 21px;
  font-weight: 700;
  color: var(--cg-navy-700);
}

/* ------------------------------------------------------------- Panel */

.cg-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: clamp(28px, 3.4vw, 40px);
  background: var(--cg-ink);
  border-radius: var(--cg-radius);
}

/* A todo el ancho el panel se parte en dos por dentro */
.cg-panel--ancho {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(24px, 3vw, 40px);
  align-items: center;
}

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

.cg-panel__aside {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

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

.cg-panel__titulo {
  font-size: clamp(21px, 2.2vw, 26px);
  line-height: 1.3;
  font-weight: 700;
  color: var(--cg-white);
}

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

.cg-panel__rule {
  height: 1px;
  background: rgba(var(--cg-blue-200-rgb), .22);
}

.cg-panel .cg-bullets { gap: 13px; }
.cg-panel--ancho .cg-bullets { gap: 11px; }
.cg-panel .cg-bullets li { color: var(--cg-blue-200); line-height: 1.55; }

.cg-panel__logos {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 6px;
}

.cg-panel__logos img { height: var(--alto, 24px); }

/* Sobre fondo oscuro el panel se distingue con un borde, no con el fondo */
.cg-section--dark .cg-panel {
  background: rgba(var(--cg-white-rgb), .06);
  border: 1px solid rgba(var(--cg-blue-200-rgb), .3);
}

/* Sobre sección oscura el panel no es una caja: las viñetas van sueltas en la
   segunda columna y los logos acompañan al encabezado (nosotros.html:202).
   Se cualifica con .cg-section--dark para ganarle a la regla de arriba. */
.cg-panel--plano,
.cg-section--dark .cg-panel--plano {
  background: none;
  border: 0;
  padding: 0;
}

/* El encabezado ya lo pone el módulo: dentro del panel plano sobra */
.cg-panel--plano .cg-panel__head { display: none; }
.cg-panel--plano .cg-panel__aside { gap: 13px; }
.cg-panel--plano .cg-bullets { gap: 13px; }

/* Sin panel, la tarjeta admite una columna algo más ancha */
.cg-split--solo .cg-productos {
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
}

/* El encabezado del panel ancho abre un punto más que el de la caja estrecha */
.cg-panel--ancho .cg-panel__head { gap: 12px; }

/* Botón de cierre del catálogo (referencia/manlift.html:210) */
.cg-split__cierre {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}