/**
 * Tabla de recomendación.
 *
 * Referencia: manlift-venta.html:220.
 */

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

.cg-tabla-rec__intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

.cg-tabla-rec__intro > .cg-btn { margin-top: 8px; }

.cg-tabla-rec__destacado {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
  padding: 26px;
  background: var(--cg-surface);
  border-radius: var(--cg-radius);
}

/* El rótulo del bloque destacado va un punto por encima del resto */
.cg-tabla-rec__destacado .cg-label {
  font-size: var(--cg-fs-eyebrow);
  letter-spacing: var(--cg-ls-eyebrow);
}

.cg-tabla-rec__destacado-texto {
  font-size: 17px;
  line-height: 1.6;
  color: var(--cg-gray-700);
}

.cg-tabla-rec__destacado-texto strong { font-weight: 700; color: var(--cg-navy-700); }

.cg-tabla-rec__tabla {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--cg-line);
  border-radius: var(--cg-radius);
  overflow: hidden;
  text-align: left;
}

.cg-tabla-rec__tabla th,
.cg-tabla-rec__tabla td {
  padding: 18px 22px;
  font-size: var(--cg-fs-item);
  border-bottom: 1px solid var(--cg-line);
}

.cg-tabla-rec__tabla tbody tr:last-child th,
.cg-tabla-rec__tabla tbody tr:last-child td { border-bottom: 0; }

/* El encabezado va sobre azul profundo: separa la tabla del fondo de sección y
   destaca la columna de la recomendación en dorado */
.cg-tabla-rec__tabla thead th {
  padding: 18px 24px;
  font-size: var(--cg-fs-eyebrow);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cg-blue-200);
  background: var(--cg-ink);
  border-bottom: 0;
}

.cg-tabla-rec__tabla thead th:last-child { color: var(--cg-gold); }

.cg-tabla-rec__tabla tbody th,
.cg-tabla-rec__tabla tbody td {
  padding: 20px 24px;
  font-size: 17px;
  line-height: 1.5;
}

.cg-tabla-rec__tabla tbody th {
  font-weight: 400;
  color: var(--cg-gray-700);
}

/* La columna de lo que busca el cliente pesa algo más que la respuesta */
.cg-tabla-rec__tabla th:first-child,
.cg-tabla-rec__tabla td:first-child { width: 52.38%; }

.cg-tabla-rec__tabla tbody tr { transition: background var(--cg-t-ui) ease; }
.cg-tabla-rec__tabla tbody tr:hover { background: var(--cg-surface); }

/* La recomendación se lee como una etiqueta, no como texto corrido */
.cg-tabla-rec__valor {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  font-size: var(--cg-fs-item);
  font-weight: 600;
  color: var(--cg-white);
  background: var(--cg-orange);
  border-radius: var(--cg-radius-pill);
}

.cg-tabla-rec__valor--azul { background: var(--cg-navy-700); }

.cg-tabla-rec__valor--contorno {
  background: none;
  color: var(--cg-navy-700);
  border: 1px solid var(--cg-blue-200);
}