@font-face {
  font-family: "Gotham Black";
  src: url("../font/GothamSSm-Black.otf") format("opentype");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "Gotham BlackItalic";
  src: url("../font/GothamSSm-BlackItalic.otf") format("opentype");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "Gotham Bold";
  src: url("../font/GothamSSm-Bold.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Gotham BoldItalic";
  src: url("../font/GothamSSm-BoldItalic.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

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

@font-face {
  font-family: "Gotham BookItalic";
  src: url("../font/GothamSSm-BookItalic.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Gotham Light";
  src: url("../font/GothamSSm-Light.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Gotham LightItalic";
  src: url("../font/GothamSSm-LightItalic.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

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

@font-face {
  font-family: "Gotham MediumItalic";
  src: url("../font/GothamSSm-MediumItalic.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Gotham XLight";
  src: url("../font/GothamSSm-XLight.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Gotham XLightItalic";
  src: url("../font/GothamSSm-XLightItalic.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

@media (max-width: 767px) {
  .txt-title {
    font-size: 3rem !important; /* Tamaño de fuente para pantallas pequeñas */
  }
  .txt-title-light {
    font-size: 3rem !important; /* Tamaño de fuente para pantallas pequeñas */
  }
  .btn-base.btn-hbo {
    width: 15rem; /* Ancho de tu botón */
    height: 7.5rem; /* Alto de tu botón */
  }
  .btn-base.btn-legado {
    width: 15rem; /* Ancho de tu botón */
    height: 7.5rem; /* Alto de tu botón */
  }
  .btn-inicio {
    width: 20rem; /* Ancho de tu botón */
    height: 10rem; /* Alto de tu botón */
  }
}
@media (min-width: 1280px) {
  .txt-title {
    font-size: 8rem !important; /* Tamaño de fuente para pantallas grandes */
  }
    .txt-title-light {
    font-size: 8rem !important; /* Tamaño de fuente para pantallas grandes */
  }
  .btn-base.btn-hbo {
    width: 20rem; /* Ancho de tu botón */
    height: 10rem; /* Alto de tu botón */
  }
  .btn-base.btn-legado {
    width: 20rem; /* Ancho de tu botón */
    height: 10rem; /* Alto de tu botón */
  }
  .btn-inicio {
    width: 45rem; /* Ancho de tu botón */
    height: 25rem; /* Alto de tu botón */
  }
  .img-logo-discovery {
  width: 40%;
  height: 100%;
  object-fit: contain;
}

.img-logo-izzi {
  width: 40%;
  height: 100%;
  object-fit: contain;
}
}


@media (min-width: 1920px) {
  .txt-title {
    font-size: 8rem !important; /* Tamaño de fuente para pantallas grandes */
  }
    .txt-title-light {
    font-size: 8rem !important; /* Tamaño de fuente para pantallas grandes */
  }
  .btn-base.btn-hbo {
    width: 35rem; /* Ancho de tu botón */
    height: 20rem; /* Alto de tu botón */
  }
  .btn-base.btn-legado {
    width: 35rem; /* Ancho de tu botón */
    height: 20rem; /* Alto de tu botón */
  }
  .btn-inicio {
    width: 45rem; /* Ancho de tu botón */
    height: 25rem; /* Alto de tu botón */
  }
  .img-logo-discovery {
  width: 40%;
  height: 100%;
  object-fit: contain;
}

.img-logo-izzi {
  width: 40%;
  height: 100%;
  object-fit: contain;
}
}

@media (min-width: 2300px) {
  .txt-title {
    font-size: 8rem !important; /* Tamaño de fuente para pantallas grandes */
  }
    .txt-title-light {
    font-size: 8rem !important; /* Tamaño de fuente para pantallas grandes */
  }
  .btn-base.btn-hbo {
    width: 25rem; /* Ancho de tu botón */
    height: 15rem; /* Alto de tu botón */
  }
  .btn-base.btn-legado {
    width: 25rem; /* Ancho de tu botón */
    height: 15rem; /* Alto de tu botón */
  }
  .btn-inicio {
    width: 45rem; /* Ancho de tu botón */
    height: 25rem; /* Alto de tu botón */
  }
  .img-logo-discovery {
  width: 40%;
  height: 100%;
  object-fit: contain;
}

.img-logo-izzi {
  width: 40%;
  height: 100%;
  object-fit: contain;
}
}

body {
  font-family: "Gotham Black";
  height: 100vh;
  background-image: url("../Fondos/Fondo.png");
  background-size: cover;
}
.bg-main {
  background-image: url("../Fondos/Fondo.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.txt-title {
  font-family: "Gotham Black";
}
.txt-title-light {
  font-family: "Gotham Medium";
}

.txt-title,
.txt-title-light {
  font-size: 140%;
}

.text-btn-activation {
  font-family: "Gotham XLight";
  font-weight: 700;
  font-size: 2.5rem;
  text-align: center;
}
.text-btn-activation-hbo {
  font-family: "Gotham Medium";
  font-size: 2.5rem;
  line-height: 0.7;
  font-weight: 900;
}
.text-btn-activation-hbo span {
  font-family: "Gotham XLight";
}

.img-logo-discovery {
  width: 60%;
  height: 100%;
  object-fit: contain;
}

.img-logo-izzi {
  width: 60%;
  height: 100%;
  object-fit: contain;
}
.btn-base {
  width: 15rem; /* Ancho de tu botón */
  height: 7.5rem; /* Alto de tu botón */
  color: white; /* Color del texto sobre la imagen */
  font-size: 28px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: none; /* Quitamos el borde por defecto si es un <button> o si lo deseas */
  overflow: hidden; /* Asegura que la imagen no se desborde */
  background-size: contain; /* ¡Esta es la clave! Ajusta la imagen para cubrir todo el área */
  background-repeat: no-repeat; /* Evita que la imagen se repita si es más pequeña */
  background-position: center; /* Centra la imagen en el botón */
  margin: 2rem 2rem; /* Espacio entre botones */
}
.btn-base.btn-hbo {
  background-image: url("/src/Botones/boton_hbo.png");
}

.btn-base.btn-legado {
  background-image: url("/src/Botones/boton_legado.png");
}

.btn-base.btn-trailer {
  background-image: url("/src/Botones/boton_trailer.png");
}
.btn-base.btn-fotos {
  background-image: url("/src/Botones/btn_fotos.png");
}
.btn-base.btn-evento {
  background-image: url("/src/Botones/boton_participa.png");
}

.btn-inicio {
  margin-top: 2rem;
  background-image: url("/src/Botones/boton_nicio.png");
  width: 20rem;
  height: 10rem;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}

.btn-hbo:hover,
.btn-legado:hover,
.btn-trailer:hover,
.btn-fotos:hover,
.btn-evento:hover,
.btn-inicio:hover {
  transform: translateY(-1.5rem);
  transform: translateX(1.5rem);
  transform: translateX(1.5rem);
  transition: transform 0.3s ease-in-out; /* Añade una transición suave al hover */

}

.btn-hbo:hover,
.btn-legado:hover,
.btn-trailer:hover,
.btn-fotos:hover,
.btn-evento:hover,
.btn-inicio:hover {
  transform: translateY(1.5rem);
  transform: translateX(1.5rem);

}
/* 
Activación
.video-container {
  padding-top: 5rem;
  width: 40rem;
  height: 80rem; 
  border-radius: 8px;
  overflow: hidden;
} */

video {
  width: 100%; /* El video ocupa todo el ancho de su contenedor */
  height: auto; /* Mantiene la relación de aspecto */
  display: block; /* Elimina espacio extra debajo del video */
}

#qr-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 40px;
  text-align: center;
  background-image: url("src/Fondos/Fondo.png");
  overflow: hidden;
  margin-top: 10rem;
}

footer {
  /* position: absolute; */
  bottom: 0;
  width: 100%;
  height: 10rem;
  color: white;
  display: flex;
}
.formulario{
  
}