/* === Responsive (max-width: 768px) === */
@media (max-width: 768px) {
  body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: -webkit-fill-available;
    overflow: hidden;
    margin: 0;
    background-attachment: fixed !important;
  }

  body:has(#section-email:not(.d-none)),
  body:has(#section-ty:not(.d-none)) {
    height: 100svh !important;
    min-height: 100svh !important;
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  body:has(#section-email:not(.d-none)) {
    display: flex;
    flex-direction: column;
    background-color: var(--color-bg);
  }

  body:has(#section-email:not(.d-none))::before {
    background-color: var(--color-bg);
    background-image: url("../img/bg-email-mobile.webp");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
  }

  body:has(#section-form:not(.d-none)) {
    display: block;
    min-height: 100svh;
    height: auto;
    overflow-y: auto;
    background-color: #f4f4f4;
  }

  body:has(#section-form:not(.d-none))::before {
    background-color: #f4f4f4;
    background-image: url("../img/bg-form-mobile.webp");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
  }

  body:has(#section-ty:not(.d-none)) {
    display: block !important;
    min-height: 100svh;
    height: 100svh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    background-color: var(--color-bg);
  }

  body:has(#section-ty:not(.d-none))::before {
    background-color: var(--color-bg);
    background-image: url("../img/bg-form-ty.webp");
    background-size: cover;
    background-position: right;
    background-repeat: no-repeat;
  }

  #section-ty {
    min-height: 100svh;
    height: auto !important;
    max-height: none;
    padding: 70px 0 calc(96px + env(safe-area-inset-bottom));
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom));
    background: transparent;
  }

  .section-email {
    display: block;
    flex: 1 1 auto;
    aspect-ratio: auto;
    width: 100%;
    min-height: 0 !important;
    height: auto !important;
    max-height: none;
    background-image: none;
    background-color: transparent;
    overflow: hidden;
  }

  .section-email-content {
    top: 46svh;
    left: 50%;
    right: auto;
    width: min(86vw, 361px);
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .section-email .name-img {
    margin-top: 4vh;
    margin-bottom: 0.45rem;
  }

  .section-email .email-form {
    max-width: none;
    margin: 10px auto;
  }

  .section-email .email-form-container {
    margin: 0 auto;
  }

  .section-email .form-control {
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    font-size: 12px;
    padding: 2px 6px;
    width: 100%;
    width: 284.739px;
    height: 35.913px;
    ;
  }

  .section-email label {
    color: var(--color-primary) !important;
    display: block;
    font-size: 14px;
    line-height: 1.1;
    margin-bottom: 3px;
  }

  .section-email .btn-registro {
    width: 120px;
    height: 32.92px;
    min-width: 0;
    margin-top: 8px;
    padding: 0;
    font-size: 15px;
    line-height: 19px;
  }

  body:has(#section-form:not(.d-none)) #section-email {
    display: none !important;
  }

  .section-form {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
    overflow: visible;
    background: transparent;
  }

  .section-form .container-fluid,
  .section-form .form-container,
  .section-form .row {
    display: block;
    min-height: 0;
    width: 100%;
    padding: 0;
    margin: 0;
  }

  .section-form .row>[class*="col-"] {
    width: 100%;
    max-width: none;
    padding: 0 15px;
  }

  .section-form .row>[class*="col-"]:first-child {
    display: flex;
    justify-content: center;
    padding-top: 70px;
  }

  .section-form .row>[class*="col-"]:last-child {
    display: flex;
    justify-content: center;
    padding-top: 26px;
  }

  .section-form figure {
    width: 100%;
    margin: 0;
    text-align: center;
  }

  .section-form img {
    width: min(86vw, 343px);
    height: 24.75px;
    aspect-ratio: 343/60;
    padding: 0;
    margin: 0 auto;
  }

  .section-form .toggle-password-btn {
    width: 32px;
    min-width: 32px;
    height: 32px;
    padding: 4px;
  }

  .section-form .toggle-password-btn img {
    width: 20px !important;
    max-width: 20px;
    height: 20px !important;
    aspect-ratio: 1 / 1;
    padding: 0;
    margin: 0;
  }

  .section-form .form-text {
    width: 337px;
    height: 93px;
    text-align: center;
    font-size: 30px;
    font-style: normal;
    font-weight: 400;
    line-height: 31px;
    margin-bottom: 32px !important;
  }

  .section-form #registration-form {
    width: min(86vw, 337px);
    padding: 0 0;
  }

  .section-form #registration-form>.mb-3 {
    margin-bottom: 8px !important;
  }

  .section-form #registration-form .form-control,
  .section-form #registration-form .form-select,
  .section-form .choices__inner,
  .section-form .phone-input-container {
    min-height: 37px;
    height: 37px;
    font-size: 16px;
  }

  .section-form #registration-form label,
  .section-form .choices__list--single .choices__item {
    font-size: 12px;
  }

  .section-form .phone-input-container {
    align-items: stretch;
  }

  .section-form #form-field-ladaSelect {
    width: 58px;
    min-width: 58px;
    font-size: 16px;
  }

  .email-form .form-control,
  .section-form input,
  .section-form select,
  .section-form textarea,
  .section-form .choices,
  .section-form .choices__input,
  .section-form .choices__input--cloned,
  .section-form .choices__list--single .choices__item,
  .section-form .choices__list--dropdown .choices__item,
  .section-form .choices__list[aria-expanded] .choices__item {
    font-size: 16px !important;
  }

  .section-form .elementor-field-type-html p {
    font-size: 8px !important;
    line-height: 1.35;
  }

  .section-form .elementor-field-type-html svg {
    width: 10px;
    height: 10px;
  }

  .section-form .form-check {
    min-height: 16px;
    margin-bottom: 7px;
    padding-left: 20px;
  }

  .section-form .form-check.mt-5 {
    margin-top: 14px !important;
  }

  .section-form .form-check-input {
    width: 12px;
    height: 12px;
    margin-left: -20px;
  }

  .section-form .form-check-label {
    font-size: 9px;
    line-height: 1.2;
  }

  .section-form .btn-registro {
    width: 120px;
    height: 32.92px;
    margin: 28px auto 0 !important;
    padding: 0;
    font-size: 15px;
    line-height: 32.92px;
  }

  footer {
    flex-shrink: 0;
    width: 100%;
    padding: 20px;
    background: transparent;
    border: 0;
    box-shadow: none;
    display: flex !important;
    position: relative !important;
    bottom: 0;
    justify-content: flex-start;
  }

  body:has(#section-email:not(.d-none)) footer {
    position: static !important;
    left: auto;
    bottom: auto;
    z-index: 1;
    padding-top: 8px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  body:has(#section-form:not(.d-none)) footer {
    position: static !important;
    left: auto;
    bottom: auto;
    z-index: 1;
    padding-top: 8px;
    padding-bottom: 24px;
  }

  body:has(#section-ty:not(.d-none)) footer {
    position: fixed !important;
    left: 0;
    bottom: 0;
    z-index: 5;
    pointer-events: none;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  body:has(#section-ty:not(.d-none)) footer a {
    pointer-events: auto;
  }

  .container-fluid {
    overflow: visible;
  }

  .section-ty img {
    width: 361px;
    height: auto;
    max-width: 361px;
  }

  .section-ty .ty-logo-img {
    aspect-ratio: 1767/229;
  }

  .section-ty .ty-tour-img {
    aspect-ratio: 1767/194;
  }

  #section-ty .container-fluid {
    min-height: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-top: 0;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  #section-ty .row,
  #section-ty .row>[class*="col-"],
  #section-ty .d-flex,
  #section-ty figure {
    margin: 0;
    padding: 0;
  }

  #section-ty .d-flex.flex-column.align-items-center {
    margin-top: 0;
    gap: 12px;
  }

  .v-mobil {
    display: block !important;
  }

  .v-desktop {
    display: none;
  }

  .btn-fondos {
    width: 300px;
    font-size: 14px;
  }

  .city-title {
    text-align: center;
    font-size: 20px;
  }

  .pais {
    margin-bottom: 60px;
  }

  .ty-page h2 {
    font-size: 50px;
  }

  .email-form {
    margin-bottom: 0;
  }

  .section-form label {
    color: var(--color-primary) !important;
    display: block;
    font-size: 14px;
    line-height: 1.1;
    margin-bottom: 3px;
  }

  .text-general-ty {
    width: 337px;
    height: 141px;
    text-align: center;
    font-size: 50px;
    font-style: normal;
    font-weight: 400;
    line-height: 47px;
    margin-top: 40px;
  }

  .btn-ty {
    width: 291px;
    height: 50px;
  }

  .cities-container {
    margin-top: 40px;
    gap: 40px;
  }

  .section-ty .text-description {
    max-width: min(86vw, 337px);
    min-width: 0;
    font-size: 28px;
    line-height: 32px;
  }

  .city-date {
    font-size: 13px;
    line-height: 17px;
    letter-spacing: 4px;
  }

  .sold-out-stamp--city-date {
    min-width: 98px;
    height: 24px;
    padding: 0 11px;
    font-size: 15px;
  }
}