body {
    /* Combinamos un color negro semi-transparente (0.5 de opacidad) con la imagen */
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
        url("../fondos/777.jpg");
    
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    color: white;
    font-family: cairo;
    box-sizing: border-box;
    margin: 0;
    padding: 40px;
    font-size: 22px;
    padding-left: 60px; /* Le da espacio a la cinta para que no pise el header ni el main */
}
   .sticker-dados {
    position: absolute; /* Esto permite moverlo libremente */
    top: 50px;          /* Distancia desde arriba */
    left: 170px;         /* Distancia desde la izquierda */
    width: 140px;       /* Ajusta el tamaño aquí */
    z-index: 100;       /* Asegura que esté por encima de todo */
}
  .sticker-foco {
    position: absolute; /* Esto permite moverlo libremente */
    top: 0px;          /* Distancia desde arriba */
    left: 1300px;         /* Distancia desde la izquierda */
    width: 67px;       /* Ajusta el tamaño aquí */
    z-index: 100;       /* Asegura que esté por encima de todo */
}
.sticker-dyd {
    position: absolute; /* Esto permite moverlo libremente */
    top: 620px;          /* Distancia desde arriba */
    left: 1300px;         /* Distancia desde la izquierda */
    width: 100px;       /* Ajusta el tamaño aquí */
    z-index: 100;       /* Asegura que esté por encima de todo */
}
.sticker-cueva {
    position: absolute; /* Esto permite moverlo libremente */
    top: 640px;          /* Distancia desde arriba */
    left: 560px;         /* Distancia desde la izquierda */
    width: 100px;       /* Ajusta el tamaño aquí */
    z-index: 100;       /* Asegura que esté por encima de todo */
}
/* 1. Contenedor principal fijo a la izquierda */
.cinta-vertical {
    position: fixed;
    top: 0;
    left: 0;
    width: 45px;                 /* Ancho de la cinta */
    height: 100vh;               /* Ocupa el 100% del alto de la pantalla */
    background-color: rgba(20, 20, 20, 0.85); /* Fondo oscuro semitransparente */
    border-right: 2px solid crimson;           /* Borde decorativo que combina con tu estilo */
    overflow: hidden;            /* Esconde lo que se sale del área visible */
    z-index: 90;                 /* Queda por encima del fondo pero bajo el sticker si es necesario */
}

/* 2. Contenedor del texto/cadena en movimiento */
.cinta-contenido {
    display: flex;
    flex-direction: column;      /* Alinea las cadenas en vertical */
    white-space: nowrap;
    animation: moverCinta 8s linear infinite; /* Animación continua */
}

/* 3. Estilo de los elementos/números */
.cinta-contenido span {
    writing-mode: vertical-rl;  /* Gira el texto para que se lea verticalmente */
    text-orientation: upright;   /* Mantiene las letras/números orientados hacia arriba */
    font-family: 'robo', monospace;
    font-size: 14px;
    color: crimson;
    letter-spacing: 4px;
    padding: 20px 0;
    text-align: center;
    text-shadow: 0 0 6px rgba(220, 20, 60, 0.6); /* Efecto brillante/neon */
}

/* 4. Animación de cinta transportadora */
@keyframes moverCinta {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-50%); /* Desplaza la mitad para crear el loop infinito perfecto */
    }
}
@font-face {
    font-family: 'cairo';
    src: url('../tipografias/Cairopixel.ttf') format('truetype');
}
@font-face {
    font-family: 'ROMANTIC';
    src: url('../tipografias/romantic.ttf') format('truetype');
}
@font-face {
    font-family: 'chubby';
    src: url('../tipografias/Chubby Relief.ttf') format('truetype');
}
@font-face {
    font-family: 'robo';
    src: url('../tipografias/robo.ttf') format('truetype');
}
.div1{
  margin: 0 140px;
}
.caja-puntos-pro {
    position: relative; 
    background-color: #FFF5E0; 
    max-width: 900px; 
    margin: 0 auto 40px auto; 
    padding: 15px;
    border-radius: 8px; 
    display: flex; 
    justify-content: center;
    
    /* Añadimos esto para crear el espacio del borde */
    border: 2px solid transparent; 

    background-image: 
        linear-gradient(to right, DarkOrchid 50%, transparent 0%), 
        linear-gradient(to right, DarkOrchid 50%, transparent 0%), 
        linear-gradient(to bottom, DarkOrchid 50%, transparent 0%), 
        linear-gradient(to bottom, DarkOrchid 50%, transparent 0%);
    background-position: top, bottom, left, right;
    background-size: 6px 2px, 6px 2px, 2px 6px, 2px 6px;
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-origin: border-box;
    
    /* IMPORTANTE: Los 4 primeros padding-box son para los 4 gradientes, 
       el último content-box es para el color sólido crema */
    background-clip: padding-box, padding-box, padding-box, padding-box, border-box;
}
.texto-brillante {
    color: white; /* Color de la letra */
    /* text-shadow: [X] [Y] [Difuminado] [Color] */
    text-shadow: 0 0 8px rgba(153, 50, 204, 0.8); 
}
.lista {
  list-style: none;
  padding: 0;
  margin: 20px 0;
  text-align: left; /* Asegura que el texto se alinee a la izquierda para ver el icono */
  display: inline-block; /* Hace que la lista no ocupe todo el ancho y se centre mejor */
}

.lista li {
  position: relative;
  padding-left: 35px; /* Un poco más de espacio para la estrella */
  margin-bottom: 12px;
  font-size: 1.1em;
  display: block; /* Cambiamos flex por block para evitar conflictos con el absolute */
  transition: all 0.3s ease;
  min-height: 1.5em;
}

.lista li::before {
  content: "✧";
  position: absolute;
  left: 5px; /* Ajustamos la posición */
  top: 0;
  color: firebrick;
  font-weight: bold;
  font-size: 1.3em;
  text-shadow: 0 0 8px rgba(153, 50, 204, 0.6);
  line-height: 1; /* Centra la estrella con la primera línea de texto */
}