/* PASO 1: Definir el Contenedor y la Imagen de Fondo */
.productos {
    position: relative; /* CRUCIAL: Necesario para que el filtro se posicione correctamente */
    width: 100%;
    height: 1100px;
     /* Define la altura que deseas */
    /* Configuración de la imagen de fondo */
    background-size: cover; /* Asegura que la imagen cubra todo el contenedor */
    background-position: center;
    /* Centra el contenido (texto) dentro de la sección, si lo deseas */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: white; /* Hace que el texto dentro del contenedor sea blanco */
}

/* PASO 2: Crear la Capa de Filtro Oscuro (Overlay) */
.productos::before {
    content: ''; /* Obligatorio para que el pseudoelemento aparezca */
    position: absolute; /* Posiciona el filtro sobre el fondo */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Define el color negro con opacidad */
    background-color: rgba(0, 0, 0, 0.5); /* Negro puro (0,0,0) con 60% de opacidad (0.6) */
    
    z-index: 1; /* Coloca el filtro sobre la imagen de fondo (que está en el contenedor principal) */
}

/* PASO 3: Asegurar que el Contenido esté Encima del Filtro */
/* Aplicá esto a cualquier elemento DENTRO del contenedor que deba verse */
.productos h1{
    position: relative; /* CRUCIAL: Le permite respetar el z-index */
    z-index: 2; /* Mayor que el z-index del filtro (1). Asegura que el contenido quede arriba */
    margin-top: 120px;
}
.productos .productos-rifados{
    position: relative;
    z-index: 2;
    width: 100%;
    height: 500px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}
.productos .productos-rifados .rifas{
    width: 20%;
    height: 250px;
    background-color: red;
    text-align: left;
}
.btn-boletos{
    background-color: #ffc107;
    margin-top: 5px;
    text-align: center;
    width: 100%;
    height: 40px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 3px solid #000;
}
.btn-boletos a{
    color: #000;
    text-decoration: none;
    width: 100%;
    height: 100%;
}