@font-face {
  font-family: "Montserrat";
  font-size: 400;
  src: url("./assets/fonts/Montserrat-Regular.otf");
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  font-size: 700;
  src: url("./assets/fonts/Montserrat-Bold.otf");
  font-display: swap;
}

@font-face {
  font-family: "Museo Sans";
  font-size: 400;
  src: url("./assets/fonts/Museo-Sans.otf");
  font-display: swap;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: "Montserrat", sans-serif;
  /* background-image: url("assets/img/bg.jpg");
  background-size: cover;
  background-position: center; */
  background-color: #005cb9;
}

#form-container > img {
  max-width: 600px;
  margin-bottom: 1rem;
}

header {
  text-align: center;
}

header .banner {
  width: 100%;
}

.banner-desk {
  width: 100%;
  max-width: 100%;
  margin-top: 0;
  display: block;
}

.banner-desk img {
  width: 100%;
  height: auto;
  display: block;
}

main {
  min-height: 100dvh;
}

.content {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
  padding-top: 20px;
}

/* Estilos Formulario trustarc */
#form-container {
  background: transparent;
  color: white;
  padding: 25px;
  margin: 20px auto;
  border-radius: 30px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Colores de texto para el formulario Trustarc */
.ta-upm h1,
.ta-upm h2,
.ta-upm h3,
.ta-upm h4,
.ta-upm h5,
.ta-upm h6,
.ta-upm p,
.ta-upm span,
.ta-upm div,
.ta-upm label {
  color: #005cb9 !important;
}

/* Asegurar que todos los textos del formulario tengan el color azul */
.ta-upm * {
  color: #005cb9 !important;
}
/* Form Scrip */

#trusarchform {
  width: 100%;
}

.eEJWPz {
  display: none !important;
}

.fHUQtx.fHUQtx.fHUQtx .ta-upm-select div,
.css-1uccc91-singleValue {
  color: #000 !important;
}

.hQhHpX .react-datepicker-wrapper .react-datepicker__input-container input,
.hQhHpX .react-datepicker-wrapper .react-datepicker__input-container input {
  background: #fff !important;
}

#ta-upm-form-3114c92b-717c-4d56-8cf8-802ed65aa984- div:last-child > span {
  width: 100%;
}

#ta-upm-form-3114c92b-717c-4d56-8cf8-802ed65aa984- div:last-child > span > svg {
  width: 100%;
}

.fJdnBK {
  color: #fff !important;
}

.kdNmxo {
  background-color: transparent !important;
}

.ta-upm-modal-content input {
  color: #000 !important;
}

.hIuUA-d {
  padding: 15px 0px !important;
}

.gfuSqG {
  color: #fff !important;
}

.jLoaHu.jLoaHu.jLoaHu {
  margin-left: 5px;
}

.ixuUbU {
  background-color: transparent !important;
}

.dJXsSm {
  /*width: 85%;
 margin-left: 10%;*/
}

.ta-upm img,
.ta-upm svg {
  color: white;
}

.jvCTkj {
  color: white;
}

.ta-upm-select__single-value.css-1uccc91-singleValue {
  color: white;
}

.kmlphP {
  color: white;
  background-color: transparent !important;
  border: 2px solid white !important;
  border-radius: 20px !important;
}

.css-2279gm-control {
  background-color: transparent !important;
  border: 2px solid white !important;
  border-radius: 20px 0 0 20px !important;
}

#b0d44b1f-7a27-45c1-8757-ddc74552f1d9 .css-2279gm-control,
#b6565032-c48a-4275-a255-9f06ee7ce220 .css-2279gm-control {
  border-radius: 20px !important;
}

.kydRHc.kydRHc.kydRHc .ta-upm-input {
  border-radius: 0 20px 20px 0 !important;
}

.syKsX {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.lpaEYv,
.lpaEYv a {
  color: white !important;
}

.dxzgSn.dxzgSn.dxzgSn,
.gGxQnP.gGxQnP.gGxQnP,
#fe4a9710-a4b9-4a47-b358-a2e076088615-SUCCESS-try-again {
  border-radius: 20px !important;
}

.ta-upm-label {
  text-transform: uppercase !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
}

#ta-upm-form-group-ff47dbfa-6159-43f9-bf58-79cc2256494d {
  display: none !important;
}
button#af85d0cb-f84b-4242-9bff-4182c0f5521b-submit {
  background: #ffffff;
  font-family: "Fixture Bold", sans-serif;
  text-transform: uppercase;
  font-size: 16px;
  border-radius: 50px;
  border-color: #000;
  border: 2px solid #000;
  padding: 10px 60px;
  color: #005a02;
}
.react-datepicker__input-container input {
  color: #000 !important;
}
.css-1j5f3vk-control {
  background-color: transparent !important;
}

.friends-text {
  width: 250px;
  height: auto;
}

footer {
  color: white;
  text-align: center;
  font-size: 12px;
  font-weight: 400;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

footer > img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  max-height: none;
}

.content .friends,
.bottles {
  position: absolute;
  bottom: 0;
  width: 200px;
}

.content .friends {
  left: 0;
  width: 65%;
  bottom: -60px;
  max-width: 400px;
}

.content .bottles {
  right: 68px;
  width: 25%;
}

.img-llamado {
  max-width: 500px;
}

.flotantes {
  position: absolute;
  right: 0;
}

.video-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* Relación 16:9 */
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

#juntemonos {
  background-image: url("assets/img/burbujas.png");
  background-size: cover;
  width: 100%;
}

.junte {
  max-width: 800px;
}

.hXqkLs.hXqkLs.hXqkLs, .hXqkLs {
  background-color: #008212 !important;
  background: #008212 !important;
  border:none !important;
}

.hacSDr.hacSDr.hacSDr {
  display: none !important;
}

.validate-container {
  align-items: center;
  background-color: #fff;
  background-image: url(https://www.cristal.cl/static/media/bg-validate.459d2733229a82158443.jpg);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  height: 100vh;
  justify-content: center;
  left: 0;
  padding: 0 1rem;
  position: absolute;
  top: 0;
  transition: all .35s ease-in-out;
  width: 100%;
  z-index: 50;
}

.validate-container.out {
  display: none;
}
.validate-container .validate-content {
  background: rgba(0, 0, 0, 0.65);
  padding: 2.5rem 1rem;
  border-radius: 25px;
}
.validate-container .validate-content .validate-content-title {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.validate-container .validate-content .validate-content-title h1 {
  color: #ffcb27;;
  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  text-transform: uppercase;
  text-align: center;
  line-height: 1.1;
  margin: 0;
}
.validate-container .validate-content .validate-content-title h2 {
  color: #ffcb27;;
  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  text-align: center;
  line-height: 1.1;
  margin-top: 0.75rem;
  margin-bottom: 0;
}
.validate-container .validate-content .validate-content-form .validate-form .validate-content-form-input {
  display: flex;
  align-items: center;
  justify-content: center;
}
.validate-container .validate-content .validate-content-form .validate-form .validate-content-form-input input {
  width: 70px;
  height: 50px;
  font-size: 36px;
  margin-right: 10px;
  text-align: center;
}
.validate-container .validate-content .validate-content-form .validate-form .validate-content-form-input input:last-child {
  width: 130px;
  margin-right: 0;
}
.validate-container .validate-content .validate-content-form .validate-form .validate-content-form-button {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.validate-container .validate-content .validate-content-form .validate-form .validate-content-form-button button {
  height: 45px;
  font-size: 18px;
  margin-right: 10px;
  text-transform: uppercase;
  padding: 0.35rem;
  width: 150px;
  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  color: #fff;
  background: unset;
  border: 2px solid #fff;
  padding: 0.5rem 0;
  display: block;
  text-align: center;
  text-decoration: none;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: 0.5px;
  cursor: pointer;
}
.validate-container .validate-content .validate-content-form .validate-form .validate-content-form-button button:last-child {
  margin-right: 0;
}

/* Estilos eliminados para las decoraciones */

@media screen and (min-width: 1024px) {
  .validate-container .validate-content {
    padding: 2rem;
 }
  .validate-container .validate-content .validate-content-title h1 {
    max-width: 75%;
 }
}


@media (max-width: 768px) {
  #form-container {
    width: 95%;
  }

  .fIuTG {
    padding: 0 !important;
  }

  .form-title {
    width: 100%;
  }

  .form-title h1 {
    font-size: 1.5rem;
  }

  .form-title h2 {
    font-size: 1rem;
  }

  .content .bottles {
    display: none;
  }

  .content .friends {
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
  }
  .img-llamado {
    max-width: 70%;
  }

  footer {
    margin: 0px 0 0 0;
  }
  .junte {
    max-width: 80%;
  }
  
  /* Banner en mobile - mantener responsive */
  .banner-desk {
    width: 100% !important;
    max-width: 100% !important;
  }
}