@font-face {
  font-family: "century";
  /* font-weight: 900; */
  src: url("../../assets/fonts/centurygothic.ttf");
}


/* Reset y fondo general */
html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background-color: #000000;
}

body {
  background: radial-gradient(circle, #006142 0%, #0b0700 100%) !important;
  /* background-image: url('../../../assets/images/fondo_negro.webp'); */
  background-repeat: repeat-y;
  background-size: contain;
  background-position: top;
  overflow-x: hidden;
}


img, video {
  -webkit-tap-highlight-color: transparent;
  outline: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Responsivo para web */
@media only screen and (min-width: 900px) {
  .fondo-web {
    display: block;
  }

  #container_Movil {
    display: none;
  }
}

/* Responsivo para móvil */
@media only screen and (max-width: 900px) {
  .fondo-web {
    display: none;

  }

  #container_Movil {
    display: block;
  }
}

.container {
  position: relative;
  width: 100%;
  height: auto;
  /* background: radial-gradient(circle, #006142 0%, #0b0700 100%) !important; */

  /* background-color: #000000; */
}



/* MODO WEB */

.fondo-web {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.container-qr {
  display: none;
}

#fireworks-bg{
  position: fixed;
  inset: 0;
  z-index: 5;            /* detrás de .container-qr (que ya tiene 1000) */
  pointer-events: none;  /* no bloquea clics */
}

/* El canvas que genera el script */
#fireworks-canvas{
  width: 100%;
  height: 100%;
  display: block;
}

/* Solo en versión web (>=900px) lo mostramos */
@media (max-width: 899px){
  #fireworks-bg{ display: none; }
}

@media screen and (min-width: 900px) {
  .container-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    gap: 14px;
    padding: 40px 30px;
    background: radial-gradient(circle, #00614293 0%, #0b0700 100%) !important;
    /* background-image: url('../../../assets/images/map.webp'); */
    /* background-repeat: repeat; */
    border-radius: 16px;
    z-index: 1000;
    width: 680px;
    max-width: 95vw;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
  }

  .container-qr h1 {
    font-family: century;
    color: #feffff;
    font-size: 1.5rem;
    margin: 8px 0 4px;
    text-align: center;
  }

  .container-qr button {
    font-family: century;
    background-color: #e0aa2b;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 10px 20px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: transform 0.15s ease;
    width: 50%;
  }

  .container-qr button:active {
    transform: scale(0.95);
  }

  .container-qr .logo_completo {
    width: 230%;
    max-width: 620px;
    height: auto;
  }



  .container-qr .qr {
    width: 130%;
    max-width: 180px;
    height: auto;
    margin-top: 8px;
  }


}







/* HEADER */

.container_0 {
  position: relative;
  width: 100%;
  height: auto;
  /* background-color: #00000000; */
}

.container_0 img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}


.fondo_dodge {
  mix-blend-mode: color-dodge;
  /* opacity: 0.5; */
}

.fondo_trama {
  mix-blend-mode: screen;
  /* opacity: 0.5; */
}
.fondo_softLight {
  mix-blend-mode: soft-light;
  z-index: 2;
  /* opacity: 0.8; */

}

.fondo_ligten {
  mix-blend-mode: lighten;
  /* opacity: 0.8; */

}

.fondo_multiply {
  mix-blend-mode: multiply;
  z-index: 2;
}

/* #circulo {
    position: absolute; 
    width: 97%;        
    height: 410px;
    top: -5px;          
    left: 4px;
    pointer-events: none; 
  } */







 /* FOOTER */


/* FOOTER */
/* .footer-trans {
    width: 100%;
    display: block;
    margin-top: 25px;
    margin-bottom: 20px;
} */


.fondo_footer {
  width: 100%;
  height: 200px;
  position: relative; 
  overflow: hidden;   
}
.footer-trans {
position: absolute;
width: 100%;
top:5%;
left: 0;
}

#footer_sombras {
/* z-index: 2; */
mix-blend-mode: multiply;
}

#footer_trama {
/* z-index: 3; */
mix-blend-mode: screen;
}

/* #footer_logos {
} */


/* Animación suave */
@keyframes fadeIn {
  from {
      opacity: 0;
  }

  to {
      opacity: 1;
  }
}




/* .animate_manita{
  opacity: 0;
} */

/* #screenOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  z-index: 9999;
  pointer-events: none;
} */