En Construcción - GRUPO SAMCY S.A.S> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 50%, #0f1419 100%); color: #fff; overflow-x: hidden; min-height: 100vh; position: relative; } /* Animación de fondo con circuitos */ .circuit-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.1; z-index: 0; } .circuit-line { position: absolute; background: linear-gradient(90deg, transparent, #00ffff, transparent); animation: pulse 3s infinite; } @keyframes pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } } /* Partículas flotantes */ .particle { position: fixed; width: 4px; height: 4px; background: #00ffff; border-radius: 50%; opacity: 0.6; animation: float 15s infinite; } @keyframes float { 0%, 100% { transform: translateY(0) translateX(0); } 25% { transform: translateY(-100px) translateX(50px); } 50% { transform: translateY(-50px) translateX(-50px); } 75% { transform: translateY(-150px) translateX(100px); } } .container { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 40px 20px; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; } /* Logo y header */ .logo { font-size: 2.5rem; font-weight: bold; margin-bottom: 20px; background: linear-gradient(135deg, #00ffff, #0080ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: 0 0 30px rgba(0, 255, 255, 0.3); animation: glow 2s ease-in-out infinite; } @keyframes glow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.3); } } .shield-icon { width: 120px; height: 120px; margin-bottom: 30px; animation: rotate3d 6s infinite ease-in-out; } @keyframes rotate3d { 0%, 100% { transform: rotateY(0deg) rotateX(0deg); } 50% { transform: rotateY(180deg) rotateX(10deg); } } h1 { font-size: 3rem; margin-bottom: 20px; text-align: center; text-shadow: 0 0 20px rgba(0, 255, 255, 0.5); } .subtitle { font-size: 1.3rem; color: #00ffff; margin-bottom: 40px; text-align: center; font-weight: 300; } /* Progress bar futurista */ .progress-container { width: 100%; max-width: 600px; height: 8px; background: rgba(255, 255, 255, 0.1); border-radius: 10px; margin: 40px 0; position: relative; overflow: hidden; box-shadow: 0 0 20px rgba(0, 255, 255, 0.2); } .progress-bar { height: 100%; background: linear-gradient(90deg, #00ffff, #0080ff, #00ffff); border-radius: 10px; animation: loading 2s ease-in-out infinite; background-size: 200% 100%; box-shadow: 0 0 20px rgba(0, 255, 255, 0.8); } @keyframes loading { 0% { width: 0%; background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { width: 100%; background-position: 0% 50%; } } /* Features cards */ .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin: 50px 0; width: 100%; max-width: 900px; } .feature-card { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); border: 1px solid rgba(0, 255, 255, 0.2); border-radius: 15px; padding: 30px; text-align: center; transition: all 0.3s ease; position: relative; overflow: hidden; } .feature-card::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(0, 255, 255, 0.1) 0%, transparent 70%); opacity: 0; transition: opacity 0.3s ease; } .feature-card:hover::before { opacity: 1; } .feature-card:hover { transform: translateY(-10px); border-color: rgba(0, 255, 255, 0.6); box-shadow: 0 10px 40px rgba(0, 255, 255, 0.3); } .feature-icon { font-size: 3rem; margin-bottom: 15px; } .feature-card h3 { color: #00ffff; margin-bottom: 10px; font-size: 1.3rem; } .feature-card p { color: #aaa; line-height: 1.6; } /* Contact info */ .contact { margin-top: 50px; text-align: center; padding: 30px; background: rgba(255, 255, 255, 0.03); border-radius: 15px; border: 1px solid rgba(0, 255, 255, 0.1); } .contact a { color: #00ffff; text-decoration: none; font-weight: bold; transition: all 0.3s ease; } .contact a:hover { color: #fff; text-shadow: 0 0 10px rgba(0, 255, 255, 0.8); } /* Responsive */ @media (max-width: 768px) { h1 { font-size: 2rem; } .subtitle { font-size: 1rem; } .logo { font-size: 2rem; } .shield-icon { width: 80px; height: 80px; } } </style> </head> <body>  <div class="circuit-bg" id="circuits"></div> <div class="container">  <svg class="shield-icon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="shieldGradient" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" style="stop-color:#00ffff;stop-opacity:1" /> <stop offset="100%" style="stop-color:#0080ff;stop-opacity:1" /> </linearGradient> </defs> <path d="M50 5 L85 20 L85 45 Q85 75 50 95 Q15 75 15 45 L15 20 Z" fill="none" stroke="url(#shieldGradient)" stroke-width="2" opacity="0.8"/> <circle cx="50" cy="50" r="15" fill="url(#shieldGradient)" opacity="0.6"> <animate attributeName="r" values="15;18;15" dur="2s" repeatCount="indefinite"/> </circle> <path d="M50 35 L50 65 M35 50 L65 50" stroke="#fff" stroke-width="3" stroke-linecap="round"/> </svg> <div class="logo">GRUPO EMPRESARIAL SAMCY SAS</div> <h1>🔒 Sitio en Construcción</h1> <p class="subtitle">Fortaleciendo nuestra infraestructura digital</p> <div class="progress-container"> <div class="progress-bar"></div> </div> <div class="features"> <div class="feature-card"> <div class="feature-icon">🛡️</div> <h3>Ciberseguridad</h3> <p>Protección avanzada contra amenazas digitales</p> </div> <div class="feature-card"> <div class="feature-icon">📡</div> <h3>Monitoreo 24/7</h3> <p>Vigilancia continua de sistemas y redes</p> </div> <div class="feature-card"> <div class="feature-icon">⚡</div> <h3>Tecnología</h3> <p>Soluciones innovadoras de vanguardia</p> </div> </div> <div class="contact"> <p style="margin-bottom: 15px; font-size: 1.1rem;"> <strong>Estamos mejorando para servirte mejor</strong> </p> <p style="color: #aaa; margin-bottom: 20px;"> Mientras tanto, para consultas urgentes: </p> <p> 📧 Email: <a href="mailto:info@gesamyc.com">info@gesamyc.com</a><br> 📞 Tel: <a href="tel:+573103230891">+57 310 323 0891</a> </p> </div> </div> <script> // Crear partículas flotantes function createParticles() { const container = document.body; for (let i = 0; i < 20; i++) { const particle = document.createElement('div'); particle.className = 'particle'; particle.style.left = Math.random() * 100 + '%'; particle.style.top = Math.random() * 100 + '%'; particle.style.animationDelay = Math.random() * 5 + 's'; particle.style.animationDuration = (Math.random() * 10 + 10) + 's'; container.appendChild(particle); } } // Crear líneas de circuito animadas function createCircuitLines() { const circuits = document.getElementById('circuits'); for (let i = 0; i < 15; i++) { const line = document.createElement('div'); line.className = 'circuit-line'; const isHorizontal = Math.random() > 0.5; if (isHorizontal) { line.style.width = Math.random() * 300 + 100 + 'px'; line.style.height = '2px'; line.style.top = Math.random() * 100 + '%'; line.style.left = Math.random() * 100 + '%'; } else { line.style.width = '2px'; line.style.height = Math.random() * 300 + 100 + 'px'; line.style.top = Math.random() * 100 + '%'; line.style.left = Math.random() * 100 + '%'; } line.style.animationDelay = Math.random() * 3 + 's'; circuits.appendChild(line); } } createParticles(); createCircuitLines(); </script> </body> </html>