/**
 * Herramienta de decisión.
 *
 * Referencia: manlift-alquiler.html:247.
 */

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

.cg-decision__intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cg-decision__intro .cg-bullets { margin-top: 4px; }

/* Sobre blanco la caja se define con el fondo nube y sin borde; sobre nube se
   invierte y entonces sí necesita contorno. */
.cg-decision__tool {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: clamp(24px, 3vw, 36px);
  background: var(--cg-surface);
  border: 0;
  border-radius: var(--cg-radius);
}

.cg-section--surface .cg-decision__tool {
  background: var(--cg-white);
  border: 1px solid var(--cg-line);
}

.cg-decision__pregunta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  border: 0;
}

.cg-decision__legend {
  padding: 0;
  font-size: var(--cg-fs-item);
  font-weight: 600;
  color: var(--cg-navy-700);
}

.cg-decision__opciones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cg-decision__opcion {
  font-size: var(--cg-fs-item);
  font-weight: 600;
  color: var(--cg-gray-700);
  background: var(--cg-white);
  border: 1px solid var(--cg-blue-200);
  border-radius: var(--cg-radius-pill);
  padding: 11px 20px;
  cursor: pointer;
  transition: background var(--cg-t-ui) ease, color var(--cg-t-ui) ease, border-color var(--cg-t-ui) ease;
}

.cg-decision__opcion[aria-pressed='true'] {
  background: var(--cg-orange);
  border-color: var(--cg-orange);
  color: var(--cg-white);
}

/* El resultado cierra la caja: se separa con un filete, no con otra caja dentro */
.cg-decision__resultado {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 22px;
  border-top: 1px solid var(--cg-line-strong);
  /* Atenuado hasta que hay respuesta: la recomendación aún no es real. */
  opacity: .55;
  transition: opacity .35s ease;
}

.cg-decision__resultado.is-resuelto { opacity: 1; }

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

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

.cg-decision__cta { align-self: flex-start; margin-top: 6px; }
.cg-decision__cta[hidden] { display: none; }