body {
    /* El gradiente va PRIMERO. rgba(0,0,0,0.5) es negro al 50% de transparencia */
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), 
        url("../fondos/ft4.jpg"); 
    
    background-attachment: fixed; /* Esto hace que el fondo no se mueva al hacer scroll */
    background-size: cover;       /* Hace que la imagen cubra toda la pantalla */
    color: Maroon;
    font-family: retrobank;
    box-sizing: border-box;
    margin: 0;
  }
   .sticker-personalizado1 {
    position: absolute; /* Esto permite moverlo libremente */
    top: 50px;          /* Distancia desde arriba */
    left: 100px;         /* Distancia desde la izquierda */
    width: 120px;       /* Ajusta el tamaño aquí */
    z-index: 100;       /* Asegura que esté por encima de todo */
    
    /* Si es un sticker de estilo pixel art: */
    image-rendering: pixelated; 
    
    /* OPCIONAL: Si quieres que flote de arriba a abajo suavemente */
    animation: flotarSticker 3s ease-in-out infinite;
}
  @font-face {
  font-family: "ROMANTIC";
  src: url("../tipografias/ROMANTIC.TTF") format("truetype")
}
@font-face {
    font-family: 'retrobank';
    src: url('../tipografias/retrobank.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 */
}