header,header>*{position:relative}header{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;padding:100px 20px;background-size:cover;background-position:center;background-image:url('../images/sanblas_playa001.webp')}header::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.5)}header>*{z-index:1}.logo img{max-width:150px;height:auto;margin-bottom:20px}header h1{font-size:2.5em;margin:0}main{padding:20px}.boton-reserva{display:inline-block;padding:15px 30px;background-color:#007bff;color:#fff;text-decoration:none;border-radius:5px;font-weight:700;transition:background-color .3s}.boton-reserva:hover{background-color:#0056b3}

.formulario-con-fondo {
    background-image: url('../images/playadesanblas0001.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 1rem; /* Usando rem para mejor escalabilidad */
    color: white;
    position: relative;
    border-radius: 0.5rem; /* Opcional: añade bordes redondeados */
}

.formulario-con-fondo::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: -1;
    border-radius: 0.5rem; /* Opcional: bordes redondeados iguales al contenedor */
}

.formulario-con-fondo > * {
    position: relative;
    z-index: 1;
}

#formulario-reserva {
    background-color: transparent;
    position: relative;
    z-index: 2;
    padding: 1rem; /* Ajusta el padding del formulario */
}

/* Opcional: Ajusta el estilo de los labels y campos del formulario para mejor legibilidad */
#formulario-reserva .form-label {
    color: white;
}

#formulario-reserva .form-control {
    background-color: rgba(255, 255, 255, 0.8); /* Fondo semi-transparente para campos */
    border: none;
}

#formulario-reserva .btn-primary {
    background-color: #007bff; /* Color primario de Bootstrap */
    border: none;
}