/**
 * Formulario de cotización.
 *
 * Referencia: contacto.html:111 · index.html:373.
 * Los campos son la excepción al radio de 12 px del sistema: usan 6 px.
 */

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

.cg-form-wrap__intro {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.cg-form-wrap__intro .cg-head { gap: 20px; margin-bottom: 0; max-width: none; }
.cg-form-wrap__intro .cg-bullets { margin-top: 6px; }

.cg-datos {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 6px;
}

/* Sobre blanco la caja se separa con el fondo nube; sobre nube se invierte. */
.cg-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(24px, 3vw, 36px);
  background: var(--cg-surface);
  border-radius: var(--cg-radius);
}

/* La sombra solo hace falta cuando la caja es blanca sobre fondo nube */
.cg-section--surface .cg-form {
  background: var(--cg-white);
  box-shadow: var(--cg-shadow-card);
}

.cg-form__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(206px, 100%), 1fr));
  gap: 16px;
}

.cg-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
}

.cg-field > label {
  font-size: var(--cg-fs-eyebrow);
  font-weight: 600;
  color: var(--cg-gray-700);
}

.cg-field input[type='text'],
.cg-field input[type='tel'],
.cg-field input[type='email'],
.cg-field select,
.cg-field textarea {
  font-family: inherit;
  font-size: 17px;
  color: var(--cg-navy-700);
  background: var(--cg-white);
  border: 1px solid var(--cg-blue-200);
  border-radius: var(--cg-radius-input);
  padding: 16px;
  transition: border-color .2s ease;
}

.cg-field select { padding: 15px 16px; appearance: none; }
.cg-field textarea { resize: vertical; }

.cg-field input:focus,
.cg-field select:focus,
.cg-field textarea:focus {
  border-color: var(--cg-orange);
  outline: 2px solid transparent;
  outline-offset: 0;
}

.cg-field select:disabled {
  background: var(--cg-surface-off);
  color: var(--cg-gray-700);
  cursor: not-allowed;
}

.cg-field--check {
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
}

.cg-field--check input {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  flex: none;
  accent-color: var(--cg-orange);
}

.cg-field--check label {
  font-size: var(--cg-fs-item);
  font-weight: 400;
  line-height: 1.5;
  color: var(--cg-gray-700);
}

.cg-field__error {
  font-size: var(--cg-fs-item);
  color: var(--cg-orange-dark);
}

.cg-field.has-error input,
.cg-field.has-error select,
.cg-field.has-error textarea { border-color: var(--cg-orange-dark); }

/* El botón ocupa el ancho de la caja, como en la maqueta */
.cg-form__enviar {
  justify-content: center;
  letter-spacing: .04em;
}

.cg-form__enviar.is-sent {
  background: var(--cg-navy-700);
  pointer-events: none;
}

.cg-form__estado {
  margin: 0;
  font-size: var(--cg-fs-item);
  line-height: 1.5;
}

.cg-form__estado:empty { display: none; }
.cg-form__estado.is-ok { color: var(--cg-navy-700); font-weight: 600; }
.cg-form__estado.is-error { color: var(--cg-orange-dark); font-weight: 600; }

/* Trampa para robots: fuera de pantalla, nunca oculta con display:none
   (algunos robots ignoran los campos ocultos de ese modo). */
.cg-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}