/* 2. Aplicamos el cursor al body */
body {
    
 
  background-image: url('img/fondo.jpg');

  /* Centra la imagen horizontal y verticalmente */
  background-position: center center;

  /* Evita que la imagen se repita como mosaico */
  background-repeat: no-repeat;

  /* Mantiene la imagen fija en el viewport (pantalla) al hacer scroll */
 background-size: 100% auto;
 background-attachment: scroll;

  /* Escala la imagen para que cubra todo el contenedor (toda la pantalla) */
  background-size: cover;
  
  /* Color de respaldo por si la imagen no carga */
  background-color: #333;

    cursor: url('img/red.png'), auto;
    background-color: #f4f4f4;

    justify-content: center;
    align-items: center;
}
.header {
    text-align: center;
    margin-bottom: 20px;
    font-family: "kuhlman-vf", sans-serif;
    font-variation-settings: "SEED" 0, "wdth" 108;
}
/* 3. Estilo extra para el contenido */

.recompensa {
   /* position: absolute;*/
    top: 20px;
    right: 20px;
}

.imagenes {

    margin-top: 50px;
}
.overlay {
    position: fixed;
    inset: 0; /* equivale a top:0 left:0 width:100% height:100% */
    background: rgb(255, 255, 255);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 6vw;
    padding: 20px;
    
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

/* Cuando está activa */
.overlay:target {
    opacity: 1;
    pointer-events: auto;
}