/*
 * Responsive canónico del formulario · v115
 *
 * Cabecera, formulario y pie ocupan filas estables del viewport. La primera
 * pantalla puede ser más alta por sus cuatro campos y consentimientos; desde
 * la pregunta 2 hasta la confirmación, la caja conserva la misma altura.
 */

@media (max-width: 760px), (max-height: 680px) and (pointer: coarse) {
  :root {
    --mobile-title-slot: clamp(58px, 9.5dvh, 76px);
    --mobile-description-slot: clamp(34px, 5.4dvh, 44px);
    --mobile-progress-x: 16px;
    --mobile-progress-top: 16px;
    --mobile-progress-bottom: 11px;
    --mobile-form-radius: 20px;
    --mobile-panel-radius: 18px;
  }

  html,
  body {
    width: 100%;
    height: 100% !important;
    min-height: 100% !important;
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  body {
    min-height: 100vh !important;
    min-height: 100dvh !important;
  }

  .page {
    grid-template-rows: 48px minmax(0, 1fr) minmax(34px, auto) !important;
    align-content: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    padding:
      max(8px, env(safe-area-inset-top))
      max(10px, env(safe-area-inset-right))
      max(6px, env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left)) !important;
    overflow: hidden !important;
  }

  .topbar,
  .bottom-meta {
    width: min(100%, 560px) !important;
  }

  .topbar {
    grid-template-columns: minmax(44px, 1fr) auto minmax(44px, 1fr) !important;
    align-self: center !important;
    min-height: 48px !important;
  }

  .back-link {
    width: 44px !important;
    height: 44px !important;
  }

  .brand {
    width: clamp(128px, 37vw, 164px) !important;
  }

  .top-meta {
    max-width: 74px !important;
    white-space: normal !important;
    text-align: right !important;
    font-size: 7.5px !important;
    line-height: 1.25 !important;
  }

  .form-shell {
    align-self: center !important;
    justify-self: center !important;
    width: min(100%, 560px) !important;
    height: min(100%, 620px) !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 auto !important;
    overflow: visible !important;
  }

  body[data-background-step="1"] .form-shell {
    height: min(100%, 700px) !important;
  }

  .form-card,
  .submission-screen {
    grid-template-rows: auto minmax(0, 1fr) !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    border-radius: var(--mobile-form-radius) !important;
    background-clip: padding-box !important;
    overflow: hidden !important;
  }

  .form-card::before,
  .submission-screen::before {
    border-radius: inherit !important;
  }

  .form-progress-header,
  .submission-screen__meta {
    min-height: 27px !important;
    margin: var(--mobile-progress-top) var(--mobile-progress-x) 0 !important;
    padding: 0 0 var(--mobile-progress-bottom) !important;
    font-size: clamp(8px, 2.6vw, 10px) !important;
    line-height: 1.3 !important;
  }

  .form-progress-header .question-index,
  .form-progress-header .question-time {
    font-size: inherit !important;
    line-height: inherit !important;
  }

  .steps {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  .step,
  .step[data-step="10"] {
    grid-template-rows: var(--mobile-title-slot) minmax(var(--mobile-description-slot), auto) minmax(0, 1fr) !important;
    row-gap: 8px !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    padding: 14px 16px 16px !important;
    overflow: hidden !important;
  }

  .step:not(.is-active) {
    display: none !important;
  }

  .step.is-active {
    display: grid !important;
  }

  .step .question-title,
  .step[data-step="4"] .question-title,
  .step[data-step="5"] .question-title,
  .step[data-step="6"] .question-title,
  .step[data-step="7"] .question-title,
  .step[data-step="9"] .question-title,
  .step[data-step="10"] .question-title {
    grid-area: 1 / 1 !important;
    align-items: center !important;
    width: 100% !important;
    height: var(--mobile-title-slot) !important;
    min-height: 0 !important;
    max-height: var(--mobile-title-slot) !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: clamp(30px, 8.8vw, 38px) !important;
    line-height: 1 !important;
    display: flex !important;
    overflow: hidden !important;
    text-wrap: balance;
  }

  .step .question-title.is-title-compact {
    font-size: clamp(25px, 7.4vw, 33px) !important;
    line-height: 1.02 !important;
  }

  .step .question-title.is-title-tight {
    font-size: clamp(20px, 5.9vw, 27px) !important;
    line-height: 1.02 !important;
  }

  .question-title[tabindex="-1"]:focus {
    outline: none;
  }

  .step .question-description,
  .step--onboarding .question-description {
    grid-area: 2 / 1 !important;
    align-items: flex-start !important;
    width: 100% !important;
    height: auto !important;
    min-height: var(--mobile-description-slot) !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: normal !important;
    font-size: clamp(9px, 2.65vw, 11px) !important;
    line-height: 1.4 !important;
    display: block !important;
    overflow: visible !important;
  }

  .step .answer-block,
  .step[data-step="10"] .answer-block {
    --response-line-gap: 20px;
    grid-area: 3 / 1 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) auto auto !important;
    align-self: stretch !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 16px 16px 14px !important;
    overflow: hidden !important;
  }

  .answer-content,
  .step[data-step="10"] .answer-content,
  .answer-content--single-line {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: stretch !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 0 var(--response-line-gap) !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .answer-kicker {
    margin: 0 0 10px !important;
  }

  .answer-content .field-control-wrap {
    width: 100% !important;
    height: clamp(150px, 30dvh, 230px) !important;
    min-height: 0 !important;
    max-height: 230px !important;
  }

  .answer-content textarea,
  .answer-content--single-line input {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 10px 40px 18px 0 !important;
    font-size: clamp(22px, 6.4vw, 29px) !important;
    line-height: 1.2 !important;
  }

  .answer-actions,
  .step[data-step="10"] .answer-actions,
  .answer-actions.is-first-step {
    grid-column: 1 !important;
    grid-row: 2 !important;
    grid-template-columns: minmax(96px, .42fr) minmax(0, 1fr) !important;
    gap: 8px !important;
    position: static !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 10px 0 0 !important;
  }

  .answer-actions.is-first-step {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .answer-actions .button,
  .step--onboarding .answer-actions.is-first-step .button--red {
    min-height: 48px !important;
    padding-inline: 15px !important;
    font-size: 11px !important;
  }

  .step[data-step="9"] .submit-error--inline {
    grid-row: 3 !important;
    justify-self: center !important;
    width: min(100%, 34ch) !important;
    margin-top: 14px !important;
    text-align: center !important;
  }

  #signup-form .step--onboarding {
    grid-template-rows: var(--mobile-title-slot) minmax(var(--mobile-description-slot), auto) auto !important;
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body[data-background-step="1"] .steps {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    scrollbar-width: none;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }

  body[data-background-step="1"] .steps::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  #signup-form .step--onboarding .answer-block {
    grid-template-rows: auto auto !important;
    gap: 18px !important;
    height: auto !important;
    min-height: max-content !important;
    max-height: none !important;
    padding: 17px 16px 15px !important;
    border-radius: var(--mobile-panel-radius) !important;
    background-clip: padding-box !important;
    overflow: visible !important;
  }

  #signup-form .step--onboarding .answer-content--onboarding {
    grid-template-rows: auto auto !important;
    align-content: start !important;
    gap: 20px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  #signup-form .step--onboarding .onboarding-contact-grid {
    align-content: start !important;
    height: auto !important;
    min-height: 0 !important;
    row-gap: 22px !important;
  }

  #signup-form .step--onboarding .onboarding-contact-grid .contact-field,
  #signup-form .step--onboarding .onboarding-contact-grid .contact-field + .contact-field {
    --contact-control-height: 40px;
    --contact-control-padding-bottom: 8px;
    --contact-control-font-size: clamp(18px, 5.3vw, 22px);
  }

  #signup-form .step--onboarding .contact-field .field-control-wrap,
  #signup-form .step--onboarding .contact-field .field-control-wrap:not(:focus-within),
  #signup-form .step--onboarding .contact-field .field-control-wrap:focus-within {
    height: var(--contact-control-height) !important;
    min-height: var(--contact-control-height) !important;
    max-height: var(--contact-control-height) !important;
  }

  #signup-form .step--onboarding .onboarding-contact-grid .answer-kicker {
    margin-bottom: 8px !important;
    font-size: 9px !important;
  }

  #signup-form .step--onboarding .onboarding-privacy {
    display: grid !important;
    gap: 4px !important;
  }

  #signup-form .step--onboarding .bases-acceptance {
    min-height: 30px !important;
    padding-block: 5px !important;
  }

  #signup-form .step--onboarding .bases-acceptance__text,
  #signup-form .step--onboarding .bases-acceptance__text a,
  #signup-form .step--onboarding .privacy-options__text {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  #signup-form .step--onboarding .consent-quick {
    grid-template-columns: 17px minmax(0, 1fr) !important;
    gap: 0 7px !important;
    margin-top: 0 !important;
  }

  #signup-form .step--onboarding .consent-quick__line {
    align-items: baseline !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 3px !important;
    min-width: 0 !important;
    font-size: clamp(8.5px, 2.45vw, 11px) !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
  }

  #signup-form .step--onboarding .consent-quick__sentence,
  #signup-form .step--onboarding .consent-quick .consent-settings-button {
    margin: 0 !important;
    padding: 0 !important;
    font: inherit !important;
    line-height: inherit !important;
    white-space: nowrap !important;
  }

  #signup-form .step--onboarding .onboarding-privacy-note {
    margin: 2px 0 0 !important;
    padding: 0 4px 2px !important;
    font-size: 9px !important;
    line-height: 1.45 !important;
  }

  #signup-form .consent-dialog {
    width: min(560px, calc(100vw - 20px)) !important;
    max-height: calc(100dvh - 20px) !important;
    border-radius: var(--mobile-form-radius) !important;
  }

  #signup-form .consent-dialog__panel {
    max-height: calc(100dvh - 20px) !important;
    padding: 30px 20px max(24px, env(safe-area-inset-bottom)) !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  #signup-form .consent-dialog .privacy-options__content label {
    min-height: 52px;
    padding: 14px 2px;
  }

  #signup-form .submission-screen__success {
    grid-template-rows: minmax(0, 1fr) auto !important;
    min-height: 0 !important;
    gap: 10px !important;
    padding: 10px 16px 14px !important;
    overflow: hidden !important;
  }

  #signup-form .submission-screen__message {
    align-self: stretch !important;
    align-content: center !important;
    align-content: safe center !important;
    justify-self: stretch !important;
    justify-items: center !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 6px 0 10px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }

  #signup-form .submission-screen__message::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  #signup-form .submission-screen__thanks span {
    font-size: clamp(31px, 10.2vw, 44px) !important;
    line-height: .96 !important;
    letter-spacing: -.05em !important;
    overflow-wrap: break-word !important;
  }

  #signup-form .submission-screen__received {
    margin-top: 11px !important;
    font-size: clamp(18px, 5.4vw, 23px) !important;
    line-height: 1.06 !important;
  }

  #signup-form .submission-screen__success .submission-screen__details {
    width: min(100%, 480px) !important;
    margin-top: 13px !important;
  }

  #signup-form .submission-screen__success .submission-screen__details > div {
    padding: 12px 13px !important;
    border-radius: 14px !important;
    background-clip: padding-box !important;
  }

  #signup-form .submission-screen__success .submission-screen__confirmation {
    max-width: 48ch !important;
    font-size: clamp(10.5px, 3vw, 11.75px) !important;
    line-height: 1.4 !important;
  }

  #signup-form .submission-screen__success .submission-screen__confirmation + .submission-screen__confirmation {
    margin-top: 7px !important;
  }

  #signup-form .submission-screen__home {
    justify-self: center !important;
    width: min(100%, 240px) !important;
    min-height: 44px !important;
    margin: 0 !important;
    flex: 0 0 auto;
  }

  .bottom-meta {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-self: end !important;
    justify-self: center !important;
    align-content: end !important;
    justify-items: center !important;
    gap: 2px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 4px max(1px, env(safe-area-inset-bottom)) !important;
    font-size: 8px !important;
    line-height: 1.25 !important;
    text-align: center !important;
    display: grid !important;
  }

  .bottom-meta__event,
  .bottom-meta__legal-block {
    justify-content: center !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }

  .bottom-meta__separator {
    display: none !important;
  }
}

@media (max-width: 560px) {
  #signup-form .step--onboarding .onboarding-contact-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: none !important;
    column-gap: 0 !important;
  }

  #signup-form .step--onboarding .onboarding-contact-grid::after {
    display: none !important;
  }
}

@media (max-width: 350px) {
  .step,
  .step[data-step="10"] {
    padding-inline: 12px !important;
  }

  .step .answer-block,
  .step[data-step="10"] .answer-block,
  #signup-form .step--onboarding .answer-block {
    padding-inline: 10px !important;
  }

  #signup-form .step--onboarding .consent-quick__line {
    font-size: 7.8px !important;
    letter-spacing: -.01em !important;
  }
}

@media (max-height: 650px) and (pointer: coarse) {
  :root {
    --mobile-title-slot: 52px;
    --mobile-description-slot: 31px;
    --mobile-progress-top: 12px;
    --mobile-progress-bottom: 8px;
  }

  .page {
    grid-template-rows: 44px minmax(0, 1fr) minmax(30px, auto) !important;
    gap: 6px !important;
    padding-top: max(5px, env(safe-area-inset-top)) !important;
    padding-bottom: max(3px, env(safe-area-inset-bottom)) !important;
  }

  .topbar {
    min-height: 44px !important;
  }

  .step,
  .step[data-step="10"] {
    row-gap: 5px !important;
    padding-top: 8px !important;
    padding-bottom: 10px !important;
  }

  .step .question-title,
  .step[data-step="4"] .question-title,
  .step[data-step="5"] .question-title,
  .step[data-step="6"] .question-title,
  .step[data-step="7"] .question-title,
  .step[data-step="9"] .question-title,
  .step[data-step="10"] .question-title {
    font-size: clamp(26px, 7.4vw, 32px) !important;
  }

  .step .question-title.is-title-compact,
  .step .question-title.is-title-tight {
    font-size: clamp(22px, 6.5vw, 28px) !important;
  }

  .step:not(.step--onboarding) .answer-block,
  .step[data-step="10"] .answer-block {
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  .step:not(.step--onboarding) .answer-block,
  .step[data-step="10"] .answer-block {
    padding-top: 11px !important;
    padding-bottom: 10px !important;
  }

  .answer-actions .button,
  .step--onboarding .answer-actions.is-first-step .button--red {
    min-height: 42px !important;
  }

  #signup-form .submission-screen__success {
    gap: 8px !important;
    padding: 7px 14px 10px !important;
  }

  #signup-form .submission-screen__message {
    padding: 2px 0 6px !important;
  }

  #signup-form .submission-screen__thanks span {
    font-size: clamp(28px, 8.8vw, 38px) !important;
  }

  #signup-form .submission-screen__received {
    margin-top: 8px !important;
    font-size: clamp(16px, 4.8vw, 20px) !important;
  }

  #signup-form .submission-screen__success .submission-screen__details {
    margin-top: 9px !important;
  }

  #signup-form .submission-screen__success .submission-screen__details > div {
    padding: 9px 11px !important;
  }

  #signup-form .submission-screen__success .submission-screen__confirmation {
    font-size: 9.75px !important;
    line-height: 1.36 !important;
  }

  #signup-form .submission-screen__home {
    min-height: 40px !important;
    font-size: 9.5px !important;
  }

  .bottom-meta {
    min-height: 30px !important;
    font-size: 7.5px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
}