.proposal-form {
  width: 100%;
}

/* La barra se ancla arriba. El formulario mide 692px y los pasos se recorren
   desplazando, así que una barra que sube con la página solo servía en el
   primer scroll: justo cuando el cliente empieza a rellenar es cuando deja de
   verla. Pegada al borde superior sigue a la vista durante los tres pasos.
   top:0 y no el alto de la navbar porque esta navbar es position:absolute —
   se va con el scroll, así que para cuando la barra se pega ya no está, y
   mientras la barra está en su sitio natural (y=494, dentro de la tarjeta) no
   hay nada que solape. La tarjeta y la página no tienen overflow:hidden, que
   es lo que rompería el sticky.
   El fondo es el de la tarjeta porque al pegarse los campos pasan por debajo y
   sin fondo propio se leería el texto a través de la barra. El padding de 16px
   arriba y el margen negativo de 16px dejan el relleno en el mismo sitio que
   antes: el cambio es solo al pegarse. */
.form-progress {
  position: sticky;
  /* Bajo el logo fijo de la cabecera, no en el borde: .proposal-header-logo
     está en position:fixed con z-index 60 (css/proposal-page.css:5), así que
     con top:0 la barra pasaba por debajo y el logo se leía encima de "Paso N
     de 3". 22 + 30 + 8 = 60, el alto del logo al ancho de escritorio. */
  top: 60px;
  z-index: 5;
  background: #fffdf9;
  padding: 16px 0 10px;
  margin-top: -16px;
  margin-bottom: 18px;
}

.form-progress-track {
  height: 2px;
  background: rgba(248, 230, 216, .18);
  border-radius: 2px;
  overflow: hidden;
}

.form-progress-fill {
  height: 100%;
  width: 25%;
  background: var(--_colors---orange);
  border-radius: 2px;
  transition: width .35s ease;
}

.form-progress-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  font-family: var(--font-family--heading-font);
  color: var(--beige);
}

/* El porcentaje va en la tinta, no en el naranja: #fc6148 sobre la tarjeta
   clara da 3.02:1 y a este tamaño no cuenta como texto grande, así que
   habría sido la única parte de la barra que no se leía. El naranja se queda
   en la barra, que es gráfico y solo pide 3:1. */
.form-progress-pct {
  color: #2b2a2a;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* El paso ya se anuncia con aria-live; repetir el porcentaje como otro número
   suelto solo añade ruido al lector de pantalla. */
.form-progress-pct[aria-hidden="true"] {
  user-select: none;
}

.form-step-title {
  font-family: var(--font-family--heading-font);
  color: var(--beige);
  font-size: var(--font-sizes--h4);
  margin: 0;
}

.form-step {
  display: none;
}

.form-step.is-active {
  display: block;
}

.cf-step-head {
  margin-bottom: 24px;
}

.cf-step-title {
  font-family: var(--font-family--heading-font);
  color: var(--beige);
  font-size: 22px;
  line-height: 1.2;
  margin: 0 0 6px;
}

.cf-step-desc {
  margin: 0;
  color: rgba(248, 230, 216, .72);
  font-size: 15px;
  line-height: 1.5;
}

.cf-field {
  margin-bottom: 24px;
}

.proposal-form .w-input:focus {
  border-color: var(--_colors---orange);
  box-shadow: 0 1px 0 0 var(--_colors---orange);
  outline: none;
}

.proposal-form .w-input:focus-visible,
.proposal-select:focus-visible,
.wizard-arrow:focus-visible,
.wizard-actions .btn-1:focus-visible,
.cf-option:has(input:focus-visible) {
  outline: 2px solid var(--_colors---orange);
  outline-offset: 2px;
}

.proposal-select:focus {
  border-color: var(--_colors---orange);
  outline: none;
}

.cf-label {
  display: block;
  font-family: var(--font-family--heading-font);
  color: var(--beige);
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 12px;
}

.cf-label .req {
  color: var(--_colors---orange);
  font-weight: 700;
}

.cf-hint {
  font-size: 12px;
  color: rgba(248, 230, 216, .55);
  margin-top: -6px;
  margin-bottom: 12px;
}

.proposal-form .w-input {
  color: var(--beige);
  caret-color: var(--beige);
  min-height: 44px;
}

.proposal-form .w-input::placeholder {
  color: rgba(248, 230, 216, .35);
}

.proposal-form textarea.text-field-4 {
  min-height: 140px;
  resize: vertical;
}

.proposal-select {
  width: 100%;
  background-color: transparent;
  border-style: solid;
  border-width: 0 0 .5px;
  border-color: black black var(--beige);
  color: var(--beige);
  border-radius: 0;
  height: 44px;
  font-family: var(--font-family--body-font);
  cursor: pointer;
}

.proposal-select option {
  color: var(--_colors---jet-dark);
}

.cf-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 24px;
}

.cf-option {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: var(--beige);
  font-size: 15px;
  line-height: 1.4;
}

.cf-option input[type="checkbox"],
.cf-option input[type="radio"] {
  accent-color: var(--_colors---orange);
  width: 17px;
  height: 17px;
  flex: none;
}

.form-alert {
  border: 1px solid rgba(252, 97, 72, .85);
  background: rgba(252, 97, 72, .1);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 20px;
}

/* El texto iba en #ffcec4 sobre un naranja al 8% sobre la tarjeta: un
   #ffcec4 sobre #ffede7 da 1.28:1. El aviso que explica por qué el paso no
   avanza era, literalmente, ilegible — y combinado con que sale al principio
   del paso, con el usuario dos mil píxeles más abajo, pulsando siguiente y sin
   ver nada, el síntoma era "el porcentaje no avanza". El rojo profundo sobre el
   mismo fondo da 6.03:1. */
.alert-msg {
  margin: 0;
  color: #a8331f;
  font-size: 14px;
  line-height: 1.4;
}

.is-invalid.text-field-3,
.is-invalid.text-field-4,
.is-invalid.proposal-select {
  border-bottom-color: var(--_colors---orange) !important;
}

.cf-options.is-invalid {
  border: 1px solid rgba(252, 97, 72, .5);
  border-radius: 8px;
  padding: 10px;
}

.wizard-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.wizard-actions .text-link1 {
  font-family: Inconsolata, monospace;
  font-size: var(--font-sizes--button);
}

.wizard-actions .text-link1:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.wizard-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  background: var(--_colors---orange);
  border: 0;
  border-radius: 8px;
  color: var(--_colors---platinum);
  font-size: 24px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  transition: transform .2s ease, background-color .2s ease;
}

.wizard-arrow:hover {
  background: #e84f35;
  transform: translateY(-1px);
}

.wizard-arrow:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

.wizard-arrow[hidden] {
  display: none;
}

.wizard-actions #btn-submit {
  background: var(--_colors---orange);
  border-radius: 10px;
  color: var(--_colors---platinum);
  font-family: Inconsolata, monospace;
  font-size: var(--font-sizes--button);
  font-weight: 500;
  letter-spacing: .02em;
  padding: 14px 28px;
  box-shadow: 0 10px 24px rgba(252, 97, 72, .35);
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.wizard-actions #btn-submit:hover {
  background: #e84f35;
  box-shadow: 0 14px 28px rgba(252, 97, 72, .45);
  transform: translateY(-1px);
}

.wizard-actions #btn-submit:disabled {
  opacity: .7;
}

.wizard-actions #btn-submit .arrow-link.orange {
  background: transparent;
}

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.form-result {
  text-align: center;
  padding: 48px 16px;
  color: var(--beige);
}

.form-result-title {
  font-family: var(--font-family--heading-font);
  color: var(--beige);
  font-size: var(--font-sizes--h3);
  margin-bottom: 16px;
}

.form-result p {
  margin: 0 auto;
  max-width: 420px;
  color: rgba(248, 230, 216, .8);
}

@media screen and (max-width: 767px) {
  /* El logo se mueve a inset:16px y baja a 96px de ancho, o sea 24px de alto:
     16 + 24 + 8 = 48. Mismo breakpoint que usa para el logo
     css/proposal-page.css:145, a propósito. */
  .form-progress {
    top: 48px;
  }

  .cf-options {
    grid-template-columns: 1fr;
  }

  .wizard-actions {
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
}

.proposal-cta {
  border: 1px solid rgba(248, 230, 216, .18);
  border-radius: 16px;
  background: rgba(248, 230, 216, .04);
  padding: 32px;
}

.proposal-cta .form-step-title {
  font-size: var(--font-sizes--h3);
  margin-bottom: 16px;
}

.proposal-cta .p1 {
  color: rgba(248, 230, 216, .78);
  margin-bottom: 12px;
}

.proposal-cta .text-link1 {
  margin-top: 24px;
  font-family: Inconsolata, monospace;
  font-size: var(--font-sizes--button);
}

.proposal-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.proposal-modal[hidden] {
  display: none;
}

.proposal-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(4px);
}

.proposal-modal-dialog {
  position: relative;
  width: 100%;
  max-width: 660px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--_colors---jet-dark);
  border: 1px solid rgba(248, 230, 216, .15);
  border-radius: 18px;
  padding: 36px 40px;
}

.proposal-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(248, 230, 216, .25);
  border-radius: 50%;
  background: transparent;
  color: var(--beige);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.proposal-modal-close:hover {
  background: rgba(248, 230, 216, .1);
}

.proposal-modal-header {
  margin-bottom: 26px;
  padding-right: 44px;
}

.proposal-modal-header .form-step-title {
  font-size: var(--font-sizes--h3);
  margin-bottom: 10px;
}

.proposal-modal-subtitle {
  margin: 0;
  color: rgba(248, 230, 216, .75);
  font-size: 15px;
}

body.proposal-modal-open {
  overflow: hidden;
}

.nav-trigger {
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .25);
  background: transparent;
  padding: .8rem 0 .5rem;
  color: #eee;
  opacity: .5;
  font-family: var(--font-family--heading-font);
  font-size: 1.5rem;
  font-style: italic;
  text-align: left;
  cursor: pointer;
  transition: opacity .3s ease, color .3s ease;
}

.nav-trigger:hover {
  opacity: 1;
  color: #fff;
}

.footer-trigger {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--orange-2);
  display: inline-block;
  font-weight: var(--font-weight--normal);
  opacity: .68;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: opacity .3s ease-in-out, color .3s ease-in-out;
}

.footer-trigger:hover {
  opacity: 1;
  color: #fff;
}

@media screen and (max-width: 479px) {
  .proposal-modal {
    align-items: flex-end;
    padding: 12px;
  }

  .proposal-modal-dialog {
    max-height: 92vh;
    padding: 28px 20px;
  }
}

/* ── Text-link buttons (Conversemos style) ─────────────
   Converts the site's solid .btn-1 CTAs into uppercase
   text-links with the orange arrow. Scoped to button/input
   elements so existing <a> text-links are unaffected. */
button.text-link1,
input[type="submit"].text-link1 {
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
}

button.text-link1:hover,
input[type="submit"].text-link1:hover {
  background: none;
}

.text-link1.form {
  margin-top: 15px;
}

/* Login submit converted to a text-link (acceso-cliente) */
button.login-submit.text-link1 {
  width: auto;
  letter-spacing: normal;
}

button.login-submit.text-link1:hover {
  background-color: transparent !important;
}