/* css/estilos.css */
body {
    /* 1. La imagen de fondo se mantiene igual, a todo color */
    background-image: url('../css/fondo.jpg');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    
    /* Importante para que el pseudo-elemento se posicione correctamente */
    position: relative; 
}

/* 2. Aquí creamos la capa de transparencia */
body::before {
    content: ''; /* Requerido para que el pseudo-elemento se muestre */
    position: fixed; /* Ocupa toda la pantalla, independientemente del scroll */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    /* Esta es la capa que da el efecto. Un blanco con 70% de transparencia. */
    /* Puedes ajustar el último valor (0.7) para más o menos transparencia. */
    background-color: rgba(255, 255, 255, 0.7);
    
    /* Coloca la capa detrás del contenido pero encima del fondo de la imagen */
    z-index: -1; 
}

/* 3. El contenedor principal ahora puede ser totalmente opaco para máxima legibilidad */
.main-container {
    background-color: #ffffff; /* Fondo blanco sólido para que el texto resalte */
    padding: 2.5rem;
    border-radius: 15px;
    box-shadow: 0 8px M30px rgba(0, 0, 0, 0.1);
    margin-top: 3rem;
    margin-bottom: 3rem;
}

/* --- El resto del CSS no necesita cambios --- */

.form-group {
    position: relative;
}

.sugerencias {
    position: absolute;
    background-color: white;
    border: 1px solid #ddd;
    border-top: none;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    box-sizing: border-box;
    border-radius: 0 0 .25rem .25rem;
}

.sugerencia-item {
    padding: 0.75rem 1.25rem;
    cursor: pointer;
}

.sugerencia-item:hover {
    background-color: #f0f0f0;
}