/* V7V43 — Formulario simplificado: Paso 1 web y Paso 2 por asesoría telefónica. */
.quote-form--single-step {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
}

.quote-section .quote-form--single-step .form-grid,
.quote-section .quote-layout--compact .quote-form--single-step .form-grid,
.quote-form--single-step .form-grid {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0.68rem;
}

.quote-section .quote-form--single-step .form-field,
.quote-section .quote-form--single-step .form-field--full {
  grid-column: 1 / -1 !important;
}

.quote-form--single-step .form-actions--single {
  display: block;
  margin-top: 1rem;
}

.quote-form--single-step .form-actions--single .button {
  width: 100%;
}

.quote-form--single-step .form-progress {
  margin-bottom: 1rem;
}

.quote-form--single-step .form-privacy-note {
  margin-top: 0.85rem;
}

/* Etiqueta dentro del campo. Se reserva el espacio del icono a la izquierda. */
.js .quote-form--single-step .form-field[data-floating-field] {
  position: relative;
  display: grid;
  gap: 0.35rem;
  min-width: 0;
  padding-top: 0;
}

.js .quote-form--single-step .form-field[data-floating-field] > .form-label {
  position: absolute;
  z-index: 2;
  top: 23px;
  left: 46px;
  max-width: calc(100% - 62px);
  margin: 0;
  padding: 0;
  overflow: hidden;
  transform: translateY(-50%);
  color: var(--neutral-700, #3f5a68);
  background: transparent;
  font-size: 0.9rem;
  font-weight: 750;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
  transition:
    top var(--motion-fast, 140ms) ease,
    color var(--motion-fast, 140ms) ease,
    background-color var(--motion-fast, 140ms) ease,
    font-size var(--motion-fast, 140ms) ease,
    padding var(--motion-fast, 140ms) ease;
}

.js .quote-form--single-step .form-field[data-floating-field] > .form-control {
  min-height: 48px;
  padding-top: 0.72rem;
  padding-right: 0.9rem;
  padding-bottom: 0.58rem;
  padding-left: 2.8rem !important;
  line-height: 1.25;
}

.js .quote-form--single-step .form-field[data-floating-field] > .form-control::placeholder {
  color: transparent;
  opacity: 0;
  transition: color var(--motion-fast, 140ms) ease, opacity var(--motion-fast, 140ms) ease;
}

.js .quote-form--single-step .form-field[data-floating-field]:focus-within > .form-label,
.js .quote-form--single-step .form-field[data-floating-field].has-value > .form-label,
.js .quote-form--single-step .form-field[data-floating-field].is-invalid > .form-label {
  top: 0;
  padding-inline: 0.38rem;
  transform: translateY(-50%);
  color: var(--brand-petrol-dark, #075c66);
  background: #fff;
  font-size: 0.7rem;
  font-weight: 800;
}

.js .quote-form--single-step .form-field[data-floating-field].is-invalid > .form-label {
  color: var(--error-700, #b53a45);
}

.js .quote-form--single-step .form-field[data-floating-field]:focus-within:not(.has-value) > .form-control::placeholder,
.js .quote-form--single-step .form-field[data-floating-field].is-invalid:not(.has-value) > .form-control::placeholder {
  color: var(--neutral-400, #8ea0a5);
  opacity: 0.94;
}

.js .quote-form--single-step .form-field[data-floating-field].has-value > .form-control::placeholder {
  opacity: 0;
}

/* Campo de cargas separado para mantener paridad con el widget de WhatsApp. */
#dependents.form-control {
  --field-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%238b95a7' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21a4 4 0 0 0-8 0'/%3E%3Ccircle cx='12' cy='11' r='3'/%3E%3Cpath d='M22 21a4 4 0 0 0-4-4'/%3E%3Ccircle cx='18' cy='11' r='3'/%3E%3C/svg%3E");
}

@media (max-width: 680px) {
  .js .quote-form--single-step .form-field[data-floating-field] > .form-label {
    top: 22px;
    left: 43px;
    max-width: calc(100% - 57px);
    font-size: 0.85rem;
  }

  .js .quote-form--single-step .form-field[data-floating-field] > .form-control {
    min-height: 46px;
    padding-left: 2.65rem !important;
  }

  .js .quote-form--single-step .form-field[data-floating-field]:focus-within > .form-label,
  .js .quote-form--single-step .form-field[data-floating-field].has-value > .form-label,
  .js .quote-form--single-step .form-field[data-floating-field].is-invalid > .form-label {
    top: 0;
    font-size: 0.68rem;
  }
}

@media (max-width: 380px) {
  .js .quote-form--single-step .form-field[data-floating-field] > .form-label {
    left: 42px;
    max-width: calc(100% - 54px);
    font-size: 0.82rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .quote-form--single-step .form-field[data-floating-field] > .form-label,
  .js .quote-form--single-step .form-field[data-floating-field] > .form-control::placeholder {
    transition: none;
  }
}

/* V7V45 — CTA centrado en todos los formularios de cotización.
   En móviles angostos adapta tipografía, padding e icono para evitar desbordamiento. */
.quote-form--single-step .form-actions--single {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
}

@media (max-width: 380px) {
  .quote-form--single-step button.button--quote[data-submit-form][type="submit"] {
    --form-submit-disc: 2.18rem;
    --form-submit-left: 0.24rem;
    width: max-content !important;
    max-width: 100% !important;
    min-height: 2.86rem;
    margin-inline: auto !important;
    padding-left: calc(var(--form-submit-left) + var(--form-submit-disc) + 8px) !important;
    padding-right: 14px !important;
    font-size: clamp(0.76rem, 3.85vw, 0.84rem);
    font-weight: 750;
    letter-spacing: -0.01em;
    line-height: 1.08;
    white-space: nowrap;
  }

  .quote-form--single-step button.button--quote[data-submit-form][type="submit"]::after {
    left: calc(var(--form-submit-left) + ((var(--form-submit-disc) - 1.12rem) / 2));
    width: 1.12rem;
    height: 1.12rem;
  }
}



/* V3 — formulario compacto: error y label comparten la misma franja superior */
.quote-form--single-step .form-field[data-floating-field] {
  position: relative;
}

.quote-form--single-step .form-field[data-floating-field] > .form-error {
  position: absolute;
  z-index: 3;
  top: -0.34rem;
  right: 0.42rem;
  min-height: 0;
  max-width: 13rem;
  margin: 0;
  padding-inline: 0.28rem;
  color: var(--error-700, #b53a45);
  background: #fff;
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1.1;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quote-form--single-step .form-field[data-floating-field] > .form-error:empty {
  display: none;
}

.quote-form--single-step #age-loads.form-control {
  --field-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%238b95a7' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='10' cy='8' r='3'/%3E%3Cpath d='M18 8h.01'/%3E%3Cpath d='M18 12h.01'/%3E%3C/svg%3E");
}

@media (max-width: 680px) {
  .quote-section .quote-form--single-step .form-grid,
  .quote-section .quote-layout--compact .quote-form--single-step .form-grid,
  .quote-form--single-step .form-grid {
    gap: 0.6rem;
  }

  .quote-form--single-step .form-field[data-floating-field] > .form-error {
    max-width: 10.5rem;
    font-size: 0.61rem;
  }
}

@media (max-width: 430px) {
  .quote-form--single-step .form-field[data-floating-field] > .form-error {
    max-width: 8.8rem;
    font-size: 0.57rem;
  }
}