*{margin:0;padding:0;box-sizing:border-box}
:root{--primary:#6366f1;--primary-dark:#4f46e5;--secondary:#ec4899;--accent:#8b5cf6;--success:#10b981;--glass:rgba(255,255,255,0.1);--glass-border:rgba(255,255,255,0.2)}
body{font-family:'Poppins',sans-serif;min-height:100vh;background:linear-gradient(135deg,#0f172a 0%,#1e1b4b 50%,#312e81 100%);overflow-x:hidden;position:relative}
.bg-animation{position:fixed;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:0.5;animation:float 20s infinite ease-in-out}
.orb-1{width:600px;height:600px;background:radial-gradient(circle,#6366f1,transparent);top:-200px;left:-200px;animation-delay:0s}
.orb-2{width:500px;height:500px;background:radial-gradient(circle,#ec4899,transparent);bottom:-150px;right:-150px;animation-delay:-7s}
.orb-3{width:400px;height:400px;background:radial-gradient(circle,#8b5cf6,transparent);top:50%;left:50%;transform:translate(-50%,-50%);animation-delay:-14s}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}25%{transform:translate(50px,-50px) scale(1.1)}50%{transform:translate(-30px,30px) scale(0.9)}75%{transform:translate(-50px,-30px) scale(1.05)}}
.stars{position:fixed;inset:0;z-index:0}
.star{position:absolute;width:2px;height:2px;background:#fff;border-radius:50%;animation:twinkle 3s infinite}
@keyframes twinkle{0%,100%{opacity:0.3;transform:scale(1)}50%{opacity:1;transform:scale(1.5)}}
.app{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column}
.header{padding:20px;text-align:center;backdrop-filter:blur(20px);background:var(--glass);border-bottom:1px solid var(--glass-border)}
.logo-container{display:flex;align-items:center;justify-content:center;gap:15px;margin-bottom:10px}
.logo{width:60px;height:60px;background:linear-gradient(135deg,var(--primary),var(--secondary));border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:30px;box-shadow:0 10px 40px rgba(99,102,241,0.4);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 10px 40px rgba(99,102,241,0.4)}50%{box-shadow:0 10px 60px rgba(99,102,241,0.6)}}
.brand{font-size:28px;font-weight:800;background:linear-gradient(135deg,#fff,#c7d2fe);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.contact-bar{display:flex;justify-content:center;gap:20px;font-size:13px;color:rgba(255,255,255,0.7)}
.contact-bar span{display:flex;align-items:center;gap:6px}
.main{flex:1;padding:20px;max-width:600px;margin:0 auto;width:100%}
.progress-container{margin-bottom:30px}
.progress-steps{display:flex;justify-content:space-between;position:relative;margin-bottom:10px}
.progress-steps::before{content:'';position:absolute;top:50%;left:0;right:0;height:3px;background:rgba(255,255,255,0.1);transform:translateY(-50%);z-index:0}
.progress-line{position:absolute;top:50%;left:0;height:3px;background:linear-gradient(90deg,var(--primary),var(--secondary));transform:translateY(-50%);z-index:1;transition:width 0.5s ease}
.step-dot{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,0.1);border:2px solid rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;font-size:14px;color:rgba(255,255,255,0.5);position:relative;z-index:2;transition:all 0.3s;cursor:pointer}
.step-dot.active{background:linear-gradient(135deg,var(--primary),var(--secondary));border-color:var(--primary);color:#fff;transform:scale(1.1);box-shadow:0 0 20px rgba(99,102,241,0.5)}
.step-dot.completed{background:var(--success);border-color:var(--success);color:#fff}
.step-dot.completed::after{content:'✓'}
.step-labels{display:flex;justify-content:space-between;font-size:11px;color:rgba(255,255,255,0.5)}
.step-labels span{text-align:center;flex:1}
.step-labels span.active{color:#fff;font-weight:600}
.card{background:var(--glass);backdrop-filter:blur(20px);border-radius:24px;border:1px solid var(--glass-border);padding:30px;margin-bottom:20px;box-shadow:0 20px 60px rgba(0,0,0,0.3);animation:slideUp 0.5s ease}
@keyframes slideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.step-content{display:none}
.step-content.active{display:block;animation:fadeIn 0.4s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.step-title{font-size:24px;font-weight:700;color:#fff;margin-bottom:8px;display:flex;align-items:center;gap:12px}
.step-title .icon{width:50px;height:50px;background:linear-gradient(135deg,var(--primary),var(--secondary));border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px}
.step-subtitle{color:rgba(255,255,255,0.6);margin-bottom:25px;font-size:14px}
.form-group{margin-bottom:20px}
.form-group label{display:block;color:#fff;font-weight:500;margin-bottom:8px;font-size:14px}
.form-group label .req{color:var(--secondary)}
.input-wrapper{position:relative}
.input-wrapper .icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:20px;z-index:1}
.input-wrapper input{width:100%;padding:16px 16px 16px 50px;background:rgba(255,255,255,0.05);border:2px solid rgba(255,255,255,0.1);border-radius:14px;color:#fff;font-size:16px;font-family:inherit;transition:all 0.3s}
.input-wrapper input::placeholder{color:rgba(255,255,255,0.3)}
.input-wrapper input:focus{outline:none;border-color:var(--primary);background:rgba(255,255,255,0.1);box-shadow:0 0 20px rgba(99,102,241,0.2)}
.input-wrapper input.valid{border-color:var(--success);background:rgba(16,185,129,0.1)}
.input-wrapper input.error{border-color:#ef4444;background:rgba(239,68,68,0.1)}
.input-wrapper .status{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:20px;opacity:0;transition:opacity 0.3s}
.input-wrapper input.valid+.status.valid,.input-wrapper input.error+.status.error{opacity:1}
.error-msg{color:#ef4444;font-size:12px;margin-top:6px;display:none;padding-left:4px}
.error-msg.show{display:flex;align-items:center;gap:5px}
.photo-upload{background:rgba(255,255,255,0.03);border:2px dashed rgba(255,255,255,0.2);border-radius:16px;padding:30px;text-align:center;cursor:pointer;transition:all 0.3s}
.photo-upload:hover{border-color:var(--primary);background:rgba(99,102,241,0.1)}
.photo-upload.has-image{border-color:var(--success);border-style:solid;background:rgba(16,185,129,0.1)}
.photo-upload .upload-icon{font-size:50px;margin-bottom:15px}
.photo-upload strong{display:block;color:#fff;margin-bottom:5px}
.photo-upload small{color:rgba(255,255,255,0.5)}
.photo-upload input{display:none}
.photo-preview{max-width:100%;max-height:200px;border-radius:12px;margin-top:15px;display:none;box-shadow:0 10px 30px rgba(0,0,0,0.3)}
.photo-preview.show{display:block}
.nav-buttons{display:flex;gap:15px;margin-top:25px}
.btn{flex:1;padding:16px;border:none;border-radius:14px;font-size:16px;font-weight:600;cursor:pointer;transition:all 0.3s;font-family:inherit}
.btn-back{background:rgba(255,255,255,0.1);color:#fff;border:1px solid rgba(255,255,255,0.2)}
.btn-back:hover{background:rgba(255,255,255,0.2)}
.btn-next{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;box-shadow:0 10px 30px rgba(99,102,241,0.4)}
.btn-next:hover{transform:translateY(-3px);box-shadow:0 15px 40px rgba(99,102,241,0.5)}
.btn-next:active{transform:translateY(-1px)}
.btn-submit{background:linear-gradient(135deg,var(--success),#059669);box-shadow:0 10px 30px rgba(16,185,129,0.4)}
.btn-submit:hover{box-shadow:0 15px 40px rgba(16,185,129,0.5)}
.welcome-hero{text-align:center;padding:20px 0}
.welcome-icon{font-size:80px;margin-bottom:20px;animation:bounce 2s infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}
.welcome-hero h2{font-size:28px;color:#fff;margin-bottom:10px}
.welcome-hero p{color:rgba(255,255,255,0.7);margin-bottom:30px}
.features-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:30px 0}
.feature{background:rgba(255,255,255,0.05);border-radius:14px;padding:20px;text-align:center;border:1px solid rgba(255,255,255,0.1);transition:all 0.3s}
.feature:hover{transform:translateY(-5px);border-color:var(--primary)}
.feature .f-icon{font-size:30px;margin-bottom:10px}
.feature strong{display:block;color:#fff;font-size:13px;margin-bottom:4px}
.feature small{color:rgba(255,255,255,0.5);font-size:11px}
.review-section{margin-bottom:20px}
.review-section h4{color:var(--primary);font-size:14px;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.review-item{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid rgba(255,255,255,0.1)}
.review-item:last-child{border:none}
.review-item .label{color:rgba(255,255,255,0.6);font-size:13px}
.review-item .value{color:#fff;font-weight:500;font-size:13px}
.terms-box{background:rgba(255,255,255,0.05);border-radius:14px;padding:20px;margin:20px 0}
.terms-box label{display:flex;gap:12px;cursor:pointer;color:rgba(255,255,255,0.7);font-size:13px;line-height:1.6}
.terms-box input{width:22px;height:22px;accent-color:var(--primary)}
.success-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.9);backdrop-filter:blur(20px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}
.success-content{text-align:center;animation:popIn 0.5s cubic-bezier(0.68,-0.55,0.265,1.55)}
@keyframes popIn{from{opacity:0;transform:scale(0.5)}to{opacity:1;transform:scale(1)}}
.success-icon{width:120px;height:120px;background:linear-gradient(135deg,var(--success),#059669);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:60px;margin:0 auto 30px;box-shadow:0 20px 60px rgba(16,185,129,0.4);animation:successPulse 2s infinite}
@keyframes successPulse{0%,100%{box-shadow:0 20px 60px rgba(16,185,129,0.4)}50%{box-shadow:0 20px 80px rgba(16,185,129,0.6)}}
.success-content h2{font-size:32px;color:#fff;margin-bottom:15px}
.success-content p{color:rgba(255,255,255,0.7);margin-bottom:30px;max-width:400px;line-height:1.7}
.success-content .highlight{color:var(--primary);font-weight:600}
.btn-whatsapp{display:inline-flex;align-items:center;gap:10px;padding:16px 30px;background:#25d366;color:#fff;border:none;border-radius:14px;font-size:16px;font-weight:600;cursor:pointer;text-decoration:none;box-shadow:0 10px 30px rgba(37,211,102,0.4);transition:all 0.3s}
.btn-whatsapp:hover{transform:translateY(-3px);box-shadow:0 15px 40px rgba(37,211,102,0.5)}
.confetti{position:fixed;width:10px;height:10px;top:-10px;z-index:1001;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
@media(max-width:500px){.brand{font-size:22px}.step-title{font-size:20px}.step-title .icon{width:40px;height:40px;font-size:20px}.features-grid{grid-template-columns:1fr}.card{padding:20px}.step-dot{width:35px;height:35px;font-size:12px}}
/* ===== Firma virtual ===== */
.firma-declaracion{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.12);border-radius:14px;padding:16px;color:rgba(255,255,255,0.8);font-size:13px;line-height:1.6;margin-bottom:18px;max-height:180px;overflow-y:auto}
.firma-box{position:relative;background:#fff;border-radius:16px;border:2px solid rgba(255,255,255,0.2);overflow:hidden;touch-action:none}
.firma-box.error{border-color:#ef4444}
.firma-box.ok{border-color:var(--success)}
#firmaCanvas{display:block;width:100%;height:220px;cursor:crosshair;touch-action:none}
.firma-linea{position:absolute;left:24px;right:24px;bottom:48px;border-bottom:1.5px dashed #94a3b8;pointer-events:none}
.firma-x{position:absolute;left:24px;bottom:52px;color:#94a3b8;font-size:20px;pointer-events:none}
.firma-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:15px;pointer-events:none;transition:opacity .2s}
.firma-pie{position:absolute;left:0;right:0;bottom:14px;text-align:center;color:#64748b;font-size:12px;pointer-events:none}
.firma-acciones{display:flex;justify-content:space-between;align-items:center;margin-top:10px;color:rgba(255,255,255,0.6);font-size:12px;gap:10px}
.btn-limpiar{background:rgba(255,255,255,0.1);color:#fff;border:1px solid rgba(255,255,255,0.2);border-radius:10px;padding:8px 14px;font-family:inherit;font-size:13px;cursor:pointer}
.alerta-error{background:rgba(239,68,68,0.15);border:1px solid #ef4444;color:#fecaca;border-radius:14px;padding:14px 16px;margin-bottom:20px;font-size:14px}
.codigo-solicitud{display:inline-block;background:rgba(99,102,241,0.2);border:1px solid var(--primary);color:#fff;border-radius:10px;padding:8px 16px;font-weight:700;letter-spacing:2px;margin-bottom:20px}
.btn:disabled{opacity:.6;cursor:wait;transform:none}
.step-dot.completed{font-size:0}
.step-dot.completed::after{font-size:14px}
@media(max-width:500px){.step-dot{width:32px;height:32px}.step-labels span{visibility:hidden;white-space:nowrap}.step-labels span.active{visibility:visible;overflow:visible}}