Forma de inscripcion

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulario de Registro - Scuderia Ferrari Club México</title>
    
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- FontAwesome Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Custom CSS -->
    <link rel="stylesheet" href="../assets/css/formulario-completo.css">
    
    <!-- Ferrari Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body class="bg-dark">
    <!-- Header Ferrari -->
    <header class="navbar navbar-expand-lg navbar-dark bg-ferrari-red sticky-top">
        <div class="container">
            <a class="navbar-brand d-flex align-items-center" href="#">
                <img src="../img/ferrari-logo.svg" alt="Ferrari" height="40" class="me-3">
                <div>
                    <div class="fw-bold">SCUDERIA FERRARI</div>
                    <small class="text-light opacity-75">Club México</small>
                </div>
            </a>
            
            <div class="navbar-nav ms-auto">
                <span class="navbar-text text-light">
                    <i class="fas fa-user-circle me-2"></i>
                    <span id="miembro-nombre-navbar">Cargando...</span>
                </span>
            </div>
        </div>
    </header>

    <!-- Alert Container -->
    <div id="alert-container" class="container mt-3" style="display: none;">
        <div id="alert-message" class="alert" role="alert"></div>
    </div>

    <!-- Loading Overlay -->
    <div id="loading-overlay" class="loading-overlay" style="display: none;">
        <div class="loading-content">
            <div class="loading-spinner"></div>
            <h5>Procesando formulario...</h5>
            <p class="mb-0">Por favor espere mientras guardamos su información.</p>
        </div>
    </div>

    <!-- Main Content -->
    <main class="formulario-container" id="main-content">
        <div class="container">
            <div class="formulario-card">
                <!-- Header del formulario -->
                <div class="formulario-header">
                    <h1><i class="fas fa-user-edit me-3"></i>Registro Completo</h1>
                    <p class="subtitle">Complete su información para acceder a experiencias VIP</p>
                </div>
                
                <!-- Información del miembro -->
                <div class="miembro-info">
                    <div class="card">
                        <div class="card-body">
                            <div class="row align-items-center">
                                <div class="col-md-6">
                                    <h6 class="mb-1">Bienvenido(a)</h6>
                                    <h5 class="mb-0" id="miembro-nombre">Cargando...</h5>
                                </div>
                                <div class="col-md-3 text-center">
                                    <span class="badge" id="miembro-tipo">Membresía</span>
                                </div>
                                <div class="col-md-3 text-end">
                                    <div id="info-pago" style="display: none;">
                                        <small class="text-muted">Pagado:</small><br>
                                        <strong id="monto-pagado" class="text-success">$0.00</strong>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Barra de progreso -->
                <div class="progress-container">
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                    <div class="progress-text" id="progress-text">Paso 1 de 5</div>
                </div>

        <!-- Form Container -->
        <form id="formulario-completo" novalidate>
            <input type="hidden" id="token" name="token" value="">
            <input type="hidden" id="registro_id" name="registro_id" value="">
            <input type="hidden" id="tipo_formulario" name="tipo_formulario" value="">

            <!-- PASO 1: Datos Personales -->
            <div id="step-1" class="form-step">
                <div class="step-title">
                    <span class="step-number">1</span>
                    Datos Personales
                </div>
                <p class="step-description">
                    Ingrese sus datos personales básicos. Esta información debe coincidir con sus documentos oficiales.
                </p>
                
                <div class="info-box">
                    <i class="fas fa-info-circle icon"></i>
                    <strong>Datos precargados:</strong> Los campos marcados ya contienen la información que proporcionó en el punto de venta. Puede modificarlos si es necesario.
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="nombre" class="form-label">Nombre(s) <span class="required">*</span></label>
                            <input type="text" class="form-control" id="nombre" name="nombre" required>
                            <div class="invalid-feedback"></div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="apellido_paterno" class="form-label">Apellido Paterno <span class="required">*</span></label>
                            <input type="text" class="form-control" id="apellido_paterno" name="apellido_paterno" required>
                            <div class="invalid-feedback"></div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="apellido_materno" class="form-label">Apellido Materno</label>
                            <input type="text" class="form-control" id="apellido_materno" name="apellido_materno">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="fecha_nacimiento" class="form-label">Fecha de Nacimiento <span class="required">*</span></label>
                            <input type="date" class="form-control" id="fecha_nacimiento" name="fecha_nacimiento" required>
                            <div class="invalid-feedback"></div>
                            <div class="form-text">
                                Edad calculada: <span id="edad-calculada" class="fw-bold text-ferrari">-</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="genero" class="form-label">Género <span class="required">*</span></label>
                            <select class="form-select" id="genero" name="genero" required>
                                <option value="">Seleccione...</option>
                                <option value="masculino">Masculino</option>
                                <option value="femenino">Femenino</option>
                                <option value="otro">Otro</option>
                                <option value="prefiero_no_decir">Prefiero no decir</option>
                            </select>
                            <div class="invalid-feedback"></div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group" id="estado-civil-field">
                            <label for="estado_civil" class="form-label">Estado Civil</label>
                            <select class="form-select" id="estado_civil" name="estado_civil">
                                <option value="">Seleccione...</option>
                                <option value="soltero">Soltero(a)</option>
                                <option value="casado">Casado(a)</option>
                                <option value="divorciado">Divorciado(a)</option>
                                <option value="viudo">Viudo(a)</option>
                                <option value="union_libre">Unión libre</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="nacionalidad" class="form-label">Nacionalidad <span class="required">*</span></label>
                            <select class="form-select" id="nacionalidad" name="nacionalidad" required>
                                <option value="">Seleccione...</option>
                                <option value="mexicana">Mexicana</option>
                                <option value="estadounidense">Estadounidense</option>
                                <option value="canadiense">Canadiense</option>
                                <option value="española">Española</option>
                                <option value="italiana">Italiana</option>
                                <option value="alemana">Alemana</option>
                                <option value="francesa">Francesa</option>
                                <option value="britanica">Británica</option>
                                <option value="argentina">Argentina</option>
                                <option value="brasileña">Brasileña</option>
                                <option value="otra">Otra</option>
                            </select>
                            <div class="invalid-feedback"></div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group" id="profesion-field">
                            <label for="profesion" class="form-label">Profesión/Ocupación</label>
                            <input type="text" class="form-control" id="profesion" name="profesion" placeholder="Ej: Ingeniero, Médico, Estudiante">
                        </div>
                    </div>
                </div>

                <hr class="section-divider">

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group" id="curp-field">
                            <label for="curp" class="form-label">CURP</label>
                            <input type="text" class="form-control" id="curp" name="curp" maxlength="18" style="text-transform: uppercase;">
                            <div class="invalid-feedback"></div>
                            <div class="form-text">18 caracteres. Ej: ABCD123456HDFMNR08</div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group" id="rfc-field">
                            <label for="rfc" class="form-label">RFC</label>
                            <input type="text" class="form-control" id="rfc" name="rfc" maxlength="13" style="text-transform: uppercase;">
                            <div class="invalid-feedback"></div>
                            <div class="form-text">13 caracteres para personas físicas</div>
                        </div>
                    </div>
                </div>

                <!-- Sección de tutor (solo para juniors) -->
                <div id="tutor-section" class="tutor-section" style="display: none;">
                    <h5><i class="fas fa-user-shield me-2"></i>Información del Tutor/Responsable Legal</h5>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="tutor_nombre" class="form-label">Nombre Completo del Tutor <span class="required">*</span></label>
                                <input type="text" class="form-control" id="tutor_nombre" name="tutor_nombre">
                                <div class="invalid-feedback"></div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="tutor_parentesco" class="form-label">Parentesco <span class="required">*</span></label>
                                <select class="form-select" id="tutor_parentesco" name="tutor_parentesco">
                                    <option value="">Seleccione...</option>
                                    <option value="padre">Padre</option>
                                    <option value="madre">Madre</option>
                                    <option value="abuelo">Abuelo</option>
                                    <option value="abuela">Abuela</option>
                                    <option value="tio">Tío</option>
                                    <option value="tia">Tía</option>
                                    <option value="tutor_legal">Tutor Legal</option>
                                    <option value="otro">Otro</option>
                                </select>
                                <div class="invalid-feedback"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="tutor_telefono" class="form-label">Teléfono del Tutor <span class="required">*</span></label>
                                <input type="tel" class="form-control" id="tutor_telefono" name="tutor_telefono">
                                <div class="invalid-feedback"></div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="tutor_email" class="form-label">Email del Tutor</label>
                                <input type="email" class="form-control" id="tutor_email" name="tutor_email">
                                <div class="invalid-feedback"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Navegación Paso 1 -->
            <div class="navigation-buttons">
                <div></div> <!-- Espacio vacío para el botón anterior -->
                <button type="button" class="btn btn-ferrari btn-siguiente">
                    Siguiente <i class="fas fa-arrow-right ms-2"></i>
                </button>
            </div>

            <!-- PASO 2: Contacto y Dirección -->
            <div id="step-2" class="form-step" style="display: none;">
                <div class="step-title">
                    <span class="step-number">2</span>
                    Contacto y Dirección
                </div>
                <p class="step-description">
                    Proporcione su información de contacto y dirección actual. Esta información será utilizada para comunicaciones oficiales del club.
                </p>

                <!-- Información de Contacto -->
                <h6 class="text-ferrari fw-bold mb-3">
                    <i class="fas fa-phone me-2"></i>
                    Información de Contacto
                </h6>
                
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="telefono_movil" class="form-label">Teléfono Móvil <span class="required">*</span></label>
                            <input type="tel" class="form-control" id="telefono_movil" name="telefono_movil" required placeholder="+52 (55) 1234-5678">
                            <div class="invalid-feedback"></div>
                            <div class="form-text">Incluya código de país y área</div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="telefono_casa" class="form-label">Teléfono de Casa</label>
                            <input type="tel" class="form-control" id="telefono_casa" name="telefono_casa" placeholder="(55) 1234-5678">
                            <div class="invalid-feedback"></div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="email_principal" class="form-label">Email Principal <span class="required">*</span></label>
                            <input type="email" class="form-control" id="email_principal" name="email_principal" required placeholder="ejemplo@correo.com">
                            <div class="invalid-feedback"></div>
                            <div class="form-text">Este será su email principal para comunicaciones</div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="email_secundario" class="form-label">Email Secundario</label>
                            <input type="email" class="form-control" id="email_secundario" name="email_secundario" placeholder="alterno@correo.com">
                            <div class="invalid-feedback"></div>
                        </div>
                    </div>
                </div>

                <hr class="section-divider">

                <!-- Dirección -->
                <h6 class="text-ferrari fw-bold mb-3">
                    <i class="fas fa-map-marker-alt me-2"></i>
                    Dirección de Residencia
                </h6>

                <div class="row">
                    <div class="col-md-8">
                        <div class="form-group">
                            <label for="calle" class="form-label">Calle y Número <span class="required">*</span></label>
                            <input type="text" class="form-control" id="calle" name="calle" required placeholder="Av. Reforma 123">
                            <div class="invalid-feedback"></div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="numero_interior" class="form-label">Número Interior</label>
                            <input type="text" class="form-control" id="numero_interior" name="numero_interior" placeholder="Depto. 4B">
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="colonia" class="form-label">Colonia/Fraccionamiento <span class="required">*</span></label>
                            <input type="text" class="form-control" id="colonia" name="colonia" required placeholder="Del Valle">
                            <div class="invalid-feedback"></div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="codigo_postal" class="form-label">Código Postal <span class="required">*</span></label>
                            <input type="text" class="form-control" id="codigo_postal" name="codigo_postal" required maxlength="5" placeholder="03100">
                            <div class="invalid-feedback"></div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="delegacion_municipio" class="form-label">Delegación/Municipio <span class="required">*</span></label>
                            <input type="text" class="form-control" id="delegacion_municipio" name="delegacion_municipio" required placeholder="Benito Juárez">
                            <div class="invalid-feedback"></div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="estado" class="form-label">Estado <span class="required">*</span></label>
                            <select class="form-select" id="estado" name="estado" required>
                                <option value="">Seleccione estado...</option>
                                <option value="aguascalientes">Aguascalientes</option>
                                <option value="baja_california">Baja California</option>
                                <option value="baja_california_sur">Baja California Sur</option>
                                <option value="campeche">Campeche</option>
                                <option value="chiapas">Chiapas</option>
                                <option value="chihuahua">Chihuahua</option>
                                <option value="ciudad_de_mexico">Ciudad de México</option>
                                <option value="coahuila">Coahuila</option>
                                <option value="colima">Colima</option>
                                <option value="durango">Durango</option>
                                <option value="estado_de_mexico">Estado de México</option>
                                <option value="guanajuato">Guanajuato</option>
                                <option value="guerrero">Guerrero</option>
                                <option value="hidalgo">Hidalgo</option>
                                <option value="jalisco">Jalisco</option>
                                <option value="michoacan">Michoacán</option>
                                <option value="morelos">Morelos</option>
                                <option value="nayarit">Nayarit</option>
                                <option value="nuevo_leon">Nuevo León</option>
                                <option value="oaxaca">Oaxaca</option>
                                <option value="puebla">Puebla</option>
                                <option value="queretaro">Querétaro</option>
                                <option value="quintana_roo">Quintana Roo</option>
                                <option value="san_luis_potosi">San Luis Potosí</option>
                                <option value="sinaloa">Sinaloa</option>
                                <option value="sonora">Sonora</option>
                                <option value="tabasco">Tabasco</option>
                                <option value="tamaulipas">Tamaulipas</option>
                                <option value="tlaxcala">Tlaxcala</option>
                                <option value="veracruz">Veracruz</option>
                                <option value="yucatan">Yucatán</option>
                                <option value="zacatecas">Zacatecas</option>
                            </select>
                            <div class="invalid-feedback"></div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="pais" class="form-label">País <span class="required">*</span></label>
                            <select class="form-select" id="pais" name="pais" required>
                                <option value="">Seleccione país...</option>
                                <option value="mexico" selected>México</option>
                                <option value="estados_unidos">Estados Unidos</option>
                                <option value="canada">Canadá</option>
                                <option value="otro">Otro</option>
                            </select>
                            <div class="invalid-feedback"></div>
                        </div>
                    </div>
                </div>

                <!-- Información de Emergencia -->
                <hr class="section-divider">
                
                <h6 class="text-ferrari fw-bold mb-3">
                    <i class="fas fa-user-shield me-2"></i>
                    Contacto de Emergencia
                </h6>

                <div class="info-box">
                    <i class="fas fa-info-circle icon"></i>
                    <strong>Importante:</strong> Proporcione un contacto de emergencia que no viva en su misma dirección.
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="contacto_emergencia_nombre" class="form-label">Nombre Completo <span class="required">*</span></label>
                            <input type="text" class="form-control" id="contacto_emergencia_nombre" name="contacto_emergencia_nombre" required placeholder="Ej: María González López">
                            <div class="invalid-feedback"></div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="contacto_emergencia_parentesco" class="form-label">Parentesco <span class="required">*</span></label>
                            <select class="form-select" id="contacto_emergencia_parentesco" name="contacto_emergencia_parentesco" required>
                                <option value="">Seleccione...</option>
                                <option value="esposo">Esposo(a)</option>
                                <option value="padre">Padre</option>
                                <option value="madre">Madre</option>
                                <option value="hermano">Hermano(a)</option>
                                <option value="hijo">Hijo(a)</option>
                                <option value="primo">Primo(a)</option>
                                <option value="tio">Tío(a)</option>
                                <option value="abuelo">Abuelo(a)</option>
                                <option value="amigo">Amigo(a)</option>
                                <option value="otro">Otro</option>
                            </select>
                            <div class="invalid-feedback"></div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="contacto_emergencia_telefono" class="form-label">Teléfono <span class="required">*</span></label>
                            <input type="tel" class="form-control" id="contacto_emergencia_telefono" name="contacto_emergencia_telefono" required placeholder="+52 (55) 1234-5678">
                            <div class="invalid-feedback"></div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="contacto_emergencia_email" class="form-label">Email</label>
                            <input type="email" class="form-control" id="contacto_emergencia_email" name="contacto_emergencia_email" placeholder="contacto@correo.com">
                            <div class="invalid-feedback"></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Navegación Paso 2 -->
            <div class="navigation-buttons">
                <button type="button" class="btn btn-outline-ferrari btn-anterior">
                    <i class="fas fa-arrow-left me-2"></i> Anterior
                </button>
                <button type="button" class="btn btn-ferrari btn-siguiente">
                    Siguiente <i class="fas fa-arrow-right ms-2"></i>
                </button>
            </div>

            <!-- PASO 3: Información Ferrari (Temporal) -->
            <div id="step-3" class="form-step" style="display: none;">
                <div class="step-title">
                    <span class="step-number">3</span>
                    Información Ferrari (En desarrollo)
                </div>
                <div class="step-description">Este paso está siendo desarrollado.</div>
                
                <div class="alert alert-info">
                    <i class="fas fa-info-circle me-2"></i>
                    Los pasos 3, 4 y 5 serán completados en la siguiente iteración del desarrollo.
                </div>
                
                <!-- Navegación Paso 3 -->
                <div class="navigation-buttons">
                    <button type="button" class="btn btn-outline-ferrari btn-anterior">
                        <i class="fas fa-arrow-left me-2"></i> Anterior
                    </button>
                    <button type="submit" class="btn btn-success">
                        <i class="fas fa-paper-plane me-2"></i> Enviar Formulario (Temporal)
                    </button>
                </div>
            </div>

        </form>
        
        <!-- Mensaje de éxito -->
        <div id="success-message" class="success-container" style="display: none;">
            <div class="success-icon">
                <i class="fas fa-check-circle"></i>
            </div>
            <h2 class="success-title">¡Formulario Enviado Exitosamente!</h2>
            <div class="success-message">
                <p>Gracias por completar tu registro en el Scuderia Ferrari Club México.</p>
                <p>Hemos recibido toda tu información. Nuestro equipo revisará tu solicitud y te contactaremos pronto.</p>
            </div>
            <div class="mt-4">
                <a href="index.php" class="btn btn-ferrari btn-lg">
                    <i class="fas fa-home me-2"></i>
                    Volver al Portal
                </a>
            </div>
        </div>
    </main>

    <!-- Bootstrap 5 JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <!-- Custom JavaScript -->
    <script src="../assets/js/formulario-completo.js"></script>
</body>
</html>
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="experiencia_automovilismo" class="form-label text-light">
                                    Experiencia en Automovilismo
                                </label>
                                <select class="form-select bg-dark text-light border-secondary" 
                                        id="experiencia_automovilismo" name="experiencia_automovilismo">
                                    <option value="ninguna">Ninguna</option>
                                    <option value="basica">Básica (Fan/Espectador)</option>
                                    <option value="intermedia">Intermedia (Track Days ocasionales)</option>
                                    <option value="avanzada">Avanzada (Competencias/Racing)</option>
                                </select>
                                <div class="invalid-feedback"></div>
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <label for="experiencia_karting" class="form-label text-light">
                                    Experiencia en Karting
                                </label>
                                <select class="form-select bg-dark text-light border-secondary" 
                                        id="experiencia_karting" name="experiencia_karting">
                                    <option value="ninguna">Ninguna</option>
                                    <option value="basica">Básica (Ocasional/Recreativo)</option>
                                    <option value="intermedia">Intermedia (Regular/Club)</option>
                                    <option value="avanzada">Avanzada (Competitivo)</option>
                                </select>
                                <div class="invalid-feedback"></div>
                            </div>
                        </div>

                        <!-- Licencia de manejo -->
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="checkbox" 
                                           id="licencia_manejo" name="licencia_manejo">
                                    <label class="form-check-label text-light" for="licencia_manejo">
                                        Tengo licencia de manejo vigente
                                    </label>
                                </div>
                            </div>
                            
                            <div class="col-md-6 mb-3" id="tipo-licencia-container" style="display: none;">
                                <label for="tipo_licencia" class="form-label text-light">
                                    Tipo de Licencia
                                </label>
                                <select class="form-select bg-dark text-light border-secondary" 
                                        id="tipo_licencia" name="tipo_licencia">
                                    <option value="">Seleccionar...</option>
                                    <option value="automovilista">Automovilista</option>
                                    <option value="chofer">Chofer</option>
                                    <option value="motociclista">Motociclista</option>
                                    <option value="internacional">Internacional</option>
                                </select>
                                <div class="invalid-feedback"></div>
                            </div>
                        </div>

                        <!-- Vehículos -->
                        <h6 class="text-light mb-3 mt-4">
                            <i class="fas fa-car me-2"></i>
                            Información Vehicular
                        </h6>
                        
                        <div class="mb-3">
                            <label for="vehiculo_principal" class="form-label text-light">
                                Vehículo Principal (Marca y Modelo)
                            </label>
                            <input type="text" class="form-control bg-dark text-light border-secondary" 
                                   id="vehiculo_principal" name="vehiculo_principal" 
                                   placeholder="ej. BMW 320i, Audi A4, Ferrari 488">
                            <div class="invalid-feedback"></div>
                        </div>

                        <!-- Vehículos Ferrari -->
                        <div class="mb-3">
                            <label class="form-label text-light">
                                <i class="fas fa-horse me-2"></i>
                                ¿Posees algún vehículo Ferrari?
                            </label>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="tiene_ferrari" 
                                       id="tiene_ferrari_no" value="no" checked>
                                <label class="form-check-label text-light" for="tiene_ferrari_no">
                                    No poseo vehículos Ferrari
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="tiene_ferrari" 
                                       id="tiene_ferrari_si" value="si">
                                <label class="form-check-label text-light" for="tiene_ferrari_si">
                                    Sí poseo vehículos Ferrari
                                </label>
                            </div>
                        </div>

                        <div id="ferrari-vehicles-container" style="display: none;">
                            <div class="card bg-secondary border-0 mb-3">
                                <div class="card-body">
                                    <h6 class="text-light mb-3">Mis Vehículos Ferrari</h6>
                                    <div id="ferrari-vehicles-list">
                                        <!-- Se llenará dinámicamente -->
                                    </div>
                                    <button type="button" class="btn btn-outline-light btn-sm" 
                                            onclick="addFerrariVehicle()">
                                        <i class="fas fa-plus me-2"></i> Agregar Vehículo Ferrari
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- Preferencias F1 -->
                        <h6 class="text-light mb-3 mt-4">
                            <i class="fas fa-flag-checkered me-2"></i>
                            Preferencias de Fórmula 1
                        </h6>
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="pilotos_favoritos" class="form-label text-light">
                                    Pilotos Favoritos (Actuales o Históricos)
                                </label>
                                <textarea class="form-control bg-dark text-light border-secondary" 
                                          id="pilotos_favoritos" name="pilotos_favoritos" rows="3"
                                          placeholder="ej. Charles Leclerc, Carlos Sainz, Michael Schumacher..."></textarea>
                                <div class="invalid-feedback"></div>
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <label for="circuitos_favoritos" class="form-label text-light">
                                    Circuitos Favoritos
                                </label>
                                <textarea class="form-control bg-dark text-light border-secondary" 
                                          id="circuitos_favoritos" name="circuitos_favoritos" rows="3"
                                          placeholder="ej. Monza, Silverstone, Hermanos Rodríguez..."></textarea>
                                <div class="invalid-feedback"></div>
                            </div>
                        </div>

                        <!-- Intereses del Club -->
                        <h6 class="text-light mb-3 mt-4">
                            <i class="fas fa-heart me-2"></i>
                            Intereses en el Club
                        </h6>
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label text-light">
                                    ¿Qué actividades te interesan más? (Selecciona todas las que apliquen)
                                </label>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" 
                                           id="intereses_carreras_f1" name="intereses_club[]" value="carreras_f1">
                                    <label class="form-check-label text-light" for="intereses_carreras_f1">
                                        Ver carreras de F1 en grupo
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" 
                                           id="intereses_eventos_sociales" name="intereses_club[]" value="eventos_sociales">
                                    <label class="form-check-label text-light" for="intereses_eventos_sociales">
                                        Eventos sociales y cenas
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" 
                                           id="intereses_track_days" name="intereses_club[]" value="track_days">
                                    <label class="form-check-label text-light" for="intereses_track_days">
                                        Track Days en autódromos
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" 
                                           id="intereses_viajes" name="intereses_club[]" value="viajes">
                                    <label class="form-check-label text-light" for="intereses_viajes">
                                        Viajes a Italia y otros destinos
                                    </label>
                                </div>
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" 
                                           id="intereses_karting" name="intereses_club[]" value="karting">
                                    <label class="form-check-label text-light" for="intereses_karting">
                                        Competencias de karting
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" 
                                           id="intereses_coleccionismo" name="intereses_club[]" value="coleccionismo">
                                    <label class="form-check-label text-light" for="intereses_coleccionismo">
                                        Coleccionismo Ferrari
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" 
                                           id="intereses_networking" name="intereses_club[]" value="networking">
                                    <label class="form-check-label text-light" for="intereses_networking">
                                        Networking profesional
                                    </label>
                                </div>
                            </div>
                        </div>

                        <!-- Disponibilidad -->
                        <div class="mb-3">
                            <label class="form-label text-light">
                                Disponibilidad para eventos
                            </label>
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" 
                                               id="disponibilidad_entre_semana" name="disponibilidad_eventos[]" value="entre_semana">
                                        <label class="form-check-label text-light" for="disponibilidad_entre_semana">
                                            Entre semana
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" 
                                               id="disponibilidad_fines_semana" name="disponibilidad_eventos[]" value="fines_semana">
                                        <label class="form-check-label text-light" for="disponibilidad_fines_semana">
                                            Fines de semana
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" 
                                               id="disponibilidad_vacaciones" name="disponibilidad_eventos[]" value="vacaciones">
                                        <label class="form-check-label text-light" for="disponibilidad_vacaciones">
                                            Vacaciones
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" 
                                               id="disponibilidad_cualquier_momento" name="disponibilidad_eventos[]" value="cualquier_momento">
                                        <label class="form-check-label text-light" for="disponibilidad_cualquier_momento">
                                            Cualquier momento
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Comentarios adicionales -->
                        <div class="mb-3">
                            <label for="comentarios_adicionales" class="form-label text-light">
                                Comentarios Adicionales
                            </label>
                            <textarea class="form-control bg-dark text-light border-secondary" 
                                      id="comentarios_adicionales" name="comentarios_adicionales" rows="4"
                                      placeholder="Cuéntanos algo más sobre ti, tus expectativas del club, o cualquier información relevante..."></textarea>
                            <div class="invalid-feedback"></div>
                        </div>
                    </div>
                    
                    <div class="card-footer bg-transparent">
                        <div class="d-flex justify-content-between">
                            <button type="button" class="btn btn-outline-light" onclick="prevStep(2)">
                                <i class="fas fa-arrow-left me-2"></i> Anterior
                            </button>
                            <button type="button" class="btn btn-ferrari-red" onclick="nextStep(4)">
                                Siguiente <i class="fas fa-arrow-right ms-2"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- PASO 4: Documentos -->
            <div class="form-step" id="step-4">
                <div class="card bg-dark border-secondary">
                    <div class="card-header bg-ferrari-red">
                        <h4 class="mb-0 text-white">
                            <i class="fas fa-file-upload me-2"></i>
                            Documentos Requeridos
                        </h4>
                    </div>
                    <div class="card-body">
                        <div class="alert alert-info mb-4">
                            <i class="fas fa-info-circle me-2"></i>
                            <strong>Instrucciones:</strong>
                            <ul class="mb-0 mt-2">
                                <li>Los archivos deben estar en formato PDF, JPG o PNG</li>
                                <li>Tamaño máximo por archivo: 5MB</li>
                                <li>Asegúrate de que los documentos sean legibles y estén completos</li>
                                <li>Los documentos marcados con <span class="text-danger">*</span> son obligatorios</li>
                            </ul>
                        </div>

                        <!-- Documentos para Ordinarios -->
                        <div id="documentos-ordinario" class="documentos-tipo">
                            <h6 class="text-light mb-3">
                                <i class="fas fa-id-card me-2"></i>
                                Documentos Requeridos - Miembro Ordinario
                            </h6>
                            
                            <div class="row">
                                <div class="col-md-6 mb-4">
                                    <div class="document-upload-card">
                                        <label class="form-label text-light">
                                            Identificación Oficial <span class="text-danger">*</span>
                                        </label>
                                        <p class="text-muted small">INE, Pasaporte o Cédula Profesional</p>
                                        <div class="upload-area" onclick="triggerFileInput('identificacion_oficial')">
                                            <i class="fas fa-cloud-upload-alt fa-2x text-muted mb-2"></i>
                                            <p class="text-muted mb-0">Click para subir archivo</p>
                                        </div>
                                        <input type="file" id="identificacion_oficial" name="documentos[identificacion_oficial]" 
                                               accept=".pdf,.jpg,.jpeg,.png" style="display: none;" 
                                               onchange="handleFileUpload(this, 'identificacion_oficial')">
                                        <div class="file-info mt-2" id="identificacion_oficial_info" style="display: none;">
                                            <small class="text-success">
                                                <i class="fas fa-check-circle me-1"></i>
                                                <span class="filename"></span>
                                            </small>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="col-md-6 mb-4">
                                    <div class="document-upload-card">
                                        <label class="form-label text-light">
                                            Comprobante de Domicilio <span class="text-danger">*</span>
                                        </label>
                                        <p class="text-muted small">No mayor a 3 meses de antigüedad</p>
                                        <div class="upload-area" onclick="triggerFileInput('comprobante_domicilio')">
                                            <i class="fas fa-cloud-upload-alt fa-2x text-muted mb-2"></i>
                                            <p class="text-muted mb-0">Click para subir archivo</p>
                                        </div>
                                        <input type="file" id="comprobante_domicilio" name="documentos[comprobante_domicilio]" 
                                               accept=".pdf,.jpg,.jpeg,.png" style="display: none;" 
                                               onchange="handleFileUpload(this, 'comprobante_domicilio')">
                                        <div class="file-info mt-2" id="comprobante_domicilio_info" style="display: none;">
                                            <small class="text-success">
                                                <i class="fas fa-check-circle me-1"></i>
                                                <span class="filename"></span>
                                            </small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6 mb-4">
                                    <div class="document-upload-card">
                                        <label class="form-label text-light">
                                            Fotografía de Rostro <span class="text-danger">*</span>
                                        </label>
                                        <p class="text-muted small">Tipo credencial, fondo blanco</p>
                                        <div class="upload-area" onclick="triggerFileInput('foto_rostro')">
                                            <i class="fas fa-camera fa-2x text-muted mb-2"></i>
                                            <p class="text-muted mb-0">Click para subir foto</p>
                                        </div>
                                        <input type="file" id="foto_rostro" name="documentos[foto_rostro]" 
                                               accept=".jpg,.jpeg,.png" style="display: none;" 
                                               onchange="handleFileUpload(this, 'foto_rostro')">
                                        <div class="file-info mt-2" id="foto_rostro_info" style="display: none;">
                                            <small class="text-success">
                                                <i class="fas fa-check-circle me-1"></i>
                                                <span class="filename"></span>
                                            </small>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="col-md-6 mb-4">
                                    <div class="document-upload-card">
                                        <label class="form-label text-light">
                                            Comprobante de Ingresos
                                        </label>
                                        <p class="text-muted small">Opcional - Estado de cuenta o recibo</p>
                                        <div class="upload-area" onclick="triggerFileInput('comprobante_ingresos')">
                                            <i class="fas fa-file-invoice-dollar fa-2x text-muted mb-2"></i>
                                            <p class="text-muted mb-0">Click para subir archivo</p>
                                        </div>
                                        <input type="file" id="comprobante_ingresos" name="documentos[comprobante_ingresos]" 
                                               accept=".pdf,.jpg,.jpeg,.png" style="display: none;" 
                                               onchange="handleFileUpload(this, 'comprobante_ingresos')">
                                        <div class="file-info mt-2" id="comprobante_ingresos_info" style="display: none;">
                                            <small class="text-success">
                                                <i class="fas fa-check-circle me-1"></i>
                                                <span class="filename"></span>
                                            </small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Documentos para Juniors -->
                        <div id="documentos-junior" class="documentos-tipo" style="display: none;">
                            <h6 class="text-light mb-3">
                                <i class="fas fa-graduation-cap me-2"></i>
                                Documentos Requeridos - Miembro Junior
                            </h6>
                            
                            <div class="row">
                                <div class="col-md-6 mb-4">
                                    <div class="document-upload-card">
                                        <label class="form-label text-light">
                                            Acta de Nacimiento <span class="text-danger">*</span>
                                        </label>
                                        <p class="text-muted small">Copia certificada reciente</p>
                                        <div class="upload-area" onclick="triggerFileInput('acta_nacimiento')">
                                            <i class="fas fa-certificate fa-2x text-muted mb-2"></i>
                                            <p class="text-muted mb-0">Click para subir archivo</p>
                                        </div>
                                        <input type="file" id="acta_nacimiento" name="documentos[acta_nacimiento]" 
                                               accept=".pdf,.jpg,.jpeg,.png" style="display: none;" 
                                               onchange="handleFileUpload(this, 'acta_nacimiento')">
                                        <div class="file-info mt-2" id="acta_nacimiento_info" style="display: none;">
                                            <small class="text-success">
                                                <i class="fas fa-check-circle me-1"></i>
                                                <span class="filename"></span>
                                            </small>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="col-md-6 mb-4">
                                    <div class="document-upload-card">
                                        <label class="form-label text-light">
                                            Fotografía de Rostro <span class="text-danger">*</span>
                                        </label>
                                        <p class="text-muted small">Tipo credencial, fondo blanco</p>
                                        <div class="upload-area" onclick="triggerFileInput('foto_rostro_junior')">
                                            <i class="fas fa-camera fa-2x text-muted mb-2"></i>
                                            <p class="text-muted mb-0">Click para subir foto</p>
                                        </div>
                                        <input type="file" id="foto_rostro_junior" name="documentos[foto_rostro]" 
                                               accept=".jpg,.jpeg,.png" style="display: none;" 
                                               onchange="handleFileUpload(this, 'foto_rostro_junior')">
                                        <div class="file-info mt-2" id="foto_rostro_junior_info" style="display: none;">
                                            <small class="text-success">
                                                <i class="fas fa-check-circle me-1"></i>
                                                <span class="filename"></span>
                                            </small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-12 mb-4">
                                    <div class="document-upload-card">
                                        <label class="form-label text-light">
                                            Autorización de Padres/Tutores <span class="text-danger">*</span>
                                        </label>
                                        <p class="text-muted small">Carta firmada por padres o tutores legales</p>
                                        <div class="upload-area" onclick="triggerFileInput('autorizacion_padres_doc')">
                                            <i class="fas fa-file-signature fa-2x text-muted mb-2"></i>
                                            <p class="text-muted mb-0">Click para subir archivo</p>
                                        </div>
                                        <input type="file" id="autorizacion_padres_doc" name="documentos[autorizacion_padres]" 
                                               accept=".pdf,.jpg,.jpeg,.png" style="display: none;" 
                                               onchange="handleFileUpload(this, 'autorizacion_padres_doc')">
                                        <div class="file-info mt-2" id="autorizacion_padres_doc_info" style="display: none;">
                                            <small class="text-success">
                                                <i class="fas fa-check-circle me-1"></i>
                                                <span class="filename"></span>
                                            </small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Progress de documentos -->
                        <div class="mt-4">
                            <div class="card bg-secondary border-0">
                                <div class="card-body">
                                    <h6 class="text-light mb-3">
                                        <i class="fas fa-tasks me-2"></i>
                                        Progreso de Documentos
                                    </h6>
                                    <div class="progress mb-2" style="height: 20px;">
                                        <div class="progress-bar bg-success" role="progressbar" 
                                             id="documentos-progress" style="width: 0%">
                                            <span id="documentos-progress-text">0%</span>
                                        </div>
                                    </div>
                                    <small class="text-muted" id="documentos-status">
                                        No has subido ningún documento requerido
                                    </small>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="card-footer bg-transparent">
                        <div class="d-flex justify-content-between">
                            <button type="button" class="btn btn-outline-light" onclick="prevStep(3)">
                                <i class="fas fa-arrow-left me-2"></i> Anterior
                            </button>
                            <button type="button" class="btn btn-ferrari-red" onclick="nextStep(5)" 
                                    id="btn-next-documentos">
                                Siguiente <i class="fas fa-arrow-right ms-2"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- PASO 5: Confirmación -->
            <div class="form-step" id="step-5">
                <div class="card bg-dark border-secondary">
                    <div class="card-header bg-ferrari-red">
                        <h4 class="mb-0 text-white">
                            <i class="fas fa-check-circle me-2"></i>
                            Confirmación y Envío
                        </h4>
                    </div>
                    <div class="card-body">
                        <!-- Resumen de información -->
                        <div class="alert alert-success mb-4">
                            <i class="fas fa-check-circle me-2"></i>
                            <strong>¡Felicidades!</strong> Has completado todos los pasos del formulario.
                            Revisa la información antes de enviar.
                        </div>

                        <!-- Resumen por secciones -->
                        <div class="accordion" id="resumen-accordion">
                            <!-- Resumen Datos Personales -->
                            <div class="accordion-item bg-dark border-secondary">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed bg-dark text-light border-secondary" 
                                            type="button" data-bs-toggle="collapse" data-bs-target="#resumen-personales">
                                        <i class="fas fa-user me-2"></i>
                                        Datos Personales
                                    </button>
                                </h2>
                                <div id="resumen-personales" class="accordion-collapse collapse" 
                                     data-bs-parent="#resumen-accordion">
                                    <div class="accordion-body bg-dark text-light" id="resumen-personales-content">
                                        <!-- Se llenará con JavaScript -->
                                    </div>
                                </div>
                            </div>

                            <!-- Resumen Contacto -->
                            <div class="accordion-item bg-dark border-secondary">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed bg-dark text-light border-secondary" 
                                            type="button" data-bs-toggle="collapse" data-bs-target="#resumen-contacto">
                                        <i class="fas fa-address-book me-2"></i>
                                        Contacto y Dirección
                                    </button>
                                </h2>
                                <div id="resumen-contacto" class="accordion-collapse collapse" 
                                     data-bs-parent="#resumen-accordion">
                                    <div class="accordion-body bg-dark text-light" id="resumen-contacto-content">
                                        <!-- Se llenará con JavaScript -->
                                    </div>
                                </div>
                            </div>

                            <!-- Resumen Ferrari -->
                            <div class="accordion-item bg-dark border-secondary">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed bg-dark text-light border-secondary" 
                                            type="button" data-bs-toggle="collapse" data-bs-target="#resumen-ferrari">
                                        <i class="fas fa-car-side me-2"></i>
                                        Información Ferrari
                                    </button>
                                </h2>
                                <div id="resumen-ferrari" class="accordion-collapse collapse" 
                                     data-bs-parent="#resumen-accordion">
                                    <div class="accordion-body bg-dark text-light" id="resumen-ferrari-content">
                                        <!-- Se llenará con JavaScript -->
                                    </div>
                                </div>
                            </div>

                            <!-- Resumen Documentos -->
                            <div class="accordion-item bg-dark border-secondary">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed bg-dark text-light border-secondary" 
                                            type="button" data-bs-toggle="collapse" data-bs-target="#resumen-documentos">
                                        <i class="fas fa-file-upload me-2"></i>
                                        Documentos Subidos
                                    </button>
                                </h2>
                                <div id="resumen-documentos" class="accordion-collapse collapse" 
                                     data-bs-parent="#resumen-accordion">
                                    <div class="accordion-body bg-dark text-light" id="resumen-documentos-content">
                                        <!-- Se llenará con JavaScript -->
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Términos y Condiciones -->
                        <div class="mt-4">
                            <h6 class="text-light mb-3">
                                <i class="fas fa-file-contract me-2"></i>
                                Términos y Condiciones
                            </h6>
                            
                            <div class="card bg-secondary border-0 mb-3">
                                <div class="card-body">
                                    <h6 class="text-light">Condiciones de Membresía - Scuderia Ferrari Club México</h6>
                                    <div class="text-muted small" style="max-height: 200px; overflow-y: auto;">
                                        <p><strong>1. Membresía y Beneficios:</strong></p>
                                        <ul>
                                            <li>Al completar el registro, tendrás acceso a eventos exclusivos del club</li>
                                            <li>Podrás comprar boletos preferenciales para el GP de México</li>
                                            <li>Tendrás descuentos especiales en viajes a Italia y experiencias Ferrari</li>
                                            <li>Participación en track days y eventos automovilísticos</li>
                                        </ul>
                                        
                                        <p><strong>2. Responsabilidades del Miembro:</strong></p>
                                        <ul>
                                            <li>Mantener actualizada la información de contacto</li>
                                            <li>Respetar el código de conducta en eventos</li>
                                            <li>Cumplir con las políticas de pago de eventos adicionales</li>
                                        </ul>
                                        
                                        <p><strong>3. Experiencias VIP:</strong></p>
                                        <ul>
                                            <li>Solo miembros activos pueden acceder a las experiencias VIP</li>
                                            <li>Los precios preferenciales aplicarán automáticamente</li>
                                            <li>Las reservas están sujetas a disponibilidad</li>
                                        </ul>
                                        
                                        <p><strong>4. Privacidad:</strong></p>
                                        <ul>
                                            <li>Tus datos serán utilizados únicamente para actividades del club</li>
                                            <li>No compartiremos información con terceros sin tu consentimiento</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="form-check mb-3">
                                <input class="form-check-input" type="checkbox" 
                                       id="acepta_terminos" name="acepta_terminos" required>
                                <label class="form-check-label text-light" for="acepta_terminos">
                                    <span class="text-danger">*</span> He leído y acepto los términos y condiciones de membresía
                                </label>
                                <div class="invalid-feedback"></div>
                            </div>
                            
                            <div class="form-check mb-3">
                                <input class="form-check-input" type="checkbox" 
                                       id="acepta_comunicaciones" name="acepta_comunicaciones">
                                <label class="form-check-label text-light" for="acepta_comunicaciones">
                                    Acepto recibir comunicaciones sobre eventos y actividades del club
                                </label>
                            </div>
                        </div>

                        <!-- Estado final -->
                        <div class="alert alert-info">
                            <i class="fas fa-info-circle me-2"></i>
                            <strong>Proceso de Validación:</strong><br>
                            Una vez enviado el formulario, tu información será revisada por nuestro equipo administrativo. 
                            Recibirás una confirmación por email y WhatsApp cuando tu membresía sea activada.
                        </div>
                    </div>
                    
                    <div class="card-footer bg-transparent">
                        <div class="d-flex justify-content-between">
                            <button type="button" class="btn btn-outline-light" onclick="prevStep(4)">
                                <i class="fas fa-arrow-left me-2"></i> Anterior
                            </button>
                            <button type="submit" class="btn btn-success btn-lg" id="btn-submit-formulario">
                                <i class="fas fa-paper-plane me-2"></i>
                                Enviar Formulario
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Los pasos 3, 4 y 5 continuarán en el siguiente archivo... -->
            
        </form>
        
        <!-- Mensaje de éxito -->
        <div id="success-message" class="success-container" style="display: none;">
            <div class="success-icon">
                <i class="fas fa-check-circle"></i>
            </div>
            <h2 class="success-title">¡Formulario Enviado Exitosamente!</h2>
            <div class="success-message">
                <p>Gracias por completar tu registro en el Scuderia Ferrari Club México.</p>
                <p>Hemos recibido toda tu información y documentos. Nuestro equipo revisará tu solicitud y te contactaremos pronto.</p>
                <p><strong>¿Qué sigue?</strong></p>
                <ul class="text-start d-inline-block">
                    <li>Recibirás una confirmación por correo electrónico</li>
                    <li>Te contactaremos por WhatsApp en las próximas 24-48 horas</li>
                    <li>Te informaremos sobre los próximos eventos y experiencias VIP</li>
                </ul>
            </div>
            <div class="mt-4">
                <a href="index.php" class="btn btn-ferrari btn-lg">
                    <i class="fas fa-home me-2"></i>
                    Volver al Portal
                </a>
            </div>
        </div>
    </main>

    <!-- Bootstrap 5 JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <!-- Custom JavaScript -->
    <script src="../assets/js/formulario-completo.js"></script>
</body>
</html>