@import url(https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap);

:root {
  --header-height: 5rem;
  --blue-french: rgb(0, 38, 84);
  --white: rgb(255, 255, 255);
  --red-french: rgb(237, 41, 57);
  --blue-strong: rgb(0, 25, 70);
  --blue-white: rgb(32, 66, 107);
  --gray: rgb(240, 209, 218);
  --green-wsp: rgb(0, 187, 45);
  --red-diff: rgb(233, 41, 70);
  --black_60: rgba(0, 0, 0, 0.6);
  --onyx: rgb(41, 47, 51);
  --cultured-1: rgb(245, 245, 245);
  --cultured-2: rgb(240, 240, 240);
  --body-color: var(--cultured-2);
  --gold: rgb(255, 191, 0);
  --title-font: "Poppins", sans-serif;
  --body-font: "Montserrat", sans-serif;
  --normal-font-size: 0.94rem;
  --fs-1: 6rem;
  --fs-2: 5rem;
  --fs-3: 4rem;
  --fs-4: 3rem;
  --fs-5: 2.2rem;
  --fs-6: 2rem;
  --fs-7: 1.8rem;
  --fs-8: 1.5rem;
  --fs-9: 1.4rem;
  --fs-10: 1.2rem;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;
  --fw-800: 800;
  --fw-900: 900;
  --font-regular: 400;
  --font-semi-bold: 600;
  --z-tooltip: 10;
  --z-fixed: 100
}

.reservas-formulario {
  width: 50% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  border: 1px solid var(--gray);
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
  border-radius: 8px
}

#datostraslado div {
  margin-bottom: 15px
}

#datostraslado label {
  flex: 1 1 100%;
  font-weight: var(--font-regular);
  color: var(--black_60);
  margin-bottom: 5px;
  font-size: var(--normal-font-size)
}

input[readonly] {
  cursor: not-allowed;
  opacity: .6;
  text-transform: uppercase
}

#datostraslado input[type=date],
#datostraslado input[type=email],
#datostraslado input[type=number],
#datostraslado input[type=text],
.mob-phone {
  flex: 1 1 48%;
  padding: 10px;
  border: 1px solid var(--gray);
  border-radius: 4px;
  font-size: .9rem;
  margin-bottom: 10px
}

#datostraslado input[type=checkbox] {
  width: auto
}

.btn-form-contact {
  width: 100%;
  padding: 10px;
  font-size: 1rem;
  background-color: var(--blue-french);
  color: var(--white);
  border: none;
  border-radius: 4px;
  cursor: pointer
}

.btn-form-contact:hover {
  background-color: var(--blue-strong);
  color: #fff
}

#datostraslado textarea {
  width: 100%;
  padding: 10px;
  border-radius: 4px;
  font-size: .9rem;
  margin-bottom: 10px
}

.f-row {
  font-size: .8rem
}

.f-row input[type=checkbox] {
  margin-right: 10px
}

@media (max-width:768px) {
  .reservas-formulario {
    width: 90% !important
  }

  #datostraslado div {
    flex-direction: column
  }

  #datostraslado input[type=date],
  #datostraslado input[type=email],
  #datostraslado input[type=number],
  #datostraslado input[type=text],
  .mob-phone {
    flex: 1 1 100%
  }
}

label {
  color: #000 !important
}

.popup-content h2 {
  margin-top: 0;
  font-size: 1.5em
}

@media (max-width:480px) {
  .reservas-formulario {
    width: 95% !important;
    border: none !important
  }

  .btn-form-contact {
    width: 100% !important
  }

  #datostraslado div {
    flex-direction: column
  }

  #datostraslado input[type=date],
  #datostraslado input[type=email],
  #datostraslado input[type=number],
  #datostraslado input[type=text],
  .mob-phone {
    width: 100%
  }
}