body{font-family:system-ui,-apple-system,sans-serif;margin:0;background:linear-gradient(135deg,#3b82f6 0%,#1e40af 50%,#1e3a8a 100%);display:flex;align-items:center;justify-content:center;min-height:100vh}.container{max-width:420px;background:#fff;border-radius:25px;box-shadow:0 25px 60px rgba(0,0,0,.25)}.preview-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.9);z-index:10000;display:flex;align-items:center;justify-content:center;animation:fadeIn 0.3s ease}.preview-content{background:white;border-radius:20px;max-width:500px;width:90%;max-height:80vh;overflow-y:auto;animation:slideUp 0.3s ease;box-shadow:0 25px 50px rgba(0,0,0,0.5)}.preview-header{background:linear-gradient(135deg,#3b82f6,#1e40af);color:white;padding:20px;text-align:center;border-radius:20px 20px 0 0}.preview-image{width:100%;height:200px;object-fit:cover;border-radius:0}.preview-body{padding:25px}.preview-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin:20px 0}.preview-stat{text-align:center;padding:15px;background:#f8fafc;border-radius:10px;border:2px solid #e5e7eb}.copy-success-preview{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(45deg,#10b981,#059669);color:white;padding:20px 30px;border-radius:15px;font-weight:bold;z-index:10001;box-shadow:0 20px 40px rgba(0,0,0,0.3);animation:popIn 0.5s ease-out}:root{--primary-color: #3b82f6;--secondary-color: #1e40af;--accent-color: #10b981;--warning-color: #f59e0b;--success-color: #059669;--white: #ffffff;--text-dark: #1f2937;--gradient-bg: linear-gradient(135deg,#667eea 0%,#764ba2 100%);--demos-gradient: linear-gradient(135deg,#3b82f6 0%,#1e40af 50%,#1e3a8a 100%);}*{margin: 0;padding: 0;box-sizing: border-box;}body{font-family: 'Poppins',sans-serif;background: var(--demos-gradient);min-height: 100vh;display: flex;align-items: center;justify-content: center;padding: 15px;}.container{max-width: 420px;width: 100%;background: var(--white);border-radius: 25px;box-shadow: 0 25px 60px rgba(0,0,0,0.25);overflow: hidden;animation: demosEntry 0.8s ease-out;border: 3px solid rgba(59,130,246,0.3);}@keyframes demosEntry{from{opacity: 0;transform: translateY(40px) scale(0.9) rotateY(10deg);}to{opacity: 1;transform: translateY(0) scale(1) rotateY(0deg);}}.preview-modal{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.9);z-index: 10000;display: flex;align-items: center;justify-content: center;animation: fadeIn 0.3s ease;backdrop-filter: blur(10px);}.preview-content{background: white;border-radius: 20px;max-width: 500px;width: 90%;max-height: 80vh;overflow-y: auto;animation: slideUp 0.3s ease;box-shadow: 0 25px 50px rgba(0,0,0,0.5);border: 3px solid #3b82f6;}.preview-header{background: linear-gradient(135deg,#3b82f6,#1e40af);color: white;padding: 20px;text-align: center;border-radius: 20px 20px 0 0;position: relative;}.preview-header::before{content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="preview-pattern" width="15" height="15" patternUnits="userSpaceOnUse"><polygon points="7.5,0 15,7.5 7.5,15 0,7.5" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(/%23preview-pattern)"/></svg>');}.preview-title{font-size: 22px;font-weight: 800;margin-bottom: 8px;position: relative;z-index: 1;}.preview-subtitle{font-size: 14px;opacity: 0.9;position: relative;z-index: 1;}.preview-image{width: 100%;height: 200px;object-fit: cover;border-radius: 0;cursor: pointer;transition: transform 0.3s ease;}.preview-image:hover{transform: scale(1.05);}.preview-body{padding: 25px;}.preview-description{font-size: 14px;color: #374151;line-height: 1.6;margin-bottom: 20px;text-align: center;}.preview-stats{display: grid;grid-template-columns: repeat(4,1fr);gap: 15px;margin: 20px 0;}.preview-stat{text-align: center;padding: 15px 8px;background: #f8fafc;border-radius: 10px;border: 2px solid #e5e7eb;transition: all 0.3s ease;cursor: pointer;}.preview-stat:hover{border-color: #3b82f6;background: rgba(59,130,246,0.05);transform: translateY(-2px);}.preview-stat-number{font-size: 18px;font-weight: 800;color: #3b82f6;margin-bottom: 5px;}.preview-stat-label{font-size: 10px;color: #6b7280;text-transform: uppercase;font-weight: 600;}.preview-features{margin: 20px 0;}.preview-features h4{font-size: 16px;color: #3b82f6;margin-bottom: 15px;text-align: center;font-weight: 700;}.preview-feature-list{display: grid;grid-template-columns: repeat(2,1fr);gap: 10px;}.preview-feature{display: flex;align-items: center;gap: 8px;font-size: 12px;color: #374151;padding: 8px;background: #f9fafb;border-radius: 8px;border: 1px solid #e5e7eb;}.preview-feature i{color: #059669;font-size: 14px;}.preview-actions{display: flex;gap: 10px;margin-top: 25px;}.preview-btn{flex: 1;padding: 12px 16px;border: none;border-radius: 10px;font-weight: 700;font-size: 13px;cursor: pointer;transition: all 0.3s ease;text-transform: uppercase;letter-spacing: 0.5px;}.preview-btn-primary{background: linear-gradient(45deg,#3b82f6,#1e40af);color: white;}.preview-btn-primary:hover{transform: translateY(-2px);box-shadow: 0 8px 25px rgba(59,130,246,0.4);}.preview-btn-secondary{background: #6b7280;color: white;}.preview-btn-secondary:hover{background: #4b5563;}.preview-btn-copy{background: linear-gradient(45deg,#10b981,#059669);color: white;}.preview-btn-copy:hover{transform: translateY(-2px);box-shadow: 0 8px 25px rgba(16,185,129,0.4);}.copy-success-preview{position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);background: linear-gradient(45deg,#10b981,#059669);color: white;padding: 20px 30px;border-radius: 15px;font-weight: bold;text-align: center;z-index: 10001;box-shadow: 0 20px 40px rgba(0,0,0,0.3);animation: popIn 0.5s ease-out;max-width: 300px;}@keyframes popIn{0%{opacity: 0;transform: translate(-50%,-50%) scale(0.5);}100%{opacity: 1;transform: translate(-50%,-50%) scale(1);}}@keyframes fadeIn{from{opacity: 0;}to{opacity: 1;}}@keyframes slideUp{from{opacity: 0;transform: translateY(50px);}to{opacity: 1;transform: translateY(0);}}.viral-share-float{position: fixed;bottom: 20px;left: 20px;z-index: 1000;animation: bounce 2s infinite;}.viral-btn{width: 65px;height: 65px;background: linear-gradient(45deg,#ff6b6b,#4ecdc4,#45b7d1);background-size: 300% 300%;border-radius: 50%;display: flex;align-items: center;justify-content: center;color: white;font-size: 26px;cursor: pointer;box-shadow: 0 8px 25px rgba(255,107,107,0.4);animation: gradientMove 3s ease infinite,bounce 2s infinite;border: none;text-decoration: none;}@keyframes gradientMove{0%{background-position: 0% 50%;}50%{background-position: 100% 50%;}100%{background-position: 0% 50%;}}@keyframes bounce{0%,20%,50%,80%,100%{transform: translateY(0);}40%{transform: translateY(-10px);}60%{transform: translateY(-5px);}}.mega-share-section{margin-top: 20px;border: 3px solid transparent;border-radius: 15px;background: linear-gradient(var(--white),var(--white)) padding-box,linear-gradient(45deg,#ff6b6b,#4ecdc4,#45b7d1) border-box;position: relative;overflow: hidden;}.mega-share-header{background: linear-gradient(45deg,#ff6b6b,#4ecdc4);color: var(--white);padding: 15px;font-weight: 700;text-align: center;font-size: 14px;text-transform: uppercase;letter-spacing: 1px;position: relative;}.mega-share-buttons{display: grid;grid-template-columns: repeat(4,1fr);gap: 2px;background: var(--white);padding: 15px;}.mega-share-btn{background: var(--white);height: 65px;display: flex;flex-direction: column;align-items: center;justify-content: center;font-size: 20px;cursor: pointer;transition: all 0.3s ease;border-radius: 10px;border: 2px solid #e5e7eb;position: relative;overflow: hidden;}.mega-share-btn:hover{transform: scale(1.1);box-shadow: 0 8px 25px rgba(0,0,0,0.2);z-index: 10;}.mega-share-btn span{font-size: 10px;font-weight: bold;margin-top: 5px;text-transform: uppercase;}.mega-share-btn i{font-size: 20px;margin-bottom: 3px;}.share-whatsapp{color: #25D366;}.share-whatsapp:hover{background: #25D366;color: var(--white);border-color: #25D366;}.share-facebook{color: #1877f2;}.share-facebook:hover{background: #1877f2;color: var(--white);border-color: #1877f2;}.share-linkedin{color: #0a66c2;}.share-linkedin:hover{background: #0a66c2;color: var(--white);border-color: #0a66c2;}.share-x{color: #000000;}.share-x:hover{background: #000000;color: var(--white);border-color: #000000;}.header{background: var(--demos-gradient);padding: 30px 20px 25px;text-align: center;position: relative;overflow: hidden;}.header::before{content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="demos-pattern" width="15" height="15" patternUnits="userSpaceOnUse"><polygon points="7.5,0 15,7.5 7.5,15 0,7.5" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(/%23demos-pattern)"/></svg>');}.logo-container{width: 110px;height: 110px;background: var(--white);border-radius: 20px;margin: 0 auto 20px;display: flex;align-items: center;justify-content: center;box-shadow: 0 10px 30px rgba(0,0,0,0.15);position: relative;z-index: 2;border: 3px solid rgba(255,255,255,0.3);cursor: pointer;transition: transform 0.3s ease;}.logo-container:hover{transform: scale(1.05);}.logo-container i{font-size: 3.5rem;background: var(--demos-gradient);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;}.demos-title{color: var(--white);font-size: 24px;font-weight: 800;text-transform: uppercase;letter-spacing: 2px;margin-bottom: 8px;text-shadow: 2px 2px 4px rgba(0,0,0,0.3);position: relative;z-index: 2;}.demos-subtitle{color: rgba(255,255,255,0.9);font-size: 12px;font-weight: 600;text-transform: uppercase;letter-spacing: 1px;margin-bottom: 20px;position: relative;z-index: 2;}.demos-stats{display: flex;justify-content: space-around;position: relative;z-index: 2;}.stat-item{text-align: center;color: var(--white);}.stat-number{font-size: 18px;font-weight: 800;margin-bottom: 2px;}.stat-label{font-size: 9px;opacity: 0.9;text-transform: uppercase;letter-spacing: 0.5px;}.content{padding: 25px;}.viral-banner{background: linear-gradient(45deg,#ff6b6b,#4ecdc4);color: white;padding: 15px;border-radius: 15px;text-align: center;font-weight: bold;font-size: 13px;margin-bottom: 20px;cursor: pointer;transition: all 0.3s ease;position: relative;overflow: hidden;}.viral-banner::before{content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);animation: shine 2s infinite;}@keyframes shine{0%{left: -100%;}100%{left: 100%;}}.viral-banner:hover{transform: translateY(-2px);box-shadow: 0 8px 25px rgba(255,107,107,0.4);}.action-button{display: flex;align-items: center;justify-content: space-between;width: 100%;padding: 14px 20px;margin-bottom: 10px;background: var(--white);border: 2px solid #e5e7eb;border-radius: 12px;text-decoration: none;color: var(--text-dark);font-weight: 600;font-size: 14px;transition: all 0.3s ease;box-shadow: 0 3px 10px rgba(0,0,0,0.08);cursor: pointer;position: relative;overflow: hidden;}.action-button::before{content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg,transparent,rgba(59,130,246,0.1),transparent);transition: left 0.5s ease;}.action-button:hover::before{left: 100%;}.action-button:hover{border-color: var(--primary-color);box-shadow: 0 5px 20px rgba(59,130,246,0.2);transform: translateY(-2px);}.action-button .left-content{display: flex;align-items: center;z-index: 1;}.action-button i{font-size: 18px;margin-right: 12px;width: 22px;text-align: center;color: var(--primary-color);}.action-button .arrow{font-size: 12px;color: #9ca3af;transition: transform 0.3s ease;z-index: 1;}.action-button:hover .arrow{transform: translateX(5px);color: var(--primary-color);}.btn-demos-all{background: var(--demos-gradient);color: var(--white);border-color: var(--primary-color);position: relative;}.btn-demos-all::after{content: '🚀';position: absolute;top: -3px;right: 10px;font-size: 12px;}.btn-demos-all i,.btn-demos-all .arrow{color: var(--white);}.btn-whatsapp-demos{background: #25D366;color: var(--white);border-color: #25D366;}.btn-whatsapp-demos i,.btn-whatsapp-demos .arrow{color: var(--white);}.btn-viral-demos{background: linear-gradient(45deg,#ff6b6b,#4ecdc4,#45b7d1);background-size: 300% 300%;color: #000000 !important;border-color: transparent;animation: gradientMove 3s ease infinite;font-weight: 700;display: flex;align-items: center;justify-content: center;text-align: center;}.btn-viral-demos i,.btn-viral-demos span,.btn-viral-demos .arrow{color: #000000 !important;z-index: 1;position: relative;}.btn-viral-demos .left-content{display: flex;align-items: center;justify-content: center;flex: 1;z-index: 1;}.btn-viral-demos .left-content span{color: #000000 !important;font-weight: 700;}.featured-demos{margin-top: 20px;border: 2px solid #e5e7eb;border-radius: 15px;overflow: hidden;box-shadow: 0 5px 20px rgba(0,0,0,0.1);}.demos-header{background: var(--demos-gradient);color: var(--white);padding: 12px 15px;font-weight: 700;text-align: center;font-size: 13px;text-transform: uppercase;letter-spacing: 1px;}.demos-list{background: var(--white);padding: 15px;max-height: 350px;overflow-y: auto;}.demo-item{display: flex;justify-content: space-between;align-items: center;padding: 14px 0;border-bottom: 1px solid #f3f4f6;transition: all 0.3s ease;cursor: pointer;position: relative;}.demo-item:last-child{border-bottom: none;}.demo-item:hover{background: #f8fafc;transform: translateX(5px);border-radius: 8px;padding-left: 10px;}.demo-info{flex: 1;}.demo-info h6{font-size: 13px;font-weight: 700;margin: 0 0 4px 0;color: var(--text-dark);display: flex;align-items: center;gap: 8px;}.demo-type{font-size: 10px;color: var(--primary-color);font-weight: 600;text-transform: uppercase;letter-spacing: 0.5px;background: rgba(59,130,246,0.1);padding: 2px 6px;border-radius: 4px;display: inline-block;margin-bottom: 2px;}.demo-industria{font-size: 9px;color: #6b7280;font-weight: 500;text-transform: uppercase;}.demo-badges{display: flex;gap: 4px;margin-top: 2px;}.badge-nuevo{background: #ef4444;color: white;font-size: 8px;padding: 2px 6px;border-radius: 10px;font-weight: bold;text-transform: uppercase;}.demo-access{display: flex;align-items: center;gap: 8px;flex-shrink: 0;}.credentials-btn{background: #f3f4f6;border: none;padding: 6px 8px;border-radius: 8px;font-size: 12px;color: #6b7280;cursor: pointer;transition: all 0.3s ease;display: flex;align-items: center;gap: 4px;}.credentials-btn:hover{background: #e5e7eb;transform: scale(1.1);color: var(--primary-color);}.demo-arrow{color: var(--primary-color);font-size: 14px;transition: transform 0.3s ease;}.demo-item:hover .demo-arrow{transform: translateX(3px);}.credentials-popup{position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);background: white;padding: 25px;border-radius: 20px;box-shadow: 0 25px 50px rgba(0,0,0,0.3);z-index: 10000;max-width: 320px;width: 90%;animation: popIn 0.3s ease-out;border: 3px solid var(--primary-color);}.popup-overlay{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.6);z-index: 9999;animation: fadeIn 0.3s ease;}.credential-field{background: #f8fafc;padding: 12px;border-radius: 8px;font-family: 'Courier New',monospace;margin-top: 8px;cursor: pointer;transition: all 0.3s ease;border: 2px solid transparent;font-weight: 600;display: flex;align-items: center;justify-content: space-between;}.credential-field:hover{background: #e5e7eb;border-color: var(--primary-color);transform: scale(1.02);}.copy-icon{color: #6b7280;font-size: 14px;}.filter-modal{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.8);z-index: 10000;display: flex;align-items: center;justify-content: center;animation: fadeIn 0.3s ease;}.filter-content{background: white;border-radius: 20px;padding: 30px;max-width: 400px;width: 90%;max-height: 80vh;overflow-y: auto;animation: slideUp 0.3s ease;}.industry-grid{display: grid;grid-template-columns: repeat(2,1fr);gap: 10px;margin: 20px 0;}.industry-btn{padding: 12px;border: 2px solid #e5e7eb;border-radius: 10px;background: white;cursor: pointer;transition: all 0.3s ease;text-align: center;font-size: 12px;font-weight: 600;}.industry-btn:hover{border-color: var(--primary-color);background: rgba(59,130,246,0.1);transform: translateY(-2px);}.industry-btn i{display: block;font-size: 20px;margin-bottom: 8px;}.whatsapp-float{position: fixed;bottom: 20px;right: 20px;width: 65px;height: 65px;background: #25d366;color: #fff;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 28px;text-decoration: none;box-shadow: 0 4px 20px rgba(37,211,102,0.4);z-index: 1000;animation: pulse 2s infinite;}@keyframes pulse{0%{box-shadow: 0 0 0 0 rgba(37,211,102,0.7);}70%{box-shadow: 0 0 0 10px rgba(37,211,102,0);}100%{box-shadow: 0 0 0 0 rgba(37,211,102,0);}}.whatsapp-float:hover{transform: scale(1.1);color: #fff;}.footer{text-align: center;padding: 20px 15px;background: #f8fafc;border-top: 1px solid #e5e7eb;}.footer-text{font-size: 11px;color: #6b7280;margin-bottom: 10px;}.footer-link{color: var(--primary-color);text-decoration: none;font-weight: 600;font-size: 12px;transition: color 0.3s ease;}.footer-link:hover{color: var(--secondary-color);}.success-message{position: fixed;top: 20px;right: 20px;background: linear-gradient(45deg,#10b981,#059669);color: white;padding: 15px 20px;border-radius: 10px;font-weight: bold;z-index: 10000;box-shadow: 0 10px 30px rgba(0,0,0,0.3);animation: slideInRight 0.3s ease-out;max-width: 300px;font-size: 14px;}@keyframes slideInRight{from{opacity: 0;transform: translateX(100%);}to{opacity: 1;transform: translateX(0);}}@keyframes slideOutRight{from{opacity: 1;transform: translateX(0);}to{opacity: 0;transform: translateX(100%);}}@media (max-width: 480px){.container{margin: 10px;max-width: calc(100% - 20px);border-radius: 20px;}.content{padding: 20px;}.action-button{padding: 12px 16px;font-size: 13px;}.demos-title{font-size: 20px;}.logo-container{width: 100px;height: 100px;}.mega-share-buttons{grid-template-columns: repeat(2,1fr);padding: 10px;}.mega-share-btn{height: 60px;font-size: 18px;}.industry-grid{grid-template-columns: 1fr;}.demos-list{max-height: 280px;}.preview-content{max-width: 95%;margin: 10px;}.preview-stats{grid-template-columns: repeat(2,1fr);}.preview-feature-list{grid-template-columns: 1fr;}.preview-actions{flex-direction: column;}}@media (max-width: 320px){.mega-share-buttons{grid-template-columns: repeat(2,1fr);}.demos-stats{gap: 10px;}.stat-number{font-size: 16px;}}.loading{opacity: 0.7;pointer-events: none;}.action-button:focus,.mega-share-btn:focus,.credentials-btn:focus,.preview-btn:focus{outline: 2px solid var(--secondary-color);outline-offset: 2px;}.container:hover{transform: translateY(-2px);box-shadow: 0 30px 70px rgba(0,0,0,0.3);}.demos-list::-webkit-scrollbar{width: 6px;}.demos-list::-webkit-scrollbar-track{background: #f1f5f9;border-radius: 3px;}.demos-list::-webkit-scrollbar-thumb{background: var(--primary-color);border-radius: 3px;}.demos-list::-webkit-scrollbar-thumb:hover{background: var(--secondary-color);}.preview-content::-webkit-scrollbar{width: 6px;}.preview-content::-webkit-scrollbar-track{background: #f1f5f9;border-radius: 3px;}.preview-content::-webkit-scrollbar-thumb{background: #3b82f6;border-radius: 3px;}