body { font-family: Poppins,sans-serif } {} *{} /*endBaseStyles*/ #IE-warning { display: none; position: fixed; width: 100%; height: 100%; z-index: 9999; background: white; } .IE-warning-message { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; } @media (max-width: 639px) { .global-style-vtw69z6b2 { background-image: url("https://images.groovetech.io/mOTYDauoV7CI8UXM6NZl-Hmhp5ILMNL4puNkyUmnl9A/rs:fit:0:0:0/g:no:0:0/c:0:0/aHR0cHM6Ly9hc3NldHMuZ3Jvb3ZlYXBwcy5jb20vaW1hZ2VzL2Y1OTk2YWI5LTcxMmMtNGRjNy1hNTUyLWJhYWFkNjdhZTYwZi8xNzAxODAzNTkyX01va3VwUENXZWI1RGFzQ29tcHJvbWlzby5wbmc.webp");background-size: cover;margin-left: 0px;margin-right: 0px;margin-top: 0px;margin-bottom: 0px;padding-left: 0px;padding-right: 0px;padding-top: 0px;padding-bottom: 0px;width: null;height: auto;max-width: null;z-index: auto;background-position-x: 50%;background-position-y: 50%;min-height: 50px;position: relative;background-repeat-x: no-repeat;background-repeat-y: no-repeat; } } @media (max-width: 767px) and (min-width: 640px) { .global-style-vtw69z6b2 { background-image: url("https://images.groovetech.io/mOTYDauoV7CI8UXM6NZl-Hmhp5ILMNL4puNkyUmnl9A/rs:fit:0:0:0/g:no:0:0/c:0:0/aHR0cHM6Ly9hc3NldHMuZ3Jvb3ZlYXBwcy5jb20vaW1hZ2VzL2Y1OTk2YWI5LTcxMmMtNGRjNy1hNTUyLWJhYWFkNjdhZTYwZi8xNzAxODAzNTkyX01va3VwUENXZWI1RGFzQ29tcHJvbWlzby5wbmc.webp");background-size: cover;margin-left: 0px;margin-right: 0px;margin-top: 0px;margin-bottom: 0px;padding-left: 0px;padding-right: 0px;padding-top: 0px;padding-bottom: 0px;width: null;height: auto;max-width: null;z-index: auto;background-position-x: 50%;background-position-y: 50%;min-height: 50px;position: relative;background-repeat-x: no-repeat;background-repeat-y: no-repeat; } } @media (max-width: 991px) and (min-width: 768px) { .global-style-vtw69z6b2 { background-image: url("https://images.groovetech.io/mOTYDauoV7CI8UXM6NZl-Hmhp5ILMNL4puNkyUmnl9A/rs:fit:0:0:0/g:no:0:0/c:0:0/aHR0cHM6Ly9hc3NldHMuZ3Jvb3ZlYXBwcy5jb20vaW1hZ2VzL2Y1OTk2YWI5LTcxMmMtNGRjNy1hNTUyLWJhYWFkNjdhZTYwZi8xNzAxODAzNTkyX01va3VwUENXZWI1RGFzQ29tcHJvbWlzby5wbmc.webp");background-size: cover;margin-left: 0px;margin-right: 0px;margin-top: 0px;margin-bottom: 0px;padding-left: 0px;padding-right: 0px;padding-top: 0px;padding-bottom: 0px;width: null;height: auto;max-width: null;z-index: auto;background-position-x: 50%;background-position-y: 50%;min-height: 50px;position: relative;background-repeat-x: no-repeat;background-repeat-y: no-repeat; } } @media (max-width: 1199px) and (min-width: 992px) { .global-style-vtw69z6b2 { background-image: url("https://images.groovetech.io/mOTYDauoV7CI8UXM6NZl-Hmhp5ILMNL4puNkyUmnl9A/rs:fit:0:0:0/g:no:0:0/c:0:0/aHR0cHM6Ly9hc3NldHMuZ3Jvb3ZlYXBwcy5jb20vaW1hZ2VzL2Y1OTk2YWI5LTcxMmMtNGRjNy1hNTUyLWJhYWFkNjdhZTYwZi8xNzAxODAzNTkyX01va3VwUENXZWI1RGFzQ29tcHJvbWlzby5wbmc.webp");background-size: cover;margin-left: 0px;margin-right: 0px;margin-top: 0px;margin-bottom: 0px;padding-left: 0px;padding-right: 0px;padding-top: 0px;padding-bottom: 0px;width: null;height: auto;max-width: null;z-index: auto;background-position-x: 50%;background-position-y: 50%;min-height: 50px;position: relative;background-repeat-x: no-repeat;background-repeat-y: no-repeat; } } @media (min-width: 1200px) { .global-style-vtw69z6b2 { background-image: url("https://images.groovetech.io/mOTYDauoV7CI8UXM6NZl-Hmhp5ILMNL4puNkyUmnl9A/rs:fit:0:0:0/g:no:0:0/c:0:0/aHR0cHM6Ly9hc3NldHMuZ3Jvb3ZlYXBwcy5jb20vaW1hZ2VzL2Y1OTk2YWI5LTcxMmMtNGRjNy1hNTUyLWJhYWFkNjdhZTYwZi8xNzAxODAzNTkyX01va3VwUENXZWI1RGFzQ29tcHJvbWlzby5wbmc.webp");background-size: cover;margin-left: 0px;margin-right: 0px;margin-top: 0px;margin-bottom: 0px;padding-left: 0px;padding-right: 0px;padding-top: 0px;padding-bottom: 0px;width: null;height: auto;max-width: null;z-index: auto;background-position-x: 50%;background-position-y: 50%;min-height: 50px;position: relative;background-repeat-x: no-repeat;background-repeat-y: no-repeat; } } /* Reset y variables globales */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { --color-primary: #667eea; --color-secondary: #764ba2; --color-accent: #f093fb; --color-white: #ffffff; --color-dark-text: #333; --color-light-text: #555; } html { scroll-behavior: smooth; } body { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 50%, var(--color-accent) 100%); background-attachment: fixed; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow-x: hidden; position: relative; padding: 20px; width: 100%; margin: 0; color: var(--color-light-text); } /* Burbujas flotantes de fondo */ .bubble { position: absolute; background: rgba(255, 255, 255, 0.1); border-radius: 50%; animation: float-bubble 15s infinite ease-in-out; will-change: transform; } .bubble:nth-child(1) { width: 100px; height: 100px; top: 10%; left: 10%; animation-delay: 0s; } .bubble:nth-child(2) { width: 150px; height: 150px; top: 50%; right: 5%; animation-delay: 2s; } .bubble:nth-child(3) { width: 80px; height: 80px; bottom: 20%; left: 20%; animation-delay: 4s; } .bubble:nth-child(4) { width: 120px; height: 120px; top: 60%; left: 50%; animation-delay: 1s; } .bubble:nth-child(5) { width: 90px; height: 90px; bottom: 10%; right: 15%; animation-delay: 3s; } @keyframes float-bubble { 0%, 100% { transform: translateY(0px) translateX(0px); opacity: 0.3; } 50% { transform: translateY(-30px) translateX(20px); opacity: 0.6; } } /* Contenedor principal */ .construction-container { position: relative; z-index: 10; text-align: center; max-width: 600px; width: 100%; margin: 0 auto; padding: clamp(30px, 6vw, 50px); background: rgba(255, 255, 255, 0.95); border-radius: clamp(20px, 5vw, 30px); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); backdrop-filter: blur(10px); animation: slideInUp 0.8s ease-out; } @keyframes slideInUp { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } } /* Herramientas volando */ .tools { font-size: clamp(25px, 8vw, 40px); display: inline-block; margin: 0 clamp(8px, 2vw, 15px); animation: fly-around 2s ease-in-out infinite; will-change: transform; } .tools:nth-child(1) { animation-delay: 0s; } .tools:nth-child(2) { animation-delay: 0.3s; } .tools:nth-child(3) { animation-delay: 0.6s; } @keyframes fly-around { 0% { transform: translateX(0) translateY(0) rotate(0deg); opacity: 0; } 20% { opacity: 1; } 50% { transform: translateX(40px) translateY(-40px) rotate(180deg); opacity: 1; } 80% { opacity: 1; } 100% { transform: translateX(0) translateY(0) rotate(360deg); opacity: 0; } } .tools-container { margin: clamp(20px, 4vw, 30px) 0; height: clamp(50px, 15vw, 80px); position: relative; z-index: 3; } /* Títulos */ h1 { color: var(--color-primary); font-size: clamp(28px, 6vw, 42px); margin-bottom: clamp(12px, 2vw, 15px); font-weight: 700; position: relative; z-index: 2; line-height: 1.2; } .subtitle { color: var(--color-secondary); font-size: clamp(16px, 3vw, 20px); margin-bottom: clamp(12px, 2vw, 15px); font-weight: 600; } /* Descripción */ .description { color: var(--color-light-text); font-size: clamp(14px, 2.5vw, 16px); line-height: 1.8; margin-bottom: clamp(20px, 4vw, 30px); } /* Barra de progreso animada */ .progress-bar { background: #f0f0f0; border-radius: 10px; height: 12px; margin: clamp(20px, 4vw, 30px) 0; overflow: hidden; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); } .progress-fill { height: 100%; background: linear-gradient(90deg, var(--color-primary), var(--color-secondary), var(--color-accent)); border-radius: 10px; width: 0%; animation: progress-animate 3s ease-in-out infinite; will-change: width; } @keyframes progress-animate { 0% { width: 0%; } 50% { width: 85%; } 100% { width: 0%; } } /* Mensaje ingenioso */ .funny-message { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); color: white; padding: clamp(15px, 3vw, 20px); border-radius: 15px; margin: clamp(20px, 4vw, 25px) 0; font-size: clamp(13px, 2.5vw, 15px); font-weight: 500; position: relative; overflow: hidden; } .funny-message::before { content: '✨'; position: absolute; right: -30px; top: -30px; font-size: 80px; opacity: 0.1; animation: sparkle 3s ease-in-out infinite; will-change: transform; } @keyframes sparkle { 0%, 100% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.2); } } /* Botón WhatsApp Prominente */ .whatsapp-section { margin-top: clamp(25px, 5vw, 35px); padding-top: clamp(20px, 4vw, 30px); border-top: 2px solid #f0f0f0; display: flex; justify-content: center; } .whatsapp-button { display: inline-flex; align-items: center; justify-content: center; gap: clamp(8px, 2vw, 12px); padding: clamp(14px, 3vw, 18px) clamp(25px, 5vw, 35px); background: linear-gradient(135deg, #25D366 0%, #20BA5A 100%); color: white; text-decoration: none; border-radius: 15px; font-size: clamp(14px, 2.5vw, 18px); font-weight: 700; font-family: 'Poppins', sans-serif; cursor: pointer; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); box-shadow: 0 10px 30px rgba(37, 211, 102, 0.3); width: 100%; max-width: 320px; border: none; animation: pulse-whatsapp 2s ease-in-out infinite; will-change: transform; } .whatsapp-button:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 15px 40px rgba(37, 211, 102, 0.4); } .whatsapp-button:active { transform: translateY(-1px); } .whatsapp-button:focus { outline: 2px solid var(--color-primary); outline-offset: 2px; } .whatsapp-icon { font-size: clamp(18px, 4vw, 24px); display: inline-block; animation: bounce-whatsapp 2s ease-in-out infinite; will-change: transform; } .whatsapp-text { font-weight: 700; white-space: normal; } .whatsapp-arrow { font-size: clamp(16px, 3vw, 20px); animation: slide-arrow 1.5s ease-in-out infinite; will-change: transform; } @keyframes pulse-whatsapp { 0%, 100% { box-shadow: 0 10px 30px rgba(37, 211, 102, 0.3); } 50% { box-shadow: 0 10px 40px rgba(37, 211, 102, 0.5); } } @keyframes bounce-whatsapp { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @keyframes slide-arrow { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } } /* Elementos decorativos */ .decoration { position: absolute; font-size: clamp(24px, 5vw, 30px); opacity: 0.6; animation: float-decoration 3s ease-in-out infinite; will-change: transform; } .decoration:nth-child(1) { top: 20px; right: 20px; animation-delay: 0s; } .decoration:nth-child(2) { bottom: 20px; left: 20px; animation-delay: 0.5s; } .decoration:nth-child(3) { top: 50%; right: 10px; animation-delay: 1s; } @keyframes float-decoration { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-15px); } } /* Social links */ .social-links { margin-top: clamp(20px, 4vw, 25px); display: flex; gap: clamp(12px, 3vw, 15px); justify-content: center; flex-wrap: wrap; list-style: none; } .social-link { display: inline-flex; align-items: center; justify-content: center; width: clamp(45px, 10vw, 50px); height: clamp(45px, 10vw, 50px); border-radius: 50%; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); color: white; text-decoration: none; font-size: clamp(20px, 5vw, 24px); transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); will-change: transform; } .social-link:hover { transform: translateY(-5px) scale(1.1); box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3); } .social-link:focus { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* Efecto de digitación */ .typing { display: inline-block; } .typing::after { content: '|'; animation: blink 0.7s infinite; } @keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } /* Responsive */ @media (max-width: 768px) { body { padding: 15px; } .construction-container { padding: clamp(25px, 5vw, 40px); } } @media (max-width: 480px) { body { padding: 12px; } .construction-container { padding: clamp(20px, 4vw, 30px); border-radius: clamp(15px, 4vw, 20px); } .whatsapp-button { width: 100%; } .whatsapp-text { font-size: clamp(12px, 2vw, 14px); } } /* Accesibilidad */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }