/* Reset and Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Performance optimizations */ html { scroll-behavior: smooth; /* Enable hardware acceleration for better performance */ transform: translateZ(0); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background-color: var(--bg-page); color: var(--text-primary); line-height: 1.6; overflow-x: hidden; /* Performance improvements */ text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Enable hardware acceleration for animations */ will-change: auto; transform: translateZ(0); /* Mobile menu scroll lock */ transition: overflow 0.3s ease; } body.menu-open { overflow: hidden; position: fixed; width: 100%; } /* Optimize image loading and rendering */ img { /* Improve image rendering quality */ image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; /* Enable lazy loading detection */ loading: lazy; /* Performance hints */ will-change: transform; } /* Optimize scrolling performance */ * { /* Improve scroll performance */ scroll-behavior: smooth; /* Hardware acceleration for transforms */ -webkit-transform: translateZ(0); transform: translateZ(0); } /* CSS Variables (Design Tokens) - LIGHT MODE */ :root { /* Colors - Light Theme */ --bg-page: #FFFFFF; --bg-surface: #F8F9FA; --primary-500: #A5D774; --secondary-500: #0078D4; --text-primary: #495057; --text-secondary: #868e96; --border-subtle: #DEE2E6; --black-pure: #000000; --semantic-success: #28A745; --semantic-error: #DC3545; /* Typography */ --font-family: 'Inter', sans-serif; --text-xs: 14px; --text-sm: 16px; --text-base: 18px; --text-lg: 24px; --text-xl: 32px; --text-2xl: 48px; --text-3xl: 72px; /* Spacing */ --space-xs: 8px; --space-sm: 16px; --space-md: 24px; --space-lg: 32px; --space-xl: 48px; --space-2xl: 64px; --space-3xl: 96px; /* Border Radius */ --radius-sm: 8px; --radius-md: 12px; /* Transitions */ --transition-fast: 250ms ease-out; --transition-normal: 300ms ease-out; --transition-slow: 600ms ease-out; } /* Container */ .container { max-width: 1280px; margin: 0 auto; padding: 0 var(--space-sm); } /* Typography */ h1 { font-size: var(--text-3xl); font-weight: 700; line-height: 1.1; } h2 { font-size: var(--text-2xl); font-weight: 700; line-height: 1.2; } h3 { font-size: var(--text-lg); font-weight: 600; line-height: 1.3; } h4 { font-size: var(--text-sm); font-weight: 600; line-height: 1.5; } p { font-size: var(--text-base); font-weight: 400; line-height: 1.7; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-md) var(--space-xl); border-radius: var(--radius-lg); font-weight: 700; font-size: var(--text-base); text-decoration: none; cursor: pointer; transition: all var(--transition-fast); border: none; min-height: 64px; position: relative; overflow: hidden; text-transform: uppercase; letter-spacing: 0.5px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } .btn-primary { background: linear-gradient(135deg, var(--primary-500) 0%, #A8D465 100%); color: var(--black-pure); position: relative; } .btn-primary::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); transition: left 0.5s; } .btn-primary:hover { background: linear-gradient(135deg, #9BC565 0%, var(--primary-500) 100%); transform: scale(1.05) translateY(-2px); box-shadow: 0 8px 25px rgba(165, 215, 116, 0.4); } .btn-primary:hover::before { left: 100%; } .btn-primary:active { transform: scale(0.97); transition: transform 0.1s; } .btn-secondary { background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.1) 100%); color: var(--text-primary); border: 2px solid var(--text-primary); backdrop-filter: blur(10px); } .btn-secondary:hover { background: linear-gradient(135deg, var(--text-primary) 0%, rgba(255, 255, 255, 0.2) 100%); color: var(--bg-page); transform: scale(1.05) translateY(-2px); box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2); } .btn-secondary:active { transform: scale(0.97); transition: transform 0.1s; } /* Header */ .header { position: fixed; top: 0; left: 0; right: 0; background: #000000; backdrop-filter: blur(10px); z-index: 1000; border-bottom: 1px solid #333333; /* Fondo negro para header */ transition: background 0.3s ease; } /* Asegurar visibilidad de elementos en header negro */ .header .nav-link { color: #FFFFFF !important; } .header .nav-link:hover { color: var(--primary-500) !important; } .header .brand-text { color: #FFFFFF !important; } .nav { display: flex; align-items: center; justify-content: space-between; padding: var(--space-sm) 0; position: relative; } /* Premium Header Navigation Container */ .nav-menu { display: flex; align-items: center; gap: var(--space-md); position: relative; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 16px; padding: var(--space-xs) var(--space-md); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.2); transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1); } .nav-menu::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, rgba(165, 215, 116, 0.8) 25%, rgba(168, 212, 101, 0.9) 50%, rgba(165, 215, 116, 0.8) 75%, transparent 100%); background-size: 200% 100%; border-radius: 20px 20px 0 0; animation: shimmer 3s ease-in-out infinite; opacity: 0; transition: opacity 0.4s ease; } .nav-menu:hover::before { opacity: 1; } .nav-brand { display: flex; align-items: center; gap: var(--space-sm); position: relative; z-index: 2; } /* Premium Brand Logo */ .brand-logo { width: 36px; height: 36px; background: linear-gradient(135deg, var(--primary-500) 0%, #8BC34A 50%, var(--primary-500) 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; box-shadow: 0 6px 20px rgba(165, 215, 116, 0.3), 0 2px 8px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3); transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1); animation: brandPulse 4s ease-in-out infinite; } .brand-logo::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8IS0tIE9jdGFnb24gYmFja2dyb3VuZCAtLT4KICA8cGF0aCBkPSJNMjAgNUwzMCAxMEwzNSAyMEwzMCAzMEwyMCAzNUwxMCAzMEw1IDIwTDEwIDEwTDIwIDVaIiBmaWxsPSIjQTVENzc0IiBzdHJva2U9IiNBNUQ3NzQiIHN0cm9rZS13aWR0aD0iMSIvPgogIAogIDwhLS0gQ2VudHJhbCBpY29uIC0gcmVwcmVzZW50cyB0ZWNobm9sb2d5IG5vZGVzL2Nvbm5lY3Rpb25zIC0tPgogIDxnIGZpbGw9IiMwMTAxMDEiPgogICAgPCEtLSBUb3Agbm9kZSAtLT4KICAgIDxjaXJjbGUgY3g9IjIwIiBjeT0iMTIiIHI9IjIiLz4KICAgIDwhLS0gUmlnaHQgbm9kZSAtLT4KICAgIDxjaXJjbGUgY3g9IjI4IiBjeT0iMjAiIHI9IjIiLz4KICAgIDwhLS0gQm90dG9tIG5vZGUgLS0+CiAgICA8Y2lyY2xlIGN4PSIyMCIgY3k9IjI4IiByPSIyIi8+CiAgICA8IS0tIExlZnQgbm9kZSAtLT4KICAgIDxjaXJjbGUgY3g9IjEyIiBjeT0iMjAiIHI9IjIiLz4KICAgIDwhLS0gQ2VudHJhbCBwb2ludCAtLT4KICAgIDxjaXJjbGUgY3g9IjIwIiBjeT0iMjAiIHI9IjEuNSIvPgogICAgCiAgICA8IS0tIENvbm5lY3Rpb24gbGluZXMgLS0+CiAgICA8cGF0aCBkPSJNMjAgMTRMMjAgMTgiIHN0cm9rZT0iIzAxMDEwMSIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgogICAgPHBhdGggZD0iTTIyIDIwTDI2IDIwIiBzdHJva2U9IiMwMTAxMDEiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KICAgIDxwYXRoIGQ9Ik0yMCAyMkwyMCAyNiIgc3Ryb2tlPSIjMDEwMTAxIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CiAgICA8cGF0aCBkPSJNMTggMjBMMTQgMjAiIHN0cm9rZT0iIzAxMDEwMSIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgogIDwvZz4KPC9zdmc+'); background-size: contain; background-repeat: no-repeat; background-position: center; transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1); animation: logoGlow 3s ease-in-out infinite alternate; } .brand-logo::after { content: ''; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.4) 50%, transparent 70%); border-radius: 8px; transform: translate(-50%, -50%) rotate(45deg); transition: all 0.6s ease; opacity: 0; } .brand-logo:hover { transform: scale(1.05) rotateY(5deg); box-shadow: 0 8px 25px rgba(165, 215, 116, 0.4), 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.4); } .brand-logo:hover::after { animation: logoShine 0.8s ease-in-out; opacity: 1; } .brand-logo:hover::before { animation: logoGlow 0.6s ease-in-out forwards; filter: brightness(1.1) contrast(1.2); } .logo { width: 40px; height: 40px; } .brand-text { font-size: var(--text-lg); font-weight: 700; color: #FFFFFF; } /* Footer brand text - blanco para máximo contraste */ .footer-brand .brand-text { color: #FFFFFF; } .nav-menu { display: flex; align-items: center; gap: var(--space-lg); } .nav-link { color: #FFFFFF; text-decoration: none; font-weight: 500; font-size: 0.95rem; padding: var(--space-xs) var(--space-sm); border-radius: 10px; position: relative; display: flex; align-items: center; gap: 6px; transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1); overflow: hidden; cursor: pointer; } /* Iconos para cada sección del menú desktop - SOLO CONTACTO */ .nav-link[data-section="contacto"]::before { content: ''; width: 20px; height: 20px; background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMtMXMtNCAyIC00IDQgdjEyaDIyVjMgcS0yIDAtMy0zVjdBMjIgMjIgMCAwIDEgMjEgM1Y3LjJDMTcuOCAzIDE0LjQgNC4xIDExIDUuNUM3LjYgNi4yIDUgNy44IDMgOS4xQzEgMTAuNCAxIDExLjkgMSAxM3Y4djE2SDMuMDFWMjNDNC4xNCAyMyAzIDIzIDMgMjMuM1Y3LjhDMyA3LjIuNSA2LjUgLjUgNUEyMiAyMiAwIDAgMSAzIDMuMVptMjEtM3MtNSAyIC01IDQgNnY4aDIydi04cS0yIDAtMy0zVjYuMUMyMCA2LjYgMTguOSA2LjEgMTcuNiA2QTIyIDIyIDAgMCAxIDQuNSAxMFY3LjFMMjQgMjRWMjNDMjMuNSAyMyAyMyAyMyAyMyAyM1Y4LjhBMjIgMjIgMCAwIDEgMjQuNSA2LjVWNy43QTIyIDIyIDAgMCAxIDQzIDMuMVpNMjQgMjEuNUwyMS43IDIuNUMxOS43IDIgMTcuOSAzIDE2IDQuMUMxMy40IDUuNCAxMS41IDYuOCAxMC4yIDguOEM4LjggMTEuNyA4LjQgMTQuNSAxMC4yIDE2LjZMMjMuOSAyM0wyNCAyMS41WiIgZmlsbD0iI2ZmZmZmZiIvPgo8L3N2Zz4=') no-repeat center; background-size: contain; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2)); transition: all 0.3s ease; } /* Estados hover premium */ .nav-link::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%); transition: left 0.6s ease; z-index: -1; } .nav-link:hover { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #FFFFFF; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(165, 215, 116, 0.25), 0 4px 12px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3); } .nav-link:hover::after { left: 100%; } .nav-link:hover::before { transform: scale(1.2); filter: drop-shadow(0 2px 4px rgba(165, 215, 116, 0.5)); } .nav-link.cta { background: linear-gradient(135deg, var(--primary-500) 0%, #8BC34A 50%, var(--primary-500) 100%); color: var(--black-pure) !important; padding: var(--space-xs) var(--space-md); border-radius: 10px; font-weight: 700; font-size: 0.95rem; position: relative; overflow: hidden; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 6px 20px rgba(165, 215, 116, 0.3), 0 2px 8px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3); animation: ctaGradient 4s ease-in-out infinite; transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1); } .nav-link.cta::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%); border-radius: 50%; transition: all 0.6s ease; transform: translate(-50%, -50%); } .nav-link.cta:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 12px 35px rgba(165, 215, 116, 0.4), 0 6px 20px rgba(0, 0, 0, 0.15), inset 0 2px 0 rgba(255, 255, 255, 0.4); animation-duration: 2s; } .nav-link.cta:hover::before { width: 200%; height: 200%; } .nav-link.cta:active { transform: translateY(-1px) scale(0.98); transition: all 0.1s ease; } /* Ripple effect */ .nav-link.cta::after { content: ''; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; background: rgba(255, 255, 255, 0.6); border-radius: 50%; transform: translate(-50%, -50%); animation: ripple 0.6s ease-out; opacity: 0; pointer-events: none; } .nav-link.cta:active::after { animation: ripple 0.6s ease-out; opacity: 1; } .nav-actions { display: flex; align-items: center; gap: var(--space-sm); } .language-selector { display: flex; gap: var(--space-xs); } .flag { font-size: var(--text-lg); cursor: pointer; transition: transform var(--transition-fast); } .flag:hover { transform: scale(1.2); } /* Mobile Menu Styles - UX Enhanced */ .mobile-menu-button { display: none; flex-direction: column; justify-content: space-around; width: 44px; height: 44px; background: rgba(255, 255, 255, 0.1); border: 2px solid rgba(255, 255, 255, 0.2); border-radius: 12px; cursor: pointer; padding: 8px; z-index: 1001; backdrop-filter: blur(10px); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; } .mobile-menu-button:hover { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.3); transform: scale(1.05); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); } .hamburger-line { width: 100%; height: 2.5px; background: #FFFFFF; border-radius: 2px; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); transform-origin: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } .mobile-menu-button.active .hamburger-line:nth-child(1) { transform: rotate(45deg) translate(8px, 8px); background: var(--primary-500); box-shadow: 0 0 10px rgba(165, 215, 116, 0.5); } .mobile-menu-button.active .hamburger-line:nth-child(2) { opacity: 0; } .mobile-menu-button.active .hamburger-line:nth-child(3) { transform: rotate(-45deg) translate(7px, -6px); background: var(--primary-500); box-shadow: 0 0 10px rgba(165, 215, 116, 0.5); } .mobile-menu-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(20px); z-index: 1000; opacity: 0; visibility: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .mobile-menu-overlay.active { opacity: 1; visibility: visible; } .mobile-menu { position: fixed; top: 0; right: 0; width: 320px; height: 100vh; background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 249, 250, 0.98) 100%); border-left: 1px solid rgba(0, 0, 0, 0.1); backdrop-filter: blur(30px); transform: translateX(100%); transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1001; display: flex; flex-direction: column; box-shadow: -20px 0 60px rgba(0, 0, 0, 0.1); } .mobile-menu-overlay.active .mobile-menu { transform: translateX(0); } .mobile-menu-header { display: flex; align-items: center; justify-content: space-between; padding: 24px 24px; border-bottom: 1px solid rgba(0, 0, 0, 0.08); background: linear-gradient(90deg, rgba(165, 215, 116, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%); position: relative; overflow: hidden; } .mobile-menu-header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--primary-500), #A8D465, var(--primary-500)); background-size: 200% 100%; animation: shimmer 3s ease-in-out infinite; } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* Branding mejorado en header */ .mobile-menu-header .nav-brand, .mobile-menu .nav-brand { display: flex; align-items: center; gap: 12px; } .mobile-menu-header .brand-logo, .mobile-menu .nav-brand .brand-logo { width: 32px; height: 32px; background: linear-gradient(135deg, var(--primary-500), #8BC34A); border-radius: 8px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(165, 215, 116, 0.3); animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } .mobile-menu-header .brand-logo::before, .mobile-menu .nav-brand .brand-logo::before { content: 'CT'; color: white; font-size: 14px; font-weight: 800; letter-spacing: 0.5px; } .mobile-menu-header .brand-text, .mobile-menu .nav-brand .brand-text { color: var(--text-primary) !important; font-size: 1.25rem; font-weight: 700; letter-spacing: 0.5px; background: linear-gradient(135deg, var(--text-primary) 0%, var(--primary-500) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .mobile-menu-content { flex: 1; display: flex; flex-direction: column; padding: 32px 0; gap: 4px; } /* Enlaces de navegación con iconografía moderna */ .mobile-nav-link { display: flex; align-items: center; gap: 16px; color: var(--text-primary); text-decoration: none; font-size: 1.125rem; font-weight: 500; padding: 20px 32px; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); border-left: 4px solid transparent; position: relative; margin: 2px 16px; border-radius: 12px; background: transparent; } /* Iconos para cada sección */ .mobile-nav-link[data-section="nosotros"]::before { content: ''; width: 24px; height: 24px; background: url('data:image/svg+xml,') no-repeat center; background-size: contain; transition: all 0.3s ease; } .mobile-nav-link[data-section="servicios"]::before { content: ''; width: 24px; height: 24px; background: url('data:image/svg+xml,') no-repeat center; background-size: contain; transition: all 0.3s ease; } .mobile-nav-link[data-section="contacto"]::before { content: ''; width: 24px; height: 24px; background: url('data:image/svg+xml,') no-repeat center; background-size: contain; transition: all 0.3s ease; } /* Estados de interacción mejorados */ .mobile-nav-link:hover { background: linear-gradient(135deg, rgba(165, 215, 116, 0.1) 0%, rgba(165, 215, 116, 0.05) 100%); color: var(--primary-600); border-left-color: var(--primary-500); transform: translateX(8px); box-shadow: 0 4px 20px rgba(165, 215, 116, 0.15); } .mobile-nav-link:hover::before { transform: scale(1.1) rotate(5deg); filter: brightness(1.2); } /* Estado activo para indicar sección actual */ .mobile-nav-link.active { background: linear-gradient(135deg, var(--primary-500) 0%, rgba(165, 215, 116, 0.8) 100%); color: white !important; border-left-color: #8BC34A; transform: translateX(4px); box-shadow: 0 6px 25px rgba(165, 215, 116, 0.4); } .mobile-nav-link.active::before { filter: brightness(0) invert(1); transform: scale(1.1); } /* Botón CTA de Contacto con efectos premium */ .mobile-nav-link.cta { background: linear-gradient(135deg, var(--primary-500) 0%, #A8D465 50%, #8BC34A 100%); background-size: 200% 200%; color: white !important; margin: 24px 16px; padding: 18px 24px; border-radius: 16px; font-weight: 700; font-size: 1.125rem; text-align: center; border-left: none; position: relative; overflow: hidden; box-shadow: 0 8px 32px rgba(165, 215, 116, 0.3); animation: gradientShift 3s ease infinite; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .mobile-nav-link.cta::before { background: linear-gradient(135deg, #8BC34A 0%, #7CB342 100%); content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: inherit; opacity: 0; transition: opacity 0.3s ease; } .mobile-nav-link.cta span { position: relative; z-index: 1; } @keyframes gradientShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .mobile-nav-link.cta:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 12px 40px rgba(165, 215, 116, 0.4); } .mobile-nav-link.cta:hover::before { opacity: 1; } .mobile-nav-link.cta:active { transform: translateY(0) scale(0.98); transition: all 0.1s ease; } /* Añadir atributo data-section para iconografía */ .mobile-nav-link[data-section="contacto"] { /* El icono de contacto ya se define arriba */ } /* Botón de cerrar mejorado */ .mobile-menu-close { background: rgba(165, 215, 116, 0.1); border: 2px solid rgba(165, 215, 116, 0.3); color: var(--text-primary); cursor: pointer; padding: 12px; border-radius: 12px; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } .mobile-menu-close::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: radial-gradient(circle, rgba(165, 215, 116, 0.3) 0%, transparent 70%); border-radius: 50%; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); transform: translate(-50%, -50%); } .mobile-menu-close:hover { color: var(--primary-600); border-color: var(--primary-500); background: rgba(165, 215, 116, 0.15); transform: scale(1.1); box-shadow: 0 8px 25px rgba(165, 215, 116, 0.2); } .mobile-menu-close:hover::before { width: 100%; height: 100%; } .mobile-menu-close svg { width: 24px; height: 24px; transition: transform 0.3s ease; position: relative; z-index: 1; } .mobile-menu-close:hover svg { transform: rotate(90deg); } /* Animaciones de entrada escalonadas para elementos del menú */ .mobile-menu-overlay.active .mobile-nav-link { animation: slideInRight 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards; } .mobile-menu-overlay.active .mobile-nav-link:nth-child(1) { animation-delay: 0.1s; } .mobile-menu-overlay.active .mobile-nav-link:nth-child(2) { animation-delay: 0.2s; } .mobile-menu-overlay.active .mobile-nav-link:nth-child(3) { animation-delay: 0.3s; } @keyframes slideInRight { 0% { transform: translateX(100px); opacity: 0; visibility: hidden; } 100% { transform: translateX(0); opacity: 1; visibility: visible; } } /* Efecto de ripple para mejor feedback táctil */ .mobile-nav-link::after { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: radial-gradient(circle, rgba(165, 215, 116, 0.2) 0%, transparent 70%); border-radius: 50%; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); transform: translate(-50%, -50%); pointer-events: none; } .mobile-nav-link:active::after { width: 300px; height: 300px; } /* Mejorar accesibilidad con focus states */ .mobile-nav-link:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px; background: rgba(165, 215, 116, 0.1); } .mobile-menu-close:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px; } .mobile-menu-button:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 4px; } .hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); } .hero-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; overflow: hidden; } .hero-bg::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle at 20% 80%, rgba(165, 215, 116, 0.15) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(138, 201, 38, 0.1) 0%, transparent 50%), radial-gradient(circle at 40% 40%, rgba(165, 215, 116, 0.05) 0%, transparent 50%); animation: floating 20s ease-in-out infinite; } .hero-image { width: 100%; height: 120%; object-fit: cover; object-position: center; transform: translateY(0); transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; } .hero-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(248, 249, 250, 0.1) 0%, rgba(255, 255, 255, 0.7) 100%), radial-gradient(circle at center, rgba(165, 215, 116, 0.05) 0%, transparent 70%); backdrop-filter: blur(0.5px); } .hero-content { position: relative; z-index: 2; padding: var(--space-3xl) 0; width: 100%; } .hero-text { max-width: 900px; margin: 0 auto; text-align: center; opacity: 0; animation: heroFadeInUp 1.2s ease-out 0.3s forwards; } /* Premium Hero Title with Advanced Typography */ .hero-title { font-size: clamp(56px, 10vw, 84px); font-weight: 900; margin-bottom: var(--space-md); letter-spacing: -0.02em; line-height: 0.9; /* Fallback para accesibilidad */ color: var(--primary-500); -webkit-text-fill-color: var(--primary-500); /* Advanced gradient with animation */ background: linear-gradient(135deg, var(--primary-500) 0%, var(--secondary-500) 50%, var(--primary-500) 100%); background-size: 200% 200%; -webkit-background-clip: text; background-clip: text; animation: gradientShift 4s ease-in-out infinite, heroFadeInUp 1s ease-out 0.6s forwards; opacity: 0; /* Premium text shadow */ text-shadow: 0 0 30px rgba(165, 215, 116, 0.3), 0 2px 4px rgba(0, 0, 0, 0.1); /* Interactive glow effect */ transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .hero-title:hover { filter: brightness(1.1); transform: scale(1.02); text-shadow: 0 0 40px rgba(165, 215, 116, 0.5), 0 4px 8px rgba(0, 0, 0, 0.15); } /* Premium Hero Subtitle with Typing Effect */ .hero-subtitle { font-size: clamp(18px, 2.5vw, 24px); font-weight: 500; color: var(--text-secondary); margin-bottom: var(--space-lg); letter-spacing: 0.1em; text-transform: uppercase; opacity: 0; animation: heroFadeInLeft 1s ease-out 1s forwards; position: relative; } .hero-subtitle::before { content: ''; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 0; height: 3px; background: linear-gradient(90deg, var(--primary-500), var(--secondary-500)); border-radius: 2px; animation: underlineExpand 1s ease-out 1.5s forwards; } .hero-description { font-size: clamp(28px, 5vw, 40px); font-weight: 700; margin-bottom: var(--space-sm); line-height: 1.2; opacity: 0; animation: heroFadeInRight 1s ease-out 1.2s forwards; background: linear-gradient(135deg, var(--text-primary), var(--text-secondary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero-description-highlight { font-size: clamp(28px, 5vw, 40px); font-weight: 700; margin-bottom: var(--space-xl); line-height: 1.2; opacity: 0; animation: heroFadeInUp 1s ease-out 1.4s forwards; /* Premium gradient with animation */ background: linear-gradient(135deg, var(--primary-500) 0%, var(--secondary-500) 50%, var(--primary-500) 100%); background-size: 200% 200%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: gradientShift 3s ease-in-out infinite, heroFadeInUp 1s ease-out 1.4s forwards; } /* Premium Hero CTAs */ .hero-cta { display: flex; gap: var(--space-lg); margin-bottom: var(--space-3xl); flex-wrap: wrap; justify-content: center; padding: var(--space-xl) 0; opacity: 0; animation: heroFadeInUp 1s ease-out 1.6s forwards; } .hero-cta .btn { min-width: 220px; font-size: var(--text-lg); padding: var(--space-lg) var(--space-2xl); border-radius: var(--radius-xl); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); position: relative; overflow: hidden; /* Premium hover effects */ transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .hero-cta .btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); transition: left 0.6s; } .hero-cta .btn:hover::before { left: 100%; } .hero-cta .btn:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2); } .hero-cta .btn:active { transform: translateY(-1px) scale(1.02); } /* Premium Hero Stats */ .hero-stats { display: flex; gap: var(--space-xl); flex-wrap: wrap; justify-content: center; margin-top: var(--space-2xl); opacity: 0; animation: heroFadeInUp 1s ease-out 1.8s forwards; } .stat { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--space-lg); border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } .stat::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--primary-500), var(--secondary-500)); transform: scaleX(0); transform-origin: left; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .stat:hover::before { transform: scaleX(1); } .stat:hover { transform: translateY(-5px); background: rgba(255, 255, 255, 0.15); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .stat-number { font-size: clamp(24px, 4vw, 32px); font-weight: 800; color: var(--primary-500); margin-bottom: var(--space-xs); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .stat-label { font-size: var(--text-sm); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; line-height: 1.4; } /* Premium Sections with Scroll Animations */ .section { padding: 120px 0; position: relative; overflow: hidden; } .section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--primary-500), transparent); opacity: 0; animation: sectionDivider 1s ease-out 2s forwards; } .section-header { text-align: center; margin-bottom: var(--space-xl); opacity: 0; animation: slideInUp 0.8s ease-out 0.3s forwards; } .section-title { margin-bottom: var(--space-md); font-size: clamp(32px, 5vw, 48px); font-weight: 800; line-height: 1.2; /* Premium gradient text */ background: linear-gradient(135deg, var(--text-primary), var(--primary-500)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; position: relative; } .section-title::after { content: ''; position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); width: 80px; height: 4px; background: linear-gradient(90deg, var(--primary-500), var(--secondary-500)); border-radius: 2px; opacity: 0; animation: titleUnderline 0.8s ease-out 0.8s forwards; } .section-description { font-size: clamp(18px, 2.5vw, 22px); color: var(--text-secondary); max-width: 700px; margin: 0 auto; line-height: 1.7; font-weight: 400; } /* Process Section */ .process-section { background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); position: relative; } .process-header { text-align: center; margin-bottom: var(--space-xl); } .process-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-xl); margin-top: var(--space-2xl); } /* Ensure desktop layout is maintained */ @media (min-width: 769px) { section .process-steps { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; } } .process-step { background: rgba(248, 249, 250, 0.8); border: 1px solid var(--border-subtle); border-radius: var(--border-radius-lg); padding: var(--space-xl); text-align: center; transition: all 0.3s ease; position: relative; overflow: hidden; } .process-step::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #A5D774 0%, #8BC34A 50%, #689F38 100%); transform: scaleX(0); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 2px 2px 0 0; } .process-step:hover::before { transform: scaleX(1); } .process-step:hover { transform: translateY(-8px); background: rgba(165, 215, 116, 0.08); border-color: rgba(165, 215, 116, 0.2); box-shadow: 0 12px 32px rgba(165, 215, 116, 0.15); } .step-number { position: absolute; top: -12px; right: -12px; background: linear-gradient(135deg, #A5D774 0%, #8BC34A 100%); color: #0A0A0A; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--text-sm); box-shadow: 0 4px 16px rgba(165, 215, 116, 0.5); border: 2px solid #0A0A0A; transition: all 0.3s ease; } .process-step:hover .step-number { transform: scale(1.1) rotate(5deg); box-shadow: 0 6px 20px rgba(165, 215, 116, 0.7); } .step-icon { margin-bottom: var(--space-md); display: flex; align-items: center; justify-content: center; position: relative; transition: all 0.3s ease; min-height: 80px; } .process-step:hover .step-icon { transform: translateY(-2px); } .step-icon svg { font-size: 3rem; width: 70px; height: 70px; color: var(--primary-500); filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)); transition: transform 0.3s ease; display: block; } .process-step:hover .step-icon svg { transform: scale(1.1) rotate(5deg); } /* Removed border animation to prevent icon overlapping */ .step-content { margin-top: var(--space-md); } .step-title { font-size: var(--text-xl); font-weight: 600; margin-bottom: var(--space-sm); color: var(--text-primary); } .step-description { color: var(--text-secondary); line-height: 1.6; font-size: var(--text-base); } /* Call-to-Action Step Styles */ .process-step-cta { background: linear-gradient(135deg, rgba(165, 215, 116, 0.1) 0%, rgba(139, 195, 74, 0.05) 100%); border: 2px solid rgba(165, 215, 116, 0.3); position: relative; overflow: hidden; } .process-step-cta::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #A5D774 0%, #8BC34A 50%, #689F38 100%); transform: scaleX(1); border-radius: 2px 2px 0 0; } .process-step-cta:hover { transform: translateY(-8px); background: linear-gradient(135deg, rgba(165, 215, 116, 0.15) 0%, rgba(139, 195, 74, 0.08) 100%); border-color: rgba(165, 215, 116, 0.5); box-shadow: 0 12px 32px rgba(165, 215, 116, 0.25); } .process-step-cta:hover::before { transform: scaleX(1); } .process-step-cta .step-number { display: none; } .cta-icon { margin-bottom: var(--space-sm); } .cta-icon img { width: 70px; height: 70px; object-fit: contain; transition: transform 0.3s ease; filter: drop-shadow(0 4px 8px rgba(165, 215, 116, 0.3)); } .process-step-cta:hover .cta-icon img { transform: scale(1.1) rotate(5deg); filter: drop-shadow(0 6px 12px rgba(165, 215, 116, 0.4)); } .cta-content { text-align: center; } .cta-subtitle { font-size: var(--text-base); font-weight: 600; color: #A5D774; margin-bottom: var(--space-xs); text-transform: uppercase; letter-spacing: 0.3px; } .cta-description { font-size: var(--text-sm); margin-bottom: var(--space-sm); font-weight: 500; color: var(--text-primary); } .cta-button { display: inline-flex; align-items: center; gap: var(--space-xs); background: linear-gradient(135deg, #A5D774 0%, #8BC34A 100%); color: #0A0A0A; padding: var(--space-xs) var(--space-sm); border-radius: var(--border-radius-sm); text-decoration: none; font-weight: 600; font-size: var(--text-sm); transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(165, 215, 116, 0.3); border: 1px solid #A5D774; position: relative; overflow: hidden; } .cta-button::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s ease; } .cta-button:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(165, 215, 116, 0.4); background: linear-gradient(135deg, #8BC34A 0%, #689F38 100%); border-color: #8BC34A; } .cta-button:hover::before { left: 100%; } .cta-button svg { transition: transform 0.3s ease; } .cta-button:hover svg { transform: translateX(2px); } /* Responsive design for CTA */ @media (max-width: 768px) { .cta-icon { margin-bottom: var(--space-xs); } .cta-icon img { width: 60px; height: 60px; } .cta-subtitle { font-size: var(--text-sm); } .cta-description { font-size: var(--text-xs); margin-bottom: var(--space-xs); } .cta-button { padding: var(--space-xs) var(--space-sm); font-size: var(--text-xs); width: 100%; justify-content: center; } } /* Premium Mobile Optimizations */ @media (max-width: 768px) { /* Hero Mobile Premium */ .hero { min-height: 90vh; padding-top: var(--space-2xl); } .hero-content { padding: var(--space-2xl) 0; } .hero-text { text-align: center; padding: 0 var(--space-sm); } .hero-title { font-size: clamp(40px, 8vw, 56px); margin-bottom: var(--space-sm); } .hero-description, .hero-description-highlight { font-size: clamp(22px, 4vw, 28px); margin-bottom: var(--space-md); } .hero-cta { flex-direction: column; align-items: center; gap: var(--space-md); margin-bottom: var(--space-xl); } .hero-cta .btn { width: 100%; max-width: 280px; min-width: unset; } .hero-stats { flex-direction: column; gap: var(--space-md); width: 100%; } .stat { padding: var(--space-md); width: 100%; max-width: 300px; margin: 0 auto; } /* Section Mobile Premium */ .section { padding: var(--space-3xl) 0; } .section-header { margin-bottom: var(--space-2xl); padding: 0 var(--space-sm); } .section-title { font-size: clamp(28px, 5vw, 36px); margin-bottom: var(--space-sm); } .section-description { font-size: var(--text-lg); line-height: 1.6; } /* Service Cards Mobile Premium */ .services-grid { grid-template-columns: 1fr; gap: var(--space-lg); padding: 0 var(--space-sm); } .service-card { padding: var(--space-lg); margin-bottom: var(--space-md); /* Improved touch targets */ min-height: 200px; cursor: pointer; -webkit-tap-highlight-color: rgba(165, 215, 116, 0.1); } .service-card:active { transform: scale(0.98); transition: transform 0.1s; } /* Process Section Mobile Premium */ .process-steps { grid-template-columns: 1fr; gap: var(--space-lg); padding: 0 var(--space-sm); } .process-step { padding: var(--space-xl); margin-bottom: var(--space-md); /* Enhanced touch interaction */ cursor: pointer; -webkit-tap-highlight-color: rgba(165, 215, 116, 0.1); } .process-step:active { transform: scale(0.98); } .step-icon { min-height: 80px; margin-bottom: var(--space-lg); display: flex; align-items: center; justify-content: center; } .step-icon svg { font-size: 3rem; width: 70px; height: 70px; /* Premium hover animation */ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .process-step:hover .step-icon svg, .process-step:active .step-icon svg { transform: scale(1.1); filter: drop-shadow(0 4px 12px rgba(165, 215, 116, 0.3)); } .step-number { width: 40px; height: 40px; top: -8px; right: -8px; font-size: var(--text-xs); } .step-title { font-size: var(--text-lg); } } /* Services Section */ .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-lg); } /* Premium Service Cards with Advanced Animations */ .service-card { background: var(--bg-surface); padding: var(--space-xl); border-radius: var(--radius-xl); transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); border: 1px solid var(--border-subtle); position: relative; overflow: hidden; /* Initial state for scroll animation */ opacity: 0; transform: translateY(30px) scale(0.95); /* Premium background with subtle pattern */ background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%), var(--bg-surface); backdrop-filter: blur(10px); } .service-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--primary-500), var(--secondary-500)); transform: scaleX(0); transform-origin: left; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); border-radius: var(--radius-xl) var(--radius-xl) 0 0; } .service-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(165, 215, 116, 0.02) 0%, rgba(138, 201, 38, 0.02) 100%); opacity: 0; transition: opacity 0.6s ease; pointer-events: none; } .service-card:hover { transform: translateY(-12px) scale(1.02); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1), 0 0 40px rgba(165, 215, 116, 0.2); border-color: var(--primary-500); /* Premium glow effect */ filter: drop-shadow(0 0 20px rgba(165, 215, 116, 0.15)); } .service-card:hover::before { transform: scaleX(1); } .service-card:hover::after { opacity: 1; } /* Staggered animation trigger */ .service-card.animate-in { animation: staggeredCard 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards; } /* Contact methods animation trigger */ .contact-method.animate-in { opacity: 1 !important; transform: translateX(0) !important; animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards; } /* Fade in up animation */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .service-card.animate-delay-1 { animation-delay: 0.1s; } .service-card.animate-delay-2 { animation-delay: 0.2s; } .service-card.animate-delay-3 { animation-delay: 0.3s; } .service-card.animate-delay-4 { animation-delay: 0.4s; } .service-icon { color: var(--primary-500); margin-bottom: var(--space-sm); } .service-title { color: var(--text-primary); margin-bottom: var(--space-xs); } .service-description { color: var(--secondary-500); font-weight: 500; margin-bottom: var(--space-sm); } .service-detail { color: var(--text-secondary); margin-bottom: var(--space-sm); } .service-link { color: var(--secondary-500); text-decoration: none; font-weight: 500; transition: color var(--transition-fast); } .service-link:hover { color: var(--primary-500); } /* Technologies Section */ .technologies { background: var(--bg-surface); } .technologies-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-xl); } .tech-category-title { color: var(--primary-500); margin-bottom: var(--space-sm); text-align: center; font-size: var(--text-xl); } .tech-category-description { color: var(--text-secondary); text-align: center; margin-bottom: var(--space-lg); font-size: var(--text-sm); line-height: 1.6; max-width: 600px; margin-left: auto; margin-right: auto; padding: 0 var(--space-md); border-left: 3px solid var(--primary-500); background: rgba(165, 215, 116, 0.05); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); font-style: italic; } .tech-logos { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: center; } .tech-logo { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); padding: var(--space-sm); background: var(--bg-page); border-radius: var(--radius-sm); transition: all var(--transition-fast); } .tech-logo:hover { background: var(--border-subtle); transform: scale(1.05); } .tech-logo img { width: 40px; height: 40px; object-fit: contain; } .tech-logo span { font-size: var(--text-xs); color: var(--text-secondary); text-align: center; } /* Why Choose Us Section */ .why-choose-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: center; } /* Ensure desktop layout is maintained */ @media (min-width: 769px) { section .why-choose-grid { grid-template-columns: 1fr 1fr !important; } } .why-choose-image { width: 100%; height: 400px; object-fit: cover; border-radius: var(--radius-md); } .benefits { display: flex; flex-direction: column; gap: var(--space-lg); } .benefit { display: flex; gap: var(--space-md); align-items: flex-start; } .benefit-number { background: var(--primary-500); color: var(--black-pure); width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--text-lg); flex-shrink: 0; } .benefit-title { color: var(--text-primary); margin-bottom: var(--space-xs); } .benefit-description { color: var(--text-secondary); } /* Cases Section */ .cases-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: var(--space-xl); } .case-card { background: var(--bg-surface); padding: var(--space-lg); border-radius: var(--radius-md); border: 1px solid var(--border-subtle); transition: all var(--transition-normal); } .case-card:hover { transform: translateY(-4px); box-shadow: 0 8px 32px 0 rgba(165, 215, 116, 0.15); } .case-header { margin-bottom: var(--space-md); } .case-visual { margin-bottom: var(--space-md); display: flex; gap: var(--space-sm); align-items: center; } .client-logo { width: 80px; height: 80px; object-fit: contain; border-radius: var(--radius-sm); padding: var(--space-xs); background: var(--bg-page); border: 1px solid var(--border-subtle); flex-shrink: 0; } .project-screenshot { width: 120px; height: 80px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); flex-grow: 1; } .case-title { margin-bottom: var(--space-xs); } .case-category { background: var(--secondary-500); color: var(--text-primary); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 600; } .case-metrics { display: flex; gap: var(--space-md); margin-bottom: var(--space-md); } .metric { text-align: center; } .metric-value { display: block; font-size: var(--text-lg); font-weight: 700; color: var(--primary-500); } .metric-label { font-size: var(--text-xs); color: var(--text-secondary); } .case-description { margin-bottom: var(--space-md); color: var(--text-secondary); } .case-testimonial { border-top: 1px solid var(--border-subtle); padding-top: var(--space-md); } .case-testimonial p { font-style: italic; margin-bottom: var(--space-xs); } .testimonial-author { display: flex; align-items: center; gap: var(--space-sm); padding-top: var(--space-sm); border-top: 1px solid var(--border-subtle); } .testimonial-avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-500), var(--primary-600)); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: var(--text-lg); text-transform: uppercase; letter-spacing: 1px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); flex-shrink: 0; position: relative; overflow: hidden; } .testimonial-avatar::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent); transform: rotate(45deg); transition: transform 0.6s ease; } .testimonial-card:hover .testimonial-avatar::before { transform: rotate(45deg) translate(50%, 50%); } .author-info { flex: 1; } .author-name { font-weight: 600; color: var(--text-primary); display: block; margin-bottom: 2px; font-size: var(--text-sm); } .author-position { font-size: var(--text-xs); color: var(--secondary-500); line-height: 1.4; } /* Testimonials Section */ .testimonials { background: var(--bg-surface); } .testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: var(--space-xl); } .testimonial-card { background: var(--bg-page); padding: var(--space-lg); border-radius: var(--radius-md); border: 1px solid var(--border-subtle); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } .testimonial-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, var(--primary-500), transparent); transition: left 0.5s ease; } .testimonial-card:hover { transform: translateY(-8px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15); border-color: var(--primary-200); } .testimonial-card:hover::before { left: 100%; } .testimonial-rating { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-md); padding: var(--space-xs) var(--space-sm); background: rgba(165, 215, 116, 0.1); border-radius: var(--radius-sm); border: 1px solid var(--primary-200); width: fit-content; } .stars { color: #FFD700; font-size: var(--text-lg); letter-spacing: 2px; filter: drop-shadow(0 2px 4px rgba(255, 215, 0, 0.3)); transition: all 0.3s ease; } .testimonial-card:hover .stars { transform: scale(1.05); filter: drop-shadow(0 4px 8px rgba(255, 215, 0, 0.4)); } .rating-text { font-size: var(--text-sm); color: var(--primary-600); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .testimonial-content { margin-bottom: var(--space-md); position: relative; } .testimonial-content::before { content: '"'; font-size: 60px; color: var(--primary-500); position: absolute; top: -10px; left: -10px; font-family: serif; opacity: 0.3; } .testimonial-content { margin-bottom: var(--space-md); position: relative; padding: var(--space-sm) 0; } .testimonial-content::before { content: '"'; font-size: 60px; color: var(--primary-500); position: absolute; top: -10px; left: -10px; font-family: serif; opacity: 0.3; line-height: 1; } .testimonial-content p { font-style: italic; color: var(--text-secondary); font-size: var(--text-base); line-height: 1.6; margin: 0; padding-left: var(--space-lg); position: relative; } .testimonial-content p::after { content: '"'; font-size: 60px; color: var(--primary-500); position: absolute; bottom: -30px; right: -10px; font-family: serif; opacity: 0.3; line-height: 1; } .author-name { font-weight: 600; color: var(--text-primary); display: block; } .author-position { font-size: var(--text-xs); color: var(--secondary-500); } /* Live Metrics Section */ .live-metrics { background: linear-gradient(135deg, rgba(165, 215, 116, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%); position: relative; } .live-metrics::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,'); opacity: 0.3; } .live-metrics .container { position: relative; z-index: 1; } .metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-xl); margin-top: var(--space-xl); } .metric-card { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(165, 215, 116, 0.2); border-radius: var(--radius-xl); padding: var(--space-xl); text-align: center; transition: all var(--transition-normal); position: relative; overflow: hidden; } .metric-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(165, 215, 116, 0.1), transparent); transition: left 0.8s; } .metric-card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(165, 215, 116, 0.2); border-color: rgba(165, 215, 116, 0.4); } .metric-card:hover::before { left: 100%; } .metric-icon { font-size: 3rem; margin-bottom: var(--space-md); display: block; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1)); } .metric-number { font-size: var(--text-4xl); font-weight: 900; color: var(--primary-500); margin-bottom: var(--space-xs); display: block; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); } .metric-label { font-size: var(--text-lg); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-xs); } .metric-detail { font-size: var(--text-sm); color: var(--text-secondary); opacity: 0.8; } /* Values Section */ .values { background: linear-gradient(135deg, var(--bg-surface), var(--bg-page)); } .values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-sm); margin-top: var(--space-xl); } .value { background: var(--primary-500); color: var(--black-pure); padding: var(--space-sm); border-radius: var(--radius-sm); font-weight: 700; font-size: var(--text-sm); text-align: center; transition: all var(--transition-fast); } .value:hover { transform: scale(1.05); background: #9BC565; } /* Contact Section */ /* Premium Contact Section */ .contact { background: linear-gradient(135deg, var(--bg-surface) 0%, #f8f9fa 100%); position: relative; overflow: hidden; } .contact::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 20% 20%, rgba(165, 215, 116, 0.05) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(138, 201, 38, 0.05) 0%, transparent 50%); pointer-events: none; } .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3xl); position: relative; z-index: 1; } /* Ensure desktop layout is maintained */ @media (min-width: 769px) { section .contact-grid { grid-template-columns: 1fr 1fr !important; } } .contact-methods { display: flex; flex-direction: column; gap: var(--space-xl); margin-top: var(--space-xl); } .contact-method { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-lg); background: rgba(255, 255, 255, 0.5); border-radius: var(--radius-lg); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Initial state for animation */ opacity: 0; transform: translateX(-30px); } .contact-method:hover { background: rgba(255, 255, 255, 0.8); transform: translateX(5px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); } .contact-icon { background: linear-gradient(135deg, var(--primary-500), var(--secondary-500)); color: var(--black-pure); width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; /* Premium shadow and animation */ box-shadow: 0 4px 15px rgba(165, 215, 116, 0.3); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .contact-method:hover .contact-icon { transform: scale(1.1); box-shadow: 0 6px 20px rgba(165, 215, 116, 0.4); } .contact-details h3 { margin-bottom: var(--space-xs); font-weight: 700; color: var(--text-primary); } .contact-details a { color: var(--secondary-500); text-decoration: none; transition: all 0.3s ease; font-weight: 500; position: relative; } .contact-details a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: linear-gradient(90deg, var(--primary-500), var(--secondary-500)); transition: width 0.3s ease; } .contact-details a:hover { color: var(--primary-500); transform: translateX(2px); } .contact-details a:hover::after { width: 100%; } /* Form */ .contact-form { background: var(--bg-page); padding: var(--space-lg); border-radius: var(--radius-md); border: 1px solid var(--border-subtle); } .form-group { margin-bottom: var(--space-md); } .form-group label { display: block; margin-bottom: var(--space-xs); font-weight: 500; color: var(--text-primary); } .form-group input, .form-group select, .form-group textarea { width: 100%; background: var(--bg-surface); border: 1px solid var(--border-subtle); padding: var(--space-sm); border-radius: var(--radius-sm); color: var(--text-primary); font-family: inherit; font-size: var(--text-base); transition: all var(--transition-fast); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--secondary-500); box-shadow: 0 0 12px 0 rgba(0, 120, 212, 0.3); transform: translateY(-1px); } /* === PREMIUM FORM VALIDATION STYLES === */ .form-group { position: relative; } .form-group.has-success input, .form-group.has-success select, .form-group.has-success textarea { border-color: var(--semantic-success); background-color: rgba(72, 187, 120, 0.02); } .form-group.has-error input, .form-group.has-error select, .form-group.has-error textarea { border-color: var(--semantic-error); background-color: rgba(245, 101, 101, 0.02); } .form-group.has-error .field-error { display: block; color: var(--semantic-error); font-size: 0.875rem; margin-top: var(--space-xs); opacity: 1; transform: translateY(0); } .field-error { display: none; opacity: 0; transform: translateY(-4px); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-weight: 400; } /* Success icon animation */ .form-group.has-success::after { content: "✓"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--semantic-success); font-size: 18px; font-weight: 700; animation: successPulse 0.6s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes successPulse { 0% { transform: translateY(-50%) scale(0.8); opacity: 0; } 50% { transform: translateY(-50%) scale(1.1); opacity: 1; } 100% { transform: translateY(-50%) scale(1); opacity: 1; } } /* Field focus animation */ .form-group input, .form-group select, .form-group textarea { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { transform: translateY(-2px); box-shadow: 0 0 12px 0 rgba(0, 120, 212, 0.3), 0 8px 25px -8px rgba(0, 0, 0, 0.15); } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-secondary); } /* Footer */ .footer { background: var(--black-pure); padding: var(--space-2xl) 0 var(--space-lg); } .footer-content { display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-2xl); margin-bottom: var(--space-xl); } /* Ensure desktop layout is maintained */ @media (min-width: 769px) { footer .footer-content { grid-template-columns: 1fr 2fr !important; } } .footer-brand { display: flex; gap: var(--space-md); } .footer-logo { width: 60px; height: 60px; } .footer-slogan { color: var(--text-secondary); font-style: italic; margin-bottom: var(--space-sm); } .footer-description { color: var(--text-secondary); } .footer-links { display: flex; flex-direction: column; gap: var(--space-lg); } .footer-row { display: flex; gap: var(--space-lg); justify-content: space-between; } .footer-row .footer-section { flex: 1; min-width: 0; /* Prevent flex items from overflowing */ } .footer-section h4 { color: var(--primary-500); margin-bottom: var(--space-sm); } .footer-section ul { list-style: none; } .footer-section li { margin-bottom: var(--space-xs); } .footer-section a { color: var(--text-secondary); text-decoration: none; transition: color var(--transition-fast); } .footer-section a:hover { color: var(--primary-500); } .footer-bottom { border-top: 1px solid var(--border-subtle); padding-top: var(--space-lg); text-align: center; color: var(--text-secondary); } /* Animations */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* Responsive Design */ @media (max-width: 768px) { /* Mobile First Adjustments */ :root { --text-base: 16px; --text-lg: 20px; --text-2xl: 32px; --text-3xl: 40px; --space-3xl: 64px; } .container { padding: 0 var(--space-sm); } /* Header Mobile */ .nav-menu { display: none; } .mobile-menu-button { display: flex; } /* Hero Mobile */ .hero-cta { flex-direction: column; align-items: stretch; } .hero-stats { justify-content: space-around; } /* Grid Mobile */ .services-grid, .technologies-grid, .cases-grid, .testimonials-grid { grid-template-columns: 1fr; gap: var(--space-lg); } .testimonial-card { padding: var(--space-md); } .testimonial-avatar { width: 40px; height: 40px; font-size: var(--text-base); } .testimonial-content p { padding-left: var(--space-md); font-size: var(--text-sm); } .testimonial-content::before, .testimonial-content p::after { font-size: 40px; top: -5px; left: -5px; } /* Mobile responsive adjustments for grids */ /* Apply 1-column layout only for small mobile screens */ .why-choose-grid, .contact-grid, .footer-content { grid-template-columns: 1fr; } .footer-links { grid-template-columns: 1fr; gap: var(--space-lg); } /* Values Mobile */ .values-grid { grid-template-columns: repeat(2, 1fr); } /* Form Mobile */ .contact-form { margin-top: var(--space-xl); } /* Header Mobile - Fondo negro */ .header { background: #000000 !important; border-bottom: 1px solid #333333; } /* Brand text blanco en header móvil */ .brand-text { color: #FFFFFF !important; } /* Hero Mobile - Padding superior para compensar barra navegador */ .hero { padding-top: 80px; /* Espacio para header fijo */ min-height: calc(100vh - 80px); } .hero-content { padding: 60px 0; /* Reducido padding vertical para móviles */ } } @media (min-width: 769px) and (max-width: 1024px) { /* Tablet Adjustments */ .services-grid, .cases-grid { grid-template-columns: repeat(2, 1fr); } /* why-choose-grid - mantener layout original en tablet */ .technologies-grid { grid-template-columns: repeat(2, 1fr); } .values-grid { grid-template-columns: repeat(3, 1fr); } /* Tablet Carousel Optimizations */ .carousel-container { height: 450px; } .carousel-slide { padding: var(--space-lg); } .carousel-tech-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); } .carousel-tech-grid .tech-logo { min-height: 90px; } .carousel-tech-grid .tech-logo img { width: 44px; height: 44px; } .carousel-tech-grid .tech-logo span { font-size: 0.85rem; } } /* Smooth scrolling offset for fixed header */ section { scroll-margin-top: 80px; } /* Focus states for accessibility */ button:focus, input:focus, select:focus, textarea:focus, a:focus { outline: 2px solid var(--primary-500); outline-offset: 2px; } /* Loading states */ .loading { opacity: 0.6; pointer-events: none; } /* Success/Error states */ .form-success { background: linear-gradient(135deg, #10B981, #059669); color: white; padding: var(--space-md); border-radius: var(--radius-md); margin-bottom: var(--space-md); border: 1px solid rgba(16, 185, 129, 0.3); box-shadow: 0 10px 25px -8px rgba(16, 185, 129, 0.4); animation: slideInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .form-error { background: linear-gradient(135deg, #EF4444, #DC2626); color: white; padding: var(--space-md); border-radius: var(--radius-md); margin-bottom: var(--space-md); border: 1px solid rgba(239, 68, 68, 0.3); box-shadow: 0 10px 25px -8px rgba(239, 68, 68, 0.4); animation: slideInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes slideInUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } /* === PREMIUM TRUST ELEMENTS === */ .form-trust-badge { background: linear-gradient(135deg, rgba(165, 215, 116, 0.1), rgba(0, 120, 212, 0.1)); border: 1px solid rgba(165, 215, 116, 0.3); border-radius: var(--radius-md); padding: var(--space-md); margin-bottom: var(--space-lg); display: flex; align-items: center; gap: var(--space-sm); animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(15px); } 100% { opacity: 1; transform: translateY(0); } } .form-trust-badge .trust-icon { width: 20px; height: 20px; color: var(--semantic-success); flex-shrink: 0; } .form-trust-badge p { margin: 0; color: var(--text-secondary); font-size: 0.875rem; font-weight: 500; } /* === ENHANCED DROPDOWN === */ .dropdown-enhanced { position: relative; } .dropdown-enhanced::after { content: "▼"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--text-secondary); pointer-events: none; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .dropdown-enhanced.expanded::after { transform: translateY(-50%) rotate(180deg); } /* === PREMIUM LOADING STATE === */ .btn.loading { position: relative; color: transparent !important; pointer-events: none; } .btn.loading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: white; border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ===== BUSINESS SOLUTIONS SECTION ===== */ .business-solutions { margin-top: var(--space-2xl); } .business-category { background: var(--bg-surface); border-radius: var(--radius-lg); margin-bottom: var(--space-xl); overflow: hidden; border: 1px solid var(--border-subtle); transition: all var(--transition-normal); } .business-category:hover { border-color: var(--primary-500); box-shadow: 0 8px 32px rgba(165, 215, 116, 0.1); } .category-header { display: flex; align-items: center; padding: var(--space-xl); background: linear-gradient(135deg, var(--primary-50), var(--primary-100)); border-bottom: 1px solid var(--border-subtle); } .category-icon { color: var(--primary-500); margin-right: var(--space-lg); flex-shrink: 0; } .category-info { flex: 1; } .category-title { font-size: var(--text-2xl); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-xs); line-height: 1.2; } .category-subtitle { font-size: var(--text-lg); color: var(--text-secondary); line-height: 1.5; margin: 0; } .business-category .services-grid { padding: var(--space-xl); gap: var(--space-lg); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .service-card { background: var(--bg-page); padding: var(--space-lg); border-radius: var(--radius-md); transition: all var(--transition-normal); border: 1px solid var(--border-subtle); position: relative; overflow: hidden; } /* Imágenes de fondo para servicios específicos */ .service-card[data-service="ddteam"] { background: linear-gradient(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93)), url('../imgs/equipo_dedicado_consistente.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; } .service-card[data-service="nearshoring"] { background: linear-gradient(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93)), url('../imgs/nearshore_consistente.png'); background-size: cover; background-position: center; background-repeat: no-repeat; } /* Efectos mejorados para tarjetas con imágenes de fondo */ .service-card[data-service="ddteam"]:hover, .service-card[data-service="nearshoring"]:hover, .service-card[data-service="wsaas"]:hover, .service-card[data-service="email"]:hover, .service-card[data-service="saas"]:hover, .service-card[data-service="biaas"]:hover, .service-card[data-service="maas"]:hover, .service-card[data-service="vcaas"]:hover, .service-card[data-service="hosting"]:hover { transform: translateY(-6px); box-shadow: 0 12px 32px rgba(165, 215, 116, 0.25); border-color: var(--primary-500); } /* Responsive para imágenes de fondo */ @media (max-width: 768px) { .service-card[data-service="ddteam"], .service-card[data-service="nearshoring"], .service-card[data-service="wsaas"], .service-card[data-service="email"], .service-card[data-service="saas"], .service-card[data-service="biaas"], .service-card[data-service="maas"], .service-card[data-service="vcaas"], .service-card[data-service="hosting"] { background-size: 150% 100%; background-position: center top; background: linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.95)), url('../imgs/equipo_dedicado_fondo_7.jpg'); background-size: cover; background-position: center; } .service-card[data-service="nearshoring"] { background: linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.95)), url('../imgs/nearshore_fondo_5.png'); background-size: cover; background-position: center; } .service-card[data-service="wsaas"] { background: linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.95)), url('../imgs/web_development_consistent_9.jpg'); background-size: cover; background-position: center; } .service-card[data-service="email"] { background: linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.95)), url('../imgs/marketing_team_office_3.png'); background-size: cover; background-position: center; } .service-card[data-service="saas"] { background: linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.95)), url('../imgs/saas_consistent_6.jpg'); background-size: cover; background-position: center; } .service-card[data-service="biaas"] { background: linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.95)), url('../imgs/bi_consistent_0.jpg'); background-size: cover; background-position: center; } .service-card[data-service="maas"] { background: linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.95)), url('../imgs/lms_consistent_2.jpg'); background-size: cover; background-position: center; } .service-card[data-service="vcaas"] { background: linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.95)), url('../imgs/integration_consistent_8.png'); background-size: cover; background-position: center; } .service-card[data-service="hosting"] { background: linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.95)), url('../imgs/hosting_consistent_3.jpg'); background-size: cover; background-position: center; } } @media (min-width: 769px) and (max-width: 1024px) { .service-card[data-service="ddteam"], .service-card[data-service="nearshoring"], .service-card[data-service="wsaas"], .service-card[data-service="email"], .service-card[data-service="saas"], .service-card[data-service="biaas"], .service-card[data-service="maas"], .service-card[data-service="vcaas"], .service-card[data-service="hosting"] { background-size: 120% 100%; } } /* Imágenes de fondo para servicios de sitios web */ .service-card[data-service="wsaas"] { background: linear-gradient(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93)), url('../imgs/web_development_consistent_9.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; } /* Imágenes de fondo para servicios de email marketing */ .service-card[data-service="email"] { background: linear-gradient(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93)), url('../imgs/marketing_team_office_3.png'); background-size: cover; background-position: center; background-repeat: no-repeat; } /* Imágenes de fondo para servicios SaaS */ .service-card[data-service="saas"] { background: linear-gradient(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93)), url('../imgs/saas_consistent_6.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; } /* Imágenes de fondo para servicios Business Intelligence */ .service-card[data-service="biaas"] { background: linear-gradient(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93)), url('../imgs/bi_consistent_0.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; } /* Imágenes de fondo para servicios Learning Management System */ .service-card[data-service="maas"] { background: linear-gradient(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93)), url('../imgs/lms_consistent_2.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; } /* Imágenes de fondo para servicios de Integración */ .service-card[data-service="vcaas"] { background: linear-gradient(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93)), url('../imgs/integration_consistent_8.png'); background-size: cover; background-position: center; background-repeat: no-repeat; } /* Imágenes de fondo para servicios de Managed Hosting */ .service-card[data-service="hosting"] { background: linear-gradient(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93)), url('../imgs/hosting_consistent_3.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; } .service-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(165, 215, 116, 0.15); border-color: var(--primary-500); } .service-card h4 { font-size: var(--text-xl); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-xs); } .service-type { font-size: var(--text-sm); color: var(--primary-500); font-weight: 600; margin-bottom: var(--space-md); text-transform: uppercase; letter-spacing: 0.5px; } .service-features { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-md); } .feature-badge { background: var(--primary-50); color: var(--primary-600); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 600; border: 1px solid var(--primary-200); } .service-detail { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.6; margin-bottom: var(--space-md); } .service-link { color: var(--primary-500); text-decoration: none; font-weight: 600; font-size: var(--text-sm); transition: all var(--transition-fast); } .service-link:hover { color: var(--primary-600); text-decoration: underline; } .infrastructure-card { background: var(--bg-surface); border: 2px solid var(--primary-200); } .infrastructure-card:hover { border-color: var(--primary-400); box-shadow: 0 12px 32px rgba(165, 215, 116, 0.2); } /* ===== RESPONSIVE BUSINESS SOLUTIONS ===== */ @media (max-width: 768px) { .category-header { flex-direction: column; text-align: center; padding: var(--space-lg); } .category-icon { margin-right: 0; margin-bottom: var(--space-md); } .category-title { font-size: var(--text-xl); } .category-subtitle { font-size: var(--text-base); } .business-category .services-grid { padding: var(--space-lg); grid-template-columns: 1fr; } } /* ===== PREMIUM TECHNOLOGIES SLIDER ===== */ .premium-technologies { background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #f8f9fa 100%); position: relative; overflow: hidden; padding: 6rem 0; color: #495057; } .premium-technologies::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 20% 50%, rgba(165, 215, 116, 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(165, 215, 116, 0.05) 0%, transparent 50%), radial-gradient(circle at 40% 80%, rgba(165, 215, 116, 0.08) 0%, transparent 50%); pointer-events: none; } .premium-technologies .section-header { text-align: center; margin-bottom: 4rem; position: relative; z-index: 2; } .premium-technologies .section-title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; background: linear-gradient(135deg, #495057 0%, #A5D774 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 1rem; letter-spacing: -0.02em; } .premium-technologies .section-description { font-size: 1.125rem; color: rgba(73, 80, 87, 0.8); max-width: 600px; margin: 0 auto; line-height: 1.6; } /* Premium Tech Slider Container */ .premium-tech-slider { position: relative; background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(20px); border-radius: 24px; border: 1px solid rgba(165, 215, 116, 0.2); padding: 3rem 2rem; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(165, 215, 116, 0.1); overflow: hidden; } .tech-slider-container { position: relative; overflow: hidden; border-radius: 16px; } /* Gradient Overlays */ .slider-gradient { position: absolute; top: 0; bottom: 0; width: 80px; z-index: 3; pointer-events: none; } .slider-gradient.left { left: 0; background: linear-gradient(to right, rgba(248, 249, 250, 1) 0%, transparent 100%); } .slider-gradient.right { right: 0; background: linear-gradient(to left, rgba(248, 249, 250, 1) 0%, transparent 100%); } /* Technologies Track */ .tech-track { display: flex; gap: 2rem; padding: 1rem 0; animation: scrollHorizontally 60s linear infinite; will-change: transform; } .tech-track:hover { animation-play-state: paused; } @keyframes scrollHorizontally { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* Technology Categories */ .tech-category { display: flex; gap: 1.5rem; min-width: fit-content; flex-shrink: 0; } /* Premium Tech Items with Better Accessibility */ .tech-item { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 1.5rem 1rem; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); border-radius: 16px; border: 1px solid rgba(165, 215, 116, 0.2); min-width: 120px; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; cursor: pointer; outline: none; } .tech-item:focus { box-shadow: 0 0 0 3px rgba(165, 215, 116, 0.4); border-color: rgba(165, 215, 116, 0.6); } .tech-item::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(165, 215, 116, 0.15) 0%, rgba(165, 215, 116, 0.05) 50%); opacity: 0; transition: opacity 0.3s ease; } .tech-item:hover::before { opacity: 1; } .premium-hover { cursor: pointer; transform: translateY(-8px) scale(1.05); box-shadow: 0 20px 40px rgba(165, 215, 116, 0.25), 0 0 0 1px rgba(165, 215, 116, 0.4); border-color: rgba(165, 215, 116, 0.6); } .premium-hover:hover { background: rgba(255, 255, 255, 1); } /* Tech Icons with Premium Glow Effect */ .tech-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(248, 249, 250, 0.8); transition: all 0.3s ease; position: relative; z-index: 2; box-shadow: inset 0 1px 0 rgba(165, 215, 116, 0.2); } .tech-icon::before { content: ''; position: absolute; inset: 0; border-radius: 12px; background: linear-gradient(135deg, rgba(165, 215, 116, 0.2) 0%, rgba(165, 215, 116, 0.05) 100%); opacity: 0; transition: opacity 0.3s ease; } .premium-hover:hover .tech-icon::before { opacity: 1; } .premium-hover:hover .tech-icon { background: rgba(165, 215, 116, 0.25); transform: scale(1.1); box-shadow: 0 0 20px rgba(165, 215, 116, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3); } .tech-icon img { width: 32px; height: 32px; object-fit: contain; filter: brightness(0.9) contrast(1.1); transition: filter 0.3s ease; } .premium-hover:hover .tech-icon img { filter: brightness(1.2) contrast(1.2); } /* Tech Names */ .tech-name { font-weight: 600; font-size: 0.875rem; color: #495057; text-align: center; position: relative; z-index: 2; line-height: 1.2; } /* Tech Badges */ .tech-badge { font-size: 0.75rem; color: rgba(165, 215, 116, 0.9); background: rgba(165, 215, 116, 0.1); padding: 0.25rem 0.5rem; border-radius: 12px; border: 1px solid rgba(165, 215, 116, 0.2); font-weight: 500; position: relative; z-index: 2; } /* Premium Controls */ .tech-slider-controls { position: absolute; top: 50%; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 1rem; transform: translateY(-50%); z-index: 4; pointer-events: none; } .tech-control { width: 48px; height: 48px; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(20px); color: #495057; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; pointer-events: all; border: 1px solid rgba(165, 215, 116, 0.3); } .tech-control:hover { background: rgba(165, 215, 116, 0.2); border-color: rgba(165, 215, 116, 0.5); transform: scale(1.1); } .tech-control svg { width: 20px; height: 20px; } /* Progress Indicator */ .tech-progress { margin-top: 2rem; height: 4px; background: rgba(255, 255, 255, 0.1); border-radius: 2px; overflow: hidden; position: relative; } .tech-progress-bar { height: 100%; background: linear-gradient(90deg, #A5D774 0%, #8BC34A 100%); border-radius: 2px; transition: width 0.1s linear; width: 0%; position: relative; } .tech-progress-bar::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%); animation: shimmer 2s infinite; } @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* Mobile Optimizations */ @media (max-width: 768px) { .premium-tech-slider { padding: 2rem 1rem; margin: 0 -1rem; border-radius: 20px; } .tech-track { gap: 1rem; animation-duration: 45s; } .tech-category { gap: 1rem; } .tech-item { min-width: 100px; padding: 1rem 0.75rem; gap: 0.5rem; } .tech-icon { width: 40px; height: 40px; } .tech-icon img { width: 28px; height: 28px; } .tech-name { font-size: 0.75rem; } .tech-badge { font-size: 0.6875rem; padding: 0.1875rem 0.375rem; } .slider-gradient { width: 40px; } .tech-slider-controls { display: none; } } @media (max-width: 480px) { .tech-item { min-width: 80px; padding: 0.75rem 0.5rem; } .tech-icon { width: 32px; height: 32px; } .tech-icon img { width: 24px; height: 24px; } .tech-name { font-size: 0.6875rem; } } /* Performance Optimizations */ @media (prefers-reduced-motion: reduce) { .tech-track { animation: none; } .tech-progress-bar::after { animation: none; } .premium-hover { transition: transform 0.2s ease; } } /* ===== ACCORDION FUNCTIONALITY ===== */ .accordion-header { cursor: pointer; position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); user-select: none; } .accordion-header:hover { background: linear-gradient(135deg, var(--primary-100), var(--primary-200)); } .accordion-header:focus { outline: 2px solid var(--primary-500); outline-offset: 2px; } .accordion-icon { margin-left: auto; margin-right: 0; color: var(--primary-600); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); flex-shrink: 0; } .accordion-header[aria-expanded="true"] .accordion-icon { transform: rotate(180deg); } .accordion-content { overflow: hidden; transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease; max-height: 0; opacity: 0; } .accordion-content[style*="display: block"], .accordion-content.expanded { max-height: 2000px; opacity: 1; } .accordion-item { margin-bottom: var(--space-md); } /* Smooth animation for content reveal */ .accordion-content > * { animation: slideDown 0.4s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* Mobile optimizations for accordion */ @media (max-width: 768px) { .accordion-icon { width: 18px; height: 18px; } .accordion-content { transition: max-height 0.3s ease, opacity 0.3s ease; } } /* Leadership Section Styles */ .leadership-section { background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); } .leadership-content { display: grid; gap: var(--space-2xl); margin-top: var(--space-2xl); } .leader-profile { text-align: center; } .leader-name { font-size: var(--text-2xl); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-sm); } .leader-title { font-size: var(--text-lg); color: var(--primary-500); font-weight: 600; margin-bottom: var(--space-md); } .leader-description { font-size: var(--text-base); color: var(--text-secondary); max-width: 800px; margin: 0 auto var(--space-xl); line-height: 1.7; } .leader-highlights { display: flex; justify-content: center; gap: var(--space-xl); margin-bottom: var(--space-xl); flex-wrap: wrap; } .highlight-item { text-align: center; padding: var(--space-md); background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 12px; min-width: 120px; transition: transform 0.3s ease, box-shadow 0.3s ease; } .highlight-item:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(165, 215, 116, 0.1); } .highlight-number { display: block; font-size: var(--text-2xl); font-weight: 700; color: var(--primary-500); margin-bottom: var(--space-xs); } .highlight-text { font-size: var(--text-sm); color: var(--text-secondary); font-weight: 500; } .leader-expertise h4 { font-size: var(--text-lg); color: var(--text-primary); margin-bottom: var(--space-md); text-align: center; } .expertise-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); } .tag { background: linear-gradient(135deg, var(--primary-500) 0%, #8BC34A 100%); color: var(--black-pure); padding: var(--space-xs) var(--space-md); border-radius: 20px; font-size: var(--text-sm); font-weight: 600; transition: transform 0.3s ease, box-shadow 0.3s ease; } .tag:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(165, 215, 116, 0.3); } .credentials-section { margin-top: var(--space-xl); } .credentials-section h4 { font-size: var(--text-xl); color: var(--text-primary); margin-bottom: var(--space-lg); text-align: center; } .credentials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-lg); } .credential-item { display: flex; align-items: center; padding: var(--space-md); background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 12px; transition: transform 0.3s ease, border-color 0.3s ease; } .credential-item:hover { transform: translateY(-2px); border-color: var(--primary-500); } .credential-icon { font-size: 32px; margin-right: var(--space-md); min-width: 48px; } .credential-content strong { display: block; font-size: var(--text-base); color: var(--text-primary); margin-bottom: var(--space-xs); font-weight: 600; } .credential-content p { font-size: var(--text-sm); color: var(--text-secondary); margin: 0; } /* Mobile Responsive for Leadership Section */ @media (max-width: 768px) { .leader-highlights { gap: var(--space-md); } .highlight-item { min-width: 100px; padding: var(--space-sm); } .credentials-grid { grid-template-columns: 1fr; } .credential-item { flex-direction: column; text-align: center; } .credential-icon { margin-right: 0; margin-bottom: var(--space-sm); } } /* Leadership CTA Section */ .leadership-cta { margin-top: var(--space-2xl); padding: var(--space-2xl); background: linear-gradient(135deg, rgba(165, 215, 116, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%); border-radius: var(--radius-xl); border: 1px solid rgba(165, 215, 116, 0.2); text-align: center; } .leadership-cta .cta-content h4 { color: var(--text-primary); font-size: var(--text-2xl); font-weight: 700; margin-bottom: var(--space-md); } .leadership-cta .cta-content p { color: var(--text-secondary); font-size: var(--text-base); margin-bottom: var(--space-xl); max-width: 600px; margin-left: auto; margin-right: auto; line-height: 1.6; } .leadership-cta .cta-buttons { display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap; } .leadership-cta .btn { min-width: 180px; padding: var(--space-md) var(--space-lg); } /* ======================================== WhatsApp Float Button Styles ======================================== */ .whatsapp-float { position: fixed; bottom: 30px; right: 30px; z-index: 1000; /* Estado inicial: oculto con scroll-trigger */ opacity: 0; transform: translateY(100px); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; } /* Estado visible cuando aparece */ .whatsapp-float.visible { opacity: 1; transform: translateY(0); pointer-events: all; animation: fadeInRight 0.6s ease-out; } .whatsapp-btn { display: flex; align-items: center; gap: var(--space-sm); background: linear-gradient(135deg, #25D366, #128C7E); color: white; padding: var(--space-md) var(--space-lg); border-radius: 50px; text-decoration: none; box-shadow: 0 8px 32px rgba(37, 211, 102, 0.3); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-weight: 600; position: relative; overflow: hidden; border: 2px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); /* Mejora de accesibilidad */ min-height: 48px; cursor: pointer; } .whatsapp-btn:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 12px 40px rgba(37, 211, 102, 0.4); background: linear-gradient(135deg, #128C7E, #25D366); } .whatsapp-btn:active { transform: translateY(-1px) scale(0.98); transition: all 0.1s ease; } .whatsapp-icon { width: 24px; height: 24px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)); } .whatsapp-text { font-size: var(--text-sm); white-space: nowrap; opacity: 0.9; } .whatsapp-pulse { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; border: 2px solid #25D366; border-radius: 50px; animation: whatsappPulse 2s infinite; pointer-events: none; } @keyframes whatsappPulse { 0% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; } 50% { opacity: 0.4; } 100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; } } /* Respeto por usuarios que prefieren reducir animaciones */ @media (prefers-reduced-motion: reduce) { .whatsapp-float, .whatsapp-btn, .whatsapp-pulse { animation: none; transition: none; } .whatsapp-pulse { display: none; } } @keyframes fadeInRight { from { opacity: 0; transform: translateX(100px); } to { opacity: 1; transform: translateX(0); } } /* Mobile optimizations - Solo icono */ @media (max-width: 768px) { .whatsapp-float { bottom: 20px; right: 20px; } .whatsapp-btn { padding: 12px; gap: 0; border-radius: 50%; min-height: 48px; min-width: 48px; display: flex; align-items: center; justify-content: center; } .whatsapp-text { display: none; } /* En mobile, mostrar tooltip on touch/focus */ .whatsapp-btn:focus .whatsapp-text, .whatsapp-btn:focus-visible .whatsapp-text { display: block; position: absolute; right: 60px; background: rgba(0, 0, 0, 0.8); color: white; padding: 8px 12px; border-radius: 8px; font-size: 14px; white-space: nowrap; z-index: 1001; } /* Mejora de accesibilidad mobile */ .whatsapp-btn:active { transform: scale(0.95); background: linear-gradient(135deg, #128C7E, #25D366); } } /* ======================================== Interactive Values Section Styles ======================================== */ .values-interactive { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-lg); margin-top: var(--space-2xl); } .value-card { background: linear-gradient(135deg, var(--bg-surface), rgba(0, 0, 0, 0.05)); border: 1px solid var(--border-subtle); border-radius: 16px; padding: var(--space-lg); text-align: center; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; cursor: pointer; backdrop-filter: blur(10px); } .value-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--primary-500), var(--secondary-500)); transform: scaleX(0); transition: transform 0.3s ease; } .value-card:hover::before { transform: scaleX(1); } .value-card:hover { transform: translateY(-8px); border-color: var(--primary-500); box-shadow: 0 20px 40px rgba(165, 215, 116, 0.15); background: linear-gradient(135deg, var(--bg-page), rgba(165, 215, 116, 0.05)); } .value-icon { font-size: 3rem; margin-bottom: var(--space-md); filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)); transition: transform 0.3s ease; } .value-card:hover .value-icon { transform: scale(1.1) rotate(5deg); } .value-name { font-size: var(--text-lg); font-weight: 700; color: var(--primary-500); margin-bottom: var(--space-sm); letter-spacing: 0.5px; } .value-description { color: var(--text-secondary); line-height: 1.7; margin-bottom: var(--space-md); font-size: var(--text-sm); } .value-highlight { background: linear-gradient(135deg, var(--primary-500), rgba(165, 215, 116, 0.8)); color: var(--black-pure); padding: var(--space-xs) var(--space-sm); border-radius: 20px; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; display: inline-block; transition: all 0.3s ease; } .value-card:hover .value-highlight { transform: scale(1.05); box-shadow: 0 4px 12px rgba(165, 215, 116, 0.4); } /* Mobile responsive for values */ @media (max-width: 768px) { .values-interactive { grid-template-columns: 1fr; gap: var(--space-md); } .value-card { padding: var(--space-md); } .value-icon { font-size: 2.5rem; } } /* ======================================== PWA STYLES (Progressive Web App) ======================================== */ /* Technical Capabilities Section */ .capabilities-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: var(--space-xl); margin-top: var(--space-2xl); } .capability-card { background: var(--bg-surface); padding: var(--space-lg); border-radius: var(--radius-md); border: 1px solid var(--border-subtle); transition: all var(--transition-normal); } .capability-card:hover { transform: translateY(-4px); box-shadow: 0 8px 32px 0 rgba(165, 215, 116, 0.15); border-color: rgba(165, 215, 116, 0.3); } .capability-header { margin-bottom: var(--space-md); border-bottom: 1px solid var(--border-subtle); padding-bottom: var(--space-sm); } .capability-title { font-size: 1.25rem; font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-xs); } .capability-category { background: linear-gradient(135deg, rgba(165, 215, 116, 0.1), rgba(79, 121, 66, 0.05)); color: var(--primary-500); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); font-size: 0.875rem; font-weight: 500; border: 1px solid rgba(165, 215, 116, 0.2); } .capability-visual { margin: var(--space-md) 0; text-align: center; } .capability-image { width: 100%; max-width: 300px; height: 180px; object-fit: cover; border-radius: var(--radius-sm); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); } .capability-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-sm); margin: var(--space-md) 0; padding: var(--space-sm) 0; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); } .feature { text-align: center; } .feature-value { display: block; font-size: 1.125rem; font-weight: 600; color: var(--primary-500); margin-bottom: var(--space-xs); } .feature-label { display: block; font-size: 0.875rem; color: var(--text-secondary); line-height: 1.4; } .capability-description { color: var(--text-primary); line-height: 1.6; margin-bottom: var(--space-md); } .capability-list { list-style: none; padding: 0; } .capability-list li { color: var(--text-secondary); padding: var(--space-xs) 0; border-bottom: 1px solid var(--border-subtle); position: relative; padding-left: var(--space-md); } .capability-list li::before { content: "✓"; color: var(--primary-500); font-weight: bold; position: absolute; left: 0; top: var(--space-xs); } .capability-list li:last-child { border-bottom: none; } /* Technologies Carousel */ .technologies-carousel { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; overflow: hidden; border-radius: 12px; background: var(--white); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); } .carousel-container { position: relative; width: 100%; height: 500px; } .carousel-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: var(--space-xl); opacity: 0; transform: translateX(100%); transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } .carousel-slide.active { opacity: 1; transform: translateX(0); } .carousel-slide.prev { transform: translateX(-100%); } .carousel-title { font-size: 2.2rem; font-weight: 700; color: var(--primary-color); margin-bottom: var(--space-sm); background: linear-gradient(135deg, var(--primary-color), var(--accent-color)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .carousel-description { font-size: 1.1rem; color: var(--text-color); margin-bottom: var(--space-xl); max-width: 600px; line-height: 1.6; } .carousel-tech-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-lg); width: 100%; max-width: 900px; } .carousel-tech-grid .tech-logo { display: flex; flex-direction: column; align-items: center; padding: var(--space-md); border-radius: 12px; background: var(--light-gray); transition: all 0.3s ease; cursor: pointer; } .carousel-tech-grid .tech-logo:hover { transform: translateY(-8px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); background: var(--white); } .carousel-tech-grid .tech-logo img { width: 48px; height: 48px; object-fit: contain; margin-bottom: var(--space-sm); transition: transform 0.3s ease; } .carousel-tech-grid .tech-logo:hover img { transform: scale(1.1); } .carousel-tech-grid .tech-logo span { font-size: 0.9rem; font-weight: 600; color: var(--text-color); text-align: center; line-height: 1.3; } /* Carousel Navigation */ .carousel-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.95); color: var(--primary-color); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; z-index: 10; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } .carousel-nav:hover { background: var(--primary-color); color: var(--white); transform: translateY(-50%) scale(1.1); } .carousel-nav:focus { outline: 2px solid var(--accent-color); outline-offset: 2px; } .carousel-prev { left: 20px; } .carousel-next { right: 20px; } /* Carousel Indicators */ .carousel-indicators { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; gap: var(--space-sm); z-index: 10; } .indicator { width: 12px; height: 12px; border-radius: 50%; border: none; background: rgba(108, 117, 125, 0.3); cursor: pointer; transition: all 0.3s ease; } .indicator.active { background: var(--primary-color); transform: scale(1.2); } .indicator:hover { background: rgba(108, 117, 125, 0.6); transform: scale(1.1); } .indicator:focus { outline: 2px solid var(--accent-color); outline-offset: 2px; } /* Responsive Design */ @media (max-width: 768px) { .carousel-container { height: 600px; } .carousel-slide { padding: var(--space-lg); } .carousel-title { font-size: 1.8rem; } .carousel-description { font-size: 1rem; margin-bottom: var(--space-lg); } .carousel-tech-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-md); max-width: 100%; } .carousel-tech-grid .tech-logo { padding: var(--space-sm); } .carousel-tech-grid .tech-logo img { width: 40px; height: 40px; } .carousel-tech-grid .tech-logo span { font-size: 0.8rem; } .carousel-nav { width: 40px; height: 40px; } .carousel-nav svg { width: 20px; height: 20px; } .carousel-prev { left: 10px; } .carousel-next { right: 10px; } .carousel-indicators { bottom: 20px; } } @media (max-width: 480px) { .carousel-container { height: 500px; } .carousel-slide { padding: var(--space-md); } .carousel-title { font-size: 1.4rem; margin-bottom: var(--space-sm); } .carousel-description { font-size: 0.85rem; margin-bottom: var(--space-md); max-width: 100%; } /* Optimized 2-column grid for mobile */ .carousel-tech-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); max-width: 100%; width: 100%; } .carousel-tech-grid .tech-logo { padding: var(--space-sm); min-height: 80px; justify-content: center; } .carousel-tech-grid .tech-logo img { width: 32px; height: 32px; margin-bottom: var(--space-xs); } .carousel-tech-grid .tech-logo span { font-size: 0.7rem; line-height: 1.2; } /* Hide secondary technologies on mobile */ .mobile-secondary { display: none; } /* Show only primary technologies on mobile */ .tech-logo.mobile-primary { display: flex; } .carousel-nav { width: 35px; height: 35px; } .carousel-nav svg { width: 18px; height: 18px; } .carousel-prev { left: 8px; } .carousel-next { right: 8px; } .carousel-indicators { bottom: 15px; } } /* ================================ PREMIUM DESKTOP NAV ANIMATIONS ================================ */ /* Brand Pulse Animation */ @keyframes brandPulse { 0%, 100% { transform: scale(1); box-shadow: 0 6px 20px rgba(165, 215, 116, 0.3), 0 2px 8px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3); } 50% { transform: scale(1.02); box-shadow: 0 8px 25px rgba(165, 215, 116, 0.4), 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 2px 0 rgba(255, 255, 255, 0.4); } } /* Logo Shine Effect */ @keyframes logoShine { 0% { transform: translate(-150%, -150%) rotate(45deg); opacity: 0; } 50% { opacity: 1; } 100% { transform: translate(50%, 50%) rotate(45deg); opacity: 0; } } /* Menu Shimmer Effect */ @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* CTA Gradient Animation */ @keyframes ctaGradient { 0%, 100% { background: linear-gradient(135deg, var(--primary-500) 0%, #8BC34A 50%, var(--primary-500) 100%); } 50% { background: linear-gradient(135deg, #8BC34A 0%, var(--primary-500) 50%, #8BC34A 100%); } } /* Ripple Effect */ @keyframes ripple { 0% { transform: translate(-50%, -50%) scale(0); opacity: 0.8; } 100% { transform: translate(-50%, -50%) scale(8); opacity: 0; } } /* Slide In Animation */ @keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* Logo Glow Effect */ @keyframes logoGlow { 0% { filter: brightness(1) contrast(1); opacity: 1; } 100% { filter: brightness(1.2) contrast(1.1) drop-shadow(0 0 8px rgba(165, 215, 116, 0.6)); opacity: 0.9; } } /* ================================ PREMIUM UX ANIMATIONS COLLECTION ================================ */ /* Hero Section Premium Animations */ @keyframes heroFadeInUp { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: translateY(0); } } @keyframes heroFadeInLeft { from { opacity: 0; transform: translateX(-80px); } to { opacity: 1; transform: translateX(0); } } @keyframes heroFadeInRight { from { opacity: 0; transform: translateX(80px); } to { opacity: 1; transform: translateX(0); } } @keyframes floating { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } @keyframes gradientShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 20px rgba(165, 215, 116, 0.3); } 50% { box-shadow: 0 0 40px rgba(165, 215, 116, 0.6); } } /* Section Entrance Animations */ @keyframes slideInUp { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: translateX(0); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } /* Card Hover Animations */ @keyframes cardTilt { 0% { transform: perspective(1000px) rotateY(0deg) rotateX(0deg); } 25% { transform: perspective(1000px) rotateY(5deg) rotateX(2deg); } 50% { transform: perspective(1000px) rotateY(-3deg) rotateX(1deg); } 75% { transform: perspective(1000px) rotateY(2deg) rotateX(-1deg); } 100% { transform: perspective(1000px) rotateY(0deg) rotateX(0deg); } } /* Text Reveal Animation */ @keyframes textReveal { from { opacity: 0; transform: translateY(20px); clip-path: inset(100% 0 0 0); } to { opacity: 1; transform: translateY(0); clip-path: inset(0 0 0 0); } } /* Staggered Animation Delays */ .animate-delay-1 { animation-delay: 0.1s; } .animate-delay-2 { animation-delay: 0.2s; } .animate-delay-3 { animation-delay: 0.3s; } .animate-delay-4 { animation-delay: 0.4s; } .animate-delay-5 { animation-delay: 0.5s; } /* Parallax Scroll Effect */ @keyframes parallaxFloat { from { transform: translateY(0px); } to { transform: translateY(-50px); } } /* Premium Button Ripple Effect */ @keyframes buttonRipple { 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(4); opacity: 0; } } /* Glow Pulse for Interactive Elements */ @keyframes glowPulse { 0%, 100% { filter: drop-shadow(0 0 5px rgba(165, 215, 116, 0.4)); } 50% { filter: drop-shadow(0 0 15px rgba(165, 215, 116, 0.8)); } } /* Staggered Card Entrance */ @keyframes staggeredCard { from { opacity: 0; transform: translateY(30px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Interactive Element Hover Effects */ @keyframes iconFloat { 0%, 100% { transform: translateY(0px) scale(1); } 50% { transform: translateY(-5px) scale(1.05); } } /* Text Typing Effect */ @keyframes typing { from { width: 0; } to { width: 100%; } } @keyframes blinkCursor { 0%, 50% { border-color: transparent; } 51%, 100% { border-color: var(--primary-500); } } /* Smooth Scroll Enhancement */ @keyframes smoothScrollIndicator { 0% { transform: translateY(0px); opacity: 1; } 50% { transform: translateY(10px); opacity: 0.5; } 100% { transform: translateY(20px); opacity: 0; } } /* Underline expand animation for subtitle */ @keyframes underlineExpand { from { width: 0; opacity: 0; } to { width: 60px; opacity: 1; } } /* Section divider animation */ @keyframes sectionDivider { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } } /* Title underline animation */ @keyframes titleUnderline { from { opacity: 0; transform: translateX(-50%) scaleX(0); } to { opacity: 1; transform: translateX(-50%) scaleX(1); } } /* ======================================== HIGH SPECIFICITY FIXES FOR LAYOUT ISSUES Using unique class names to ensure proper grid layouts ======================================== */ /* Fixed grid layout for "Nuestro Proceso" section */ section.process-section .process-steps { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; gap: var(--space-xl) !important; margin-top: var(--space-2xl) !important; } /* Fixed grid layout for "¿Por qué escogernos?" section */ section.why-choose-section .why-choose-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: var(--space-2xl) !important; align-items: center !important; } /* Fixed grid layout for Contact Form section */ section.contact-section .contact-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: var(--space-3xl) !important; position: relative !important; z-index: 1 !important; } /* Fixed grid layout for Footer section */ footer.site-footer .footer-content { display: grid !important; grid-template-columns: 1fr 2fr !important; gap: var(--space-2xl) !important; margin-bottom: var(--space-xl) !important; } /* Ensure mobile responsiveness is maintained */ @media (max-width: 768px) { section.process-section .process-steps, section.why-choose-section .why-choose-grid, section.contact-section .contact-grid, footer.site-footer .footer-content { grid-template-columns: 1fr !important; gap: var(--space-lg) !important; } } /* ================================================================================ ÍCONOS PREMIUM PARA FORMULARIO DE CONTACTO ================================================================================ Estilos profesionales alineados con el diseño de Cacique Tech */ /* ===== VARIABLES DE COLORES - CACIQUE TECH PALETTE ===== */ :root { /* Colores principales - Cacique Tech Brand Colors */ --icon-primary: #A5D774; /* Verde principal de la marca */ --icon-secondary: #0078D4; /* Azul de la marca */ --icon-success: #28A745; /* Verde de éxito (del CSS existente) */ --icon-warning: #f59e0b; /* Naranja para advertencias */ --icon-error: #DC3545; /* Rojo de error (del CSS existente) */ --icon-text: #495057; /* Texto principal (del CSS existente) */ --icon-text-light: #868e96; /* Texto secundario (del CSS existente) */ --icon-border: #DEE2E6; /* Borde sutil (del CSS existente) */ --icon-border-focus: #A5D774; /* Borde foco - verde marca */ --icon-hover: #8BC34A; /* Variante más oscura del verde */ /* Espaciado */ --icon-size: 20px; --icon-size-sm: 18px; --icon-size-lg: 24px; /* Animaciones */ --transition-fast: 0.2s ease; --transition-normal: 0.3s ease; --transition-slow: 0.5s ease; } /* ===== ÍCONOS BASE ===== */ .form-icon { width: var(--icon-size); height: var(--icon-size); display: inline-block; vertical-align: middle; transition: all var(--transition-normal); stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .form-icon-filled { fill: currentColor; stroke: none; } .form-icon-sm { width: var(--icon-size-sm); height: var(--icon-size-sm); } .form-icon-lg { width: var(--icon-size-lg); height: var(--icon-size-lg); } /* ===== LABEL CON ICONOS ===== */ .form-group label { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; font-size: 14px; } .form-group label .form-icon { color: var(--icon-text); transition: all var(--transition-normal); } .form-group:hover label .form-icon { color: var(--icon-primary); } /* ===== ESTADOS INTERACTIVOS ===== */ .form-group:hover .label .form-icon { color: var(--icon-primary); transform: scale(1.05); } .form-group.focused label .form-icon { color: var(--icon-primary); transform: scale(1.1); } /* ===== ESTADOS DE VALIDACIÓN CON ÍCONOS ===== */ .form-group.has-success label .form-icon { color: var(--icon-success); animation: successIconBounce 0.6s ease; } .form-group.has-error label .form-icon { color: var(--icon-error); animation: shakeIcon 0.6s ease; } .form-group.has-warning label .form-icon { color: var(--icon-warning); } /* ===== ANIMACIONES ===== */ @keyframes successIconBounce { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } } @keyframes shakeIcon { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } } /* ===== ÍCONOS ESPECÍFICOS ===== */ /* 1. ÍCONO DE USUARIO */ .icon-user { width: var(--icon-size); height: var(--icon-size); } /* 2. ÍCONO DE EMAIL */ .icon-email { width: var(--icon-size); height: var(--icon-size); } /* 3. ÍCONO DE TELÉFONO */ .icon-phone { width: var(--icon-size); height: var(--icon-size); } /* 4. ÍCONO DE SERVICIOS */ .icon-services { width: var(--icon-size); height: var(--icon-size); } /* 5. ÍCONO DE MENSAJE */ .icon-message { width: var(--icon-size); height: var(--icon-size); } /* ===== FORMULARIO CON GRUPOS DE ICONOS ===== */ .form-group { position: relative; animation: iconSlideIn 0.4s ease-out; } @keyframes iconSlideIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } } .form-group:nth-child(1) { animation-delay: 0.1s; } .form-group:nth-child(2) { animation-delay: 0.2s; } .form-group:nth-child(3) { animation-delay: 0.3s; } .form-group:nth-child(4) { animation-delay: 0.4s; } .form-group:nth-child(5) { animation-delay: 0.5s; } /* ===== TRUST BADGES MEJORADOS ===== */ .form-trust-badge { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.2); border-radius: 8px; font-size: 14px; color: var(--text-primary); animation: fadeInUp 0.6s ease-out; } .form-trust-badge .trust-icon { width: 20px; height: 20px; flex-shrink: 0; animation: trustPulse 2s ease-in-out infinite; } @keyframes trustPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.8; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* ===== BOTÓN CON ÍCONO ===== */ .btn-primary { display: flex; align-items: center; justify-content: center; gap: 8px; } /* ===== ERRORES Y MENSAJES ===== */ .field-error { color: var(--icon-error); font-size: 12px; margin-top: 4px; display: flex; align-items: center; gap: 4px; animation: errorSlideIn 0.3s ease-out; } @keyframes errorSlideIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } } /* ===== RESPONSIVE ===== */ @media (max-width: 768px) { :root { --icon-size: 18px; --icon-size-sm: 16px; } .form-group label { font-size: 13px; } .form-trust-badge { padding: 10px 14px; font-size: 13px; } } @media (max-width: 480px) { :root { --icon-size: 16px; } } /* ===== ACCESIBILIDAD ===== */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* Focus visible para navegación con teclado */ .btn-primary:focus-visible { outline: 2px solid var(--icon-primary); outline-offset: 2px; }