@font-face {
  font-family: "Gotham Black";
  src: url(/static/fonts/Gotham-Black.otf) format("truetype");
  font-weight: bold;
  font-style: bold;
}

@font-face {
  font-family: "Gotham Medium";
  src: url(/static/fonts/Gotham-Medium.otf) format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Gotham Book";
  src: url(/static/fonts/Gotham-Book.otf) format("truetype");
  font-weight: normal;
  font-style: normal;
}

html {
  background-color: #FF0000;
}

body {
  width: 100%;
  height: auto;
  background-color: #FF0000;
}

#imagen1 {
  transition: transform 1s ease-in-out, opacity 1s ease-in-out; /* Transición de la transformación durante 1 segundo */
}

.contenedorTextoInfo {
  background-color: #0301033c;
  padding: 2%;
  border-radius: 30px;
}

.textoInfo {
  font-family: "Gotham Medium";
}

.textoInfo2 {
  color: white;
  font-family: "Gotham Black";
}

.textoInfo strong {
  color: #fd27f1;
}

.inputMail {
  font-family: "Gotham Medium";
  letter-spacing: 8px;
  color: #2d2b2b;
}


.subtitulo {
  color: white;
}

.textoInfo {
  color: white;
}

.inputMail {
  border-radius: 30px;
  border: none;
}

.boton {
  font-family: "Gotham Medium";
  border-radius: 30px;
  background: linear-gradient(to right, #1D9D22, #29FD2F);
  border: none;
  color: white;
  margin-bottom: 2%;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(255, 255, 255, 0.3); /* Agregamos el resplandor */
}
/* Centramos el boton  */
.center-vertical {
  display: flex; /* Usa un modelo de caja flexible */
  justify-content: center; /* Centra horizontalmente el contenido */
  align-items: center; /* Centra verticalmente el contenido */
  height: 100%; /* Establece la altura de la sección al 100% */
}
/* STYLES ALERTS MODALS SWAL */
.textModalAlert {
  color: #3e3838;
  font-family: "Gotham Black";
}
.subTextModalAlert {
  color: #fc0d1b;
  font-family: "Gotham Medium";
}
.subTextModalAlertConditions {
  color: #292526;
}
.botonModalAlertDownload {
  font-family: "Gotham Medium";
  border-radius: 30px;
  background: linear-gradient(to right, #fc0f26, #fd27f1);
  border: none;
  color: white;
  margin-bottom: 2%;
  margin: 4px 8px 4% 8px;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(255, 255, 255, 0.3);
  padding: 12px 32px 12px 32px; /* Aumentamos el padding horizontal */
  font-size: large;
  /* padding: 2px 8px; */ /* Agregamos el resplandor */
}
/* btton download iframe */
.botonDownloadIframe {
  font-family: "Gotham Medium";
  border-radius: 30px;
  background: linear-gradient(to right, #fc0f26, #fd27f1);
  border: none;
  color: white;
  margin-bottom: 2%;
  margin: 8px 4px 2px 4px;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(255, 255, 255, 0.3);
  padding: 4px 16px; /* Aumentamos el padding horizontal */
  font-size: medium;
}
.botonModalAlertOk {
  font-family: "Gotham Medium";
  border-radius: 30px;
  background: linear-gradient(to right, #fc0f26, #fd27f1);
  border: none;
  color: white;
  margin-bottom: 2%;
  margin: 4px 8px 4% 8px;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(255, 255, 255, 0.3);
  padding: 12px 32px 12px 32px; /* Aumentamos el padding horizontal */
  font-size: large;
  /* padding: 2px 16px;  */ /* Agregamos el resplandor */
}
.botonModalAlertClose {
  font-family: "Gotham Medium";
  border-radius: 30px;
  background: linear-gradient(to right, #d9d9d9, #3e3838);
  border: none;
  color: white;
  margin-bottom: 2%;
  margin: 4px 8px 4% 8px;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(255, 255, 255, 0.3);
  padding: 12px 32px 12px 32px; /* Aumentamos el padding horizontal */
  font-size: large;
  /* padding: 2px 16px;  */ /* Agregamos el resplandor */
}
.botonModalAlertOkErrorMail {
  font-family: "Gotham Medium";
  border-radius: 30px;
  background: linear-gradient(to right, #d9d9d9, #3e3838);
  border: none;
  color: white;
  margin-bottom: 2%;
  margin: 4px 8px 4% 8px;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(255, 255, 255, 0.3);
  padding: 10px 50px 10px 50px; /* Aumentamos el padding horizontal */
  font-size: large;
  /* padding: 2px 16px;  */ /* Agregamos el resplandor */
}
.custom-success-icon {
  font-size: 20px; /* Tamaño personalizado del icono */
  font-weight: bold; /* Ajusta el grosor de la fuente del icono */
}
.custom-warning-icon {
  font-size: 20px; /* Tamaño personalizado del icono */
  color: #fbc609;
}

.boton:hover {
  background: #128f16;
}

.botonEnviarWhatsapp {
  font-family: "Gotham Medium";
  border-radius: 30px;
  background: linear-gradient(to right, #073909, #06de0e);
  border: none;
  color: white;
  margin-bottom: 2%;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(255, 255, 255, 0.3); /* Agregamos el resplandor */
}
.botonEnviarWhatsapp:hover {
  background: linear-gradient(to right, #073909, #073909);
}

.botonMail {
  font-family: "Gotham Medium";
  border-radius: 30px;
  background: linear-gradient(to right, #fc0f26, #fd27f1);
  border: none;
  color: white;
  width: 100%;
  padding: 3%;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(255, 255, 255, 0.3); /* Agregamos el resplandor */
}
.botonMail:hover {
  background: linear-gradient(to right, #fc0f26, #fc0f26);
}

.botonWhatsapp {
  font-family: "Gotham Medium";
  border-radius: 30px;
  background: linear-gradient(to right, #073909, #06de0e);
  border: none;
  color: white;
  width: 100%;
  padding: 3%;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(255, 255, 255, 0.3); /* Agregamos el resplandor */
}
.botonWhatsapp:hover {
  background: linear-gradient(to right, #073909, #073909);
}

.textoBases {
  color: white;
  font-family: "Gotham Medium";
}

/* animacion de flecha */

@keyframes animacion {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(15px);
    opacity: 0;
  }
}

.flecha {
  position: relative;
  animation: animacion 1s infinite;
}

.raspaJuego {
  display: flex;
  flex-wrap: nowrap;
  background-size: 100%;
  background-repeat: no-repeat;
  width: 100%;
}

.seccionForm {
  display: flex;
  flex-wrap: nowrap;
  background-size: 100%;
  background-repeat: no-repeat;
  width: 100%;
  display: block;
}

/* imagenes carrousel */

.content-animation {
  overflow: hidden;
  white-space: nowrap;
}

.CarrouselContent {
  display: inline-block;
  animation: 15s slide infinite linear;
  padding: 0;
}

.back-button {
  background: none;
  color: white;
  border: none;
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 999;
}

#contBtnBack {
  margin-top: 0;
}

@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.terminos-condiciones {
  color: white;
  padding-left: 2%;
  width: 100%;
}

.terminos-condiciones a {
  margin-left: 4%;
}

.boton[disabled] {
  opacity: 0.5;
}

footer {
  padding-top: 2%;
  text-align: center;
  background: linear-gradient(to top, #FF0000, #05000246);
  font-family: "Gotham Book";
  color: rgb(181, 177, 177);
}

footer img {
  margin-left: 1%;
  padding-bottom: 2%;
}

footer img:hover {
  opacity: 0.5;
  scale: 1.2;
}

/* mobile */
@media only screen and (max-width: 767px) {
  
  
  .columna-vacia {
    height: 150px;
  }


  .inputMail {
    width: 100%;
    margin-top: 10%;
    padding: 2%;
  }

  .boton {
    margin-top: 5%;
    padding: 2% 10%;
  }

  .raspaJuego {
    background-image: url(images/fondoRaspaJuegoMobile.png);
    padding-bottom: 15%;
    padding-top: 10%;
    
  }

  .seccionForm {
    background-image: url(images/fondoFormSinMobile.png);
    
    padding-top: 30%;
    padding-bottom: 5%;
  }

  /* formulario */

  .formulario {
    background: white;
    border-radius: 30px;
    padding-top: 2%;
    padding-bottom: 2%;
    height: 60px;
    font-size: 0.7rem;
    margin-top: 5%;
    font-family: "Gotham Medium";
  }

  .formulario input {
    border: none;
    width: 80%;
    color: #918a8a;
    padding-left: 3%;
    padding-top: 2%;
    font-size: 1rem;
    background: none;
    letter-spacing: 5px;
  }

  .formulario img {
    margin-left: 6%;
    width: 15px;
  }

  .formulario button {
    font-size: 1rem;
    padding: 3% 8%;
    width: 100%;
    margin-top: 10%;
  }

  .botonWhatsapp {
    margin-top: 5%;
  }

  .logoRojo {
    margin-top: 15%;
    padding-bottom: 3%;
  }

  .logoRojo img {
    width: 80%;
  }

  .content-animation {
    margin-top: 5%;
  }

  .imgInfinita {
    max-width: 200px;
  }
  .relleno{
    height: 100px;
  }
  #seccionProhibida{
    padding-bottom: 20%;
  }
}

/* tablet */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  
  .textoInfo {
    font-size: 2rem;
  }

  

  .inputMail {
    width: 80%;
    margin-top: 10%;
    padding: 2%;
  }

  .boton {
    margin-top: 5%;
    padding: 2% 10%;
  }

  .raspaJuego {
    background-image: url(images/fondoRaspaJuegoTablet.png);
    padding-bottom: 10%;
    padding-top: 2%;
    height: auto;
  }

  .raspaJuego img {
    margin-top: 5%;
  }

  .raspaJuego .boton {
    font-size: 2rem;
  }

  .seccionForm {
    background-image: url(images/fondoFormSinTablet.png);
    padding-top: 20%;
  }

  #btnEnviarWhatsapp {
    margin-top: 4%;
  }

  /* formulario */

  .formulario {
    background: white;
    border-radius: 50px;
    padding-top: 2%;
    height: 90px;
    padding-bottom: 2%;
    margin-top: 10%;
    font-size: 1.5rem;
  }

  .formulario input {
    border: none;
    width: 80%;
    color: #918a8a;
    padding-left: 3%;
    padding-top: 2%;
    padding-bottom: 2%;
    background: none;
    letter-spacing: 10px;
    margin-bottom: 4%;
  }

  .formulario img {
    margin-left: 5%;
    width: 20px;
  }

  .formulario hr {
    color: #fd28fc;
    margin-left: 4%;
    margin-right: 4%;
    border: solid 1.6px;
  }

  .formulario button {
    display: block;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding: 2% 8%;
  }

  .seccionForm button {
    font-size: 1.5rem;
  }

  .logoRojo {
    margin-top: 20%;
    padding-bottom: 15%;
  }

  .logoRojo img {
    margin-top: 10%;
    width: 50%;
  }

  .content-animation {
    margin-top: 5%;
  }

  .imgInfinita {
    max-width: 300px;
  }
  #seccionProhibida{
    padding-bottom: 15%;
  }
}

/* desktop */
@media only screen and (min-width: 992px) {
  
  .titulo-raspa img {
    width: 30%;
  }


  .textoInfo {
    font-size: 1.5rem;
  }
  .inputMail {
    width: 50%;
    margin-top: 2%;
    padding: 1%;
  }
  
  .boton {
    padding: 1% 5%;
  }
  
  .raspaJuego {
    background-image: url(images/fondoRaspaJuegoDesktop.png);
    padding-top: 2%;
    padding-bottom: 1%;
    height: auto;
  }

  .contenedorRaspado {
    min-height: 50vh;
  }

  .seccionForm {
    background-image: url(images/fondoFormSinDesktop.png);
    padding-top: 8%;
    
  }

  .logoRojo {
    margin-top: 10%;
    padding-bottom: 10%;
  }

  .logoRojo img {
    width: 30%;
  }

  /* formulario */

  .formulario {
    background: white;
    border-radius: 50px;
    padding-top: 1.5%;
    position: relative;
    padding-bottom: 1.5%;
  }

  .formulario input {
    border: none;
    width: 80%;
    color: #918a8a;
    padding-left: 3%;
    padding-top: 2%;
    padding-bottom: 2%;
    background: none;
    letter-spacing: 5px;
  }

  .formulario img {
    margin-left: 5%;
    width: 20px;
  }

  .formulario button {
    position: absolute;
    left: 37%;
    top: 100%;
    padding: 2% 8%;
  }
  .botonEnviarWhatsapp {
    top: 120% !important;
  }

  .content-animation {
    margin-top: 2%;
  }

  .imgInfinita {
    max-width: 400px;
  }
  #seccionProhibida{
    padding-bottom: 5%;
  }
}

.imgRaspada {
  width: 100%;
}

.contenedorRaspado {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
  row-gap: 1em;
  /* border: solid 2px #FC0F26; */
  font-family: "Gotham Medium";
  color: white;
}

/* estilos raspada */

.scratch-card {
  position: relative;
  border: 4px solid #fd27f1;
  border-radius: 20px;
  padding: 12px;
  width: 320px;
  height: 320px;
  background-color: #d6009660;
}

.scratch-card-cover-container {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  border-radius: 4px;
  width: 100%;
  height: 100%;
  filter: url(#remove-black);
  transition: opacity 0.4s;
}

.scratch-card-cover-container.clear {
  opacity: 0;
}
.scratch-card-cover-container.hidden {
  display: none;
}
.scratch-card-canvas {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}
.scratch-card-canvas.hidden {
  opacity: 0;
}
.scratch-card-canvas:active {
  cursor: grabbing;
}
.scratch-card-cover-render {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  transition: background-color 0.2s;
}

.scratch-card-cover-render.hidden {
  display: none;
}

.scratch-card-cover {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #cfced6;
  background-image: url(/static/images/fondo-raspada.jpg);
  /* background-image: linear-gradient(to right, #cfced6, #e8dfe6, #efeef3,#e0dfe6,#cfced6); */
  /* background-color: #1d00db;
     */
  overflow: hidden;
  border-radius: 17px;
}
.scratch-card-cover::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(
    135deg,
    transparent 40%,
    rgba(255, 255, 255, 0) 0%,
    transparent 0%
  );
  background-position: bottom right;
  background-size: 300% 300%;
  background-repeat: no-repeat;
}

.scratch-card-cover.shine::before {
  animation: shine 0s infinite;
}

@keyframes shine {
  50% {
    background-position: 0% 0%;
  }
  100% {
    background-position: -50% -50%;
  }
}

.scratch-card-cover::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.1;
  filter: url("#noise");
}

.scratch-card-cover-background {
  width: 100%;
  height: 100%;
  fill: #555;
  opacity: 0.1;
}

.scratch-card-image {
  border-radius: 4px;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0, 0.16));
  user-select: none;
  will-change: transform;
}

.scratch-card-image.animate {
  animation: pop-out-in cubic-bezier(0.65, 1.35, 0.5, 1) 1s;
}

@keyframes pop-out-in {
  36% {
    transform: scale(1.125);
  }
  100% {
    transform: scale(1);
  }
}

.texto-premio {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}