/* ===== CONTACTO: campos extendidos (labels, select, fecha, unidades, radio) ===== */
/* Pegar en custom.css debajo de los estilos de CONTACTO que ya tenés. */

/* --- Espaciado: los campos ahora llevan label arriba --- */
.contact__form-wrap form .form-grp {
  margin-bottom: 20px;
}

/* --- Títulos de sección --- */
.contact__form-wrap form .form-section-title {
  font-size: 18px;
  font-weight: 600;
  margin: 15px 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e9e9e9;
}
.contact__form-wrap form > .form-section-title:first-of-type {
  margin-top: 0;
}

/* --- Labels y legends --- */
.contact__form-wrap form .form-label {
  display: block;
  float: none;          /* Bootstrap le pone float al legend */
  width: auto;
  padding: 0;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: #11131a;       /* el template pinta los label de azul */
}
.contact__form-wrap form .form-label .req {
  color: #ff1c72;
  margin-left: 2px;
}

.contact__form-wrap form fieldset.form-grp {
  border: 0;
  padding: 0;
  min-width: 0;
}

/* --- Select --- */
.contact__form-wrap form .form-grp select {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 50px;
  padding: 0 42px 0 15px;
  font-size: 15px;
  color: #11131a;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2311131a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 15px center / 14px;
  border: 1px solid #e9e9e9;
  border-radius: 8px;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: border-color .2s ease;
}
.contact__form-wrap form .form-grp select:focus {
  border-color: #ff1c72;
  outline: none;
}
/* Sin elegir: mismo gris que los placeholders */
.contact__form-wrap form .form-grp select:invalid {
  color: rgba(17, 19, 26, .45);
}
.contact__form-wrap form .form-grp select option {
  color: #11131a;
}

/* --- Fecha --- */
.contact__form-wrap form .form-grp input[type="date"] {
  display: block;
  min-height: 50px;
  line-height: normal;
}
/* Vacío (inválido por required): dd/mm/aaaa en gris */
.contact__form-wrap form .form-grp input[type="date"]:invalid::-webkit-datetime-edit {
  color: rgba(17, 19, 26, .45);
}
.contact__form-wrap form .form-grp input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: .55;
  cursor: pointer;
  transition: opacity .2s ease;
}
.contact__form-wrap form .form-grp input[type="date"]:hover::-webkit-calendar-picker-indicator,
.contact__form-wrap form .form-grp input[type="date"]:focus::-webkit-calendar-picker-indicator {
  opacity: 1;
}
/* iOS Safari: evita que el campo colapse y centre el texto */
@supports (-webkit-touch-callout: none) {
  .contact__form-wrap form .form-grp input[type="date"] {
    -webkit-appearance: none;
  }
  .contact__form-wrap form .form-grp input[type="date"]::-webkit-date-and-time-value {
    text-align: left;
  }
}

/* --- Números con unidad (cm / kg) --- */
.contact__form-wrap form .input-unit {
  position: relative;
}
.contact__form-wrap form .input-unit input {
  padding-right: 48px;
}
.contact__form-wrap form .input-unit__suffix {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: rgba(17, 19, 26, .45);
  pointer-events: none;
}
/* Sin flechitas de incremento */
.contact__form-wrap form input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
.contact__form-wrap form input[type="number"]::-webkit-outer-spin-button,
.contact__form-wrap form input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* --- Radio buttons --- */
.contact__form-wrap form .radio-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 28px;
  min-height: 50px;     /* misma altura que un input: alinea con la columna vecina */
}
/* Listas largas: apiladas, 2 columnas desde tablet */
.contact__form-wrap form .radio-options--stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  min-height: 0;
  padding-top: 4px;
}
@media (min-width: 768px) {
  .contact__form-wrap form .radio-options--stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 28px;
  }
}

.contact__form-wrap form .radio-option {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 15px;
  line-height: 22px;
  color: #11131a;
  cursor: pointer;
  user-select: none;
}

.contact__form-wrap form .radio-grp input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  padding: 0;           /* el template le da padding a todos los input */
  margin: 0;
  border: 1px solid #e9e9e9;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.contact__form-wrap form .radio-grp input[type="radio"]:hover,
.contact__form-wrap form .radio-grp input[type="radio"]:focus-visible {
  border-color: #ff1c72;
  outline: none;
}
/* Marcado: punto de marca con aro blanco */
.contact__form-wrap form .radio-grp input[type="radio"]:checked {
  border-color: #ff1c72;
  background: #ff1c72;
  box-shadow: inset 0 0 0 5px #fff;
}