/**
 * Panel numerado.
 *
 * Celdas sin gap: la separación se dibuja con box-shadow interior y el borde
 * exterior lo pone el contenedor. Referencia: gruas.html:84.
 */

.cg-panelnum {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--cg-white);
  border: 1px solid var(--cg-line);
  border-radius: var(--cg-radius);
  overflow: hidden;
}

/* Reparto libre: seguro con 3, 5 o 6 ítems */
.cg-panelnum--auto {
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}

.cg-panelnum--auto.cg-panelnum--denso {
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

/* Con 4 u 8 ítems el reparto automático resuelve 3 o 5 columnas y deja
   celdas vacías dentro del marco. Columnas fijas por ancho. */
@media (min-width: 600px) {
  .cg-panelnum--pares,
  .cg-panelnum--fijo { grid-template-columns: repeat(2, 1fr); }
}

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

.cg-panelnum__celda {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(24px, 2.6vw, 32px) clamp(22px, 2.4vw, 30px);
  box-shadow: 1px 0 0 0 var(--cg-line), 0 1px 0 0 var(--cg-line);
  transition: background .25s ease;
}

.cg-panelnum__celda:hover { background: var(--cg-surface); }

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

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

.cg-panelnum .cg-num { font-size: var(--cg-fs-eyebrow); }

/* Escala compacta cuando hay muchos ítems */
.cg-panelnum--denso .cg-panelnum__celda {
  gap: 10px;
  padding: clamp(22px, 2.4vw, 28px);
}

.cg-panelnum--denso .cg-panelnum__titulo { font-size: 19px; line-height: 1.32; }
.cg-panelnum--denso .cg-panelnum__texto { font-size: var(--cg-fs-item); }
.cg-panelnum--denso .cg-num { font-size: var(--cg-fs-label); }

.cg-section--dark .cg-panelnum {
  background: transparent;
  border-color: rgba(var(--cg-blue-200-rgb), .3);
}

.cg-section--dark .cg-panelnum__celda {
  box-shadow: 1px 0 0 0 rgba(var(--cg-blue-200-rgb), .3), 0 1px 0 0 rgba(var(--cg-blue-200-rgb), .3);
}

.cg-section--dark .cg-panelnum__celda:hover { background: rgba(var(--cg-white-rgb), .06); }
.cg-section--dark .cg-panelnum__titulo { color: var(--cg-white); }
.cg-section--dark .cg-panelnum__texto { color: var(--cg-blue-200); }

/* Paneles de cierre bajo la rejilla (manlift-alquiler.html:122) */
.cg-panelnum__paneles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  gap: var(--cg-gap-photo);
  margin-top: 28px;
}

.cg-panelnum__panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-radius: var(--cg-radius);
  padding: clamp(26px, 3vw, 34px);
}

.cg-panelnum__panel--navy { background: var(--cg-ink); }
.cg-panelnum__panel--tierra { background: var(--cg-brown-900); }

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

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

.cg-panelnum__panel-texto {
  font-size: var(--cg-fs-body);
  line-height: 1.6;
  color: var(--cg-blue-200);
}

/* Sobre el panel tierra el texto pide blanco cálido */
.cg-panelnum__panel--tierra .cg-panelnum__panel-texto { color: var(--cg-brown-100); }