/* ============================================ */
/* FORMULARIO DE RESERVA                         */
/* ============================================ */

.reserva { background: var(--bg-principal); position: relative; }
.reserva::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--color-primario-oscuro), transparent); }

.reserva-contenedor { display: grid; grid-template-columns: 1fr 1fr; gap: var(--espacio-2xl); align-items: center; }

.reserva-info { padding-right: var(--espacio-xl); }
.reserva-info h3 { font-size: 1.5rem; margin-bottom: var(--espacio-md); }
.reserva-info p { margin-bottom: var(--espacio-lg); }

.reserva-beneficios { list-style: none; }
.reserva-beneficio { display: flex; align-items: center; gap: 12px; padding: 10px 0; color: var(--texto-secundario); font-size: 0.95rem; }
.reserva-beneficio-icon { color: var(--color-primario); font-size: 1.1rem; width: 24px; text-align: center; }

.reserva-formulario {
    background: var(--bg-tarjeta); border: var(--borde-vidrio); border-radius: var(--radio-lg);
    padding: var(--espacio-xl); position: relative; overflow: hidden;
}
.reserva-formulario::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gradiente-boton); }

.reserva-formulario .input-grupo { margin-bottom: var(--espacio-md); }
.reserva-formulario .grid-2-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--espacio-md); }

.reserva-formulario .btn { width: 100%; margin-top: var(--espacio-sm); }

.reserva-exito {
    display: none; text-align: center; padding: var(--espacio-xl);
}
.reserva-exito.activo { display: block; animation: scaleIn 0.5s ease; }
.reserva-exito-icon { font-size: 4rem; margin-bottom: var(--espacio-md); }
.reserva-exito h3 { color: #44ff88; margin-bottom: var(--espacio-sm); }

@media (max-width: 768px) {
    .reserva-contenedor { grid-template-columns: 1fr; }
    .reserva-info { padding-right: 0; margin-bottom: var(--espacio-lg); }
    .reserva-formulario .grid-2-form { grid-template-columns: 1fr; }
}