/* ============================================================
   QR Express — Generador de Accesos QR
   TuSitioYa.cl | 100% Client-Side / Serverless
   Esquema: Dark mode + Emerald + Cyan
   ============================================================ */

* { font-family: 'Comfortaa', 'Inter', system-ui, sans-serif; }

/* --- Fondo animado con gradiente mesh --- */
body {
    background: #0a0f1e;
    overflow-x: hidden;
}

.bg-mesh {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: 
        radial-gradient(ellipse 80% 50% at 20% 40%, rgba(16, 185, 129, 0.12) 0%, transparent 70%),
        radial-gradient(ellipse 60% 40% at 80% 20%, rgba(0, 209, 255, 0.10) 0%, transparent 70%),
        radial-gradient(ellipse 50% 60% at 60% 80%, rgba(16, 185, 129, 0.08) 0%, transparent 70%);
    animation: meshMove 15s ease-in-out infinite alternate;
}

@keyframes meshMove {
    0%   { transform: scale(1) translate(0, 0); }
    50%  { transform: scale(1.05) translate(-2%, 1%); }
    100% { transform: scale(1) translate(1%, -1%); }
}

/* --- Partículas flotantes decorativas --- */
.particle {
    position: fixed;
    border-radius: 50%;
    animation: floatUp linear infinite;
    z-index: 1;
    pointer-events: none;
}

@keyframes floatUp {
    0%   { transform: translateY(100vh) scale(0); opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translateY(-10vh) scale(1); opacity: 0; }
}

/* --- Glass Card con glow --- */
.glass-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 
        0 25px 60px -12px rgba(0, 0, 0, 0.5),
        0 0 40px -10px rgba(0, 209, 255, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* --- Checkmark animado SVG --- */
.checkmark-circle {
    animation: scaleIn 0.5s ease-out;
}

.checkmark-path {
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
    animation: drawCheck 0.6s ease-out 0.3s forwards;
}

@keyframes scaleIn {
    0%   { transform: scale(0); opacity: 0; }
    80%  { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes drawCheck {
    to { stroke-dashoffset: 0; }
}

/* --- Botón con efecto glow --- */
.btn-glow {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.btn-glow::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(90deg, #00d1ff, #10b981, #00d1ff);
    z-index: -1;
    border-radius: inherit;
    filter: blur(12px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.btn-glow:hover::before { opacity: 0.6; }
.btn-glow:hover { transform: translateY(-2px); }
.btn-glow:active { transform: translateY(0); }

.btn-glow:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}
.btn-glow:disabled::before { display: none; }

/* --- Input premium --- */
.input-premium {
    transition: all 0.3s ease;
}
.input-premium:focus {
    box-shadow: 0 0 0 3px rgba(0, 209, 255, 0.2);
    border-color: #00d1ff;
}

/* --- Barra de progreso --- */
.progress-fill {
    transition: width 0.3s ease;
    background: linear-gradient(90deg, #00d1ff, #10b981);
}

/* --- Badge del plan --- */
.plan-badge {
    background: linear-gradient(135deg, rgba(0, 209, 255, 0.15), rgba(16, 185, 129, 0.15));
    border: 1px solid rgba(0, 209, 255, 0.3);
}

/* --- Glow pulse para estado de éxito --- */
.glow-success {
    animation: glowPulse 1.5s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 20px rgba(16, 185, 129, 0.2); }
    50%      { box-shadow: 0 0 40px rgba(16, 185, 129, 0.4); }
}

/* --- Shake para error de validación --- */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-8px); }
    40%, 80% { transform: translateX(8px); }
}