@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../assets/fonts/dm-sans-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../assets/fonts/dm-sans-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 300 900; font-display: swap; src: url(../assets/fonts/outfit-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 300 900; font-display: swap; src: url(../assets/fonts/outfit-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap'); :root { --azul-claro: #1E90FF; --azul-medio: #1578d8; --azul-profundo: #0A3D62; --azul-noche: #061e33; --gris-oscuro: #4A4A4A; --gris-fondo: #f0f2f5; --blanco: #ffffff; --grad-hero: linear-gradient(135deg, #0A3D62 0%, #0d4f7e 40%, #1578d8 100%); --grad-accent: linear-gradient(135deg, #1E90FF, #0A3D62); --grad-card: linear-gradient(135deg, rgba(30,144,255,0.08), rgba(10,61,98,0.04)); --grad-glow: linear-gradient(135deg, #1E90FF, #00d4ff, #1E90FF); --shadow-sm: 0 2px 8px rgba(10, 61, 98, 0.06); --shadow-md: 0 8px 30px rgba(10, 61, 98, 0.1); --shadow-lg: 0 20px 60px rgba(10, 61, 98, 0.15); --shadow-glow: 0 8px 32px rgba(30, 144, 255, 0.25); --glass-bg: rgba(255, 255, 255, 0.7); --glass-border: rgba(255, 255, 255, 0.3); --glass-dark: rgba(10, 61, 98, 0.85); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'DM Sans', 'Segoe UI', sans-serif; background-color: var(--blanco); color: var(--gris-oscuro); line-height: 1.7; overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { font-family: 'Outfit', 'Segoe UI', sans-serif; font-weight: 700; } .reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-left { opacity: 0; transform: translateX(-60px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .reveal-left.visible { opacity: 1; transform: translateX(0); } .reveal-right { opacity: 0; transform: translateX(60px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .reveal-right.visible { opacity: 1; transform: translateX(0); } .stagger-1 { transition-delay: 0.05s; } .stagger-2 { transition-delay: 0.1s; } .stagger-3 { transition-delay: 0.15s; } .stagger-4 { transition-delay: 0.2s; } .stagger-5 { transition-delay: 0.25s; } .stagger-6 { transition-delay: 0.3s; } .stagger-7 { transition-delay: 0.35s; } .stagger-8 { transition-delay: 0.4s; } .top-bar { background: var(--azul-noche); color: var(--blanco); display: flex; justify-content: space-between; align-items: center; padding: 10px 5%; font-size: 0.83rem; letter-spacing: 0.3px; position: relative; z-index: 1001; } .top-bar-left i { color: var(--azul-claro); margin-right: 8px; } .top-bar-left span { margin-right: 25px; opacity: 0.9; } .top-bar-right a { color: rgba(255, 255, 255, 0.7); text-decoration: none; margin-left: 18px; font-size: 1rem; transition: all 0.3s ease; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; } .top-bar-right a:hover { color: var(--blanco); background: rgba(30, 144, 255, 0.3); transform: translateY(-2px); } .navbar { display: flex; justify-content: space-between; align-items: center; padding: 12px 5%; background: var(--blanco); position: sticky; top: 0; z-index: 1000; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); border-bottom: 1px solid transparent; } .navbar.scrolled { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); box-shadow: 0 4px 30px rgba(10, 61, 98, 0.08); border-bottom: 1px solid rgba(30, 144, 255, 0.1); padding: 8px 5%; } .logo img { max-height: 50px; width: auto; display: block; transition: all 0.3s ease; } .navbar.scrolled .logo img { max-height: 42px; } .navbar nav a { text-decoration: none; color: var(--gris-oscuro); margin-left: 35px; font-weight: 600; font-size: 0.95rem; letter-spacing: 0.3px; transition: all 0.3s ease; position: relative; padding: 5px 0; } .navbar nav a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0%; height: 2.5px; background: var(--grad-accent); border-radius: 2px; transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .navbar nav a:hover { color: var(--azul-claro); } .navbar nav a:hover::after { width: 100%; } .btn-primary { display: inline-block; background: var(--grad-accent); color: var(--blanco); padding: 16px 36px; text-decoration: none; border-radius: 12px; font-weight: 700; font-family: 'Outfit', sans-serif; font-size: 0.95rem; letter-spacing: 0.5px; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); position: relative; overflow: hidden; z-index: 1; } .btn-primary::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; z-index: -1; } .btn-primary:hover { transform: translateY(-3px); box-shadow: var(--shadow-glow); } .btn-primary:hover::before { left: 100%; } .btn-primary:active { transform: translateY(-1px); } .hero-slider { position: relative; width: 100%; min-height: 88vh; overflow: hidden; background: linear-gradient(170deg, #f0f4f8 0%, #e4edf5 30%, #dce8f3 60%, #f0f2f5 100%); } .hero-slider::before { content: ''; position: absolute; top: -50%; right: -20%; width: 800px; height: 800px; background: radial-gradient(circle, rgba(30,144,255,0.06) 0%, transparent 70%); border-radius: 50%; z-index: 0; animation: pulseOrb 8s ease-in-out infinite; } .hero-slider::after { content: ''; position: absolute; bottom: -30%; left: -10%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(10,61,98,0.05) 0%, transparent 70%); border-radius: 50%; z-index: 0; animation: pulseOrb 10s ease-in-out infinite reverse; } @keyframes pulseOrb { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.15); opacity: 0.6; } } .hero-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease-in-out; display: flex; align-items: center; visibility: hidden; z-index: 1; } .hero-slide.active { opacity: 1; visibility: visible; } .slide-bg-img::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.52); z-index: 1; } .slide-bg-img .hero-container { z-index: 2; } .slide-bg-img .pre-title { color: #7dd3fc; } .slide-bg-img .hero-text .hero-title { color: #ffffff; text-shadow: 0 2px 12px rgba(0,0,0,0.4); } .slide-bg-img .subtitle { color: #ffffff; text-shadow: 0 1px 8px rgba(0,0,0,0.8), 0 2px 20px rgba(0,0,0,0.6); font-weight: 500; } .hero-container { display: flex; align-items: center; justify-content: space-between; padding: 0 5%; width: 100%; gap: 40px; position: relative; z-index: 2; } .hero-slide.active .hero-text { animation: heroFadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes heroFadeUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } .hero-text { flex: 1; } .pre-title { color: var(--azul-claro); font-weight: 700; font-family: 'Outfit', sans-serif; text-transform: uppercase; letter-spacing: 2.5px; margin-bottom: 16px; font-size: 0.85rem; display: inline-flex; align-items: center; gap: 10px; } .pre-title::before { content: ''; width: 30px; height: 2.5px; background: var(--grad-accent); border-radius: 2px; display: inline-block; } .hero h1, .hero-text .hero-title { color: var(--azul-profundo); font-size: 3.4rem; line-height: 1.08; margin-bottom: 24px; font-weight: 800; letter-spacing: -0.5px; } .subtitle { font-size: 1.15rem; margin-bottom: 40px; color: var(--gris-oscuro); opacity: 0.85; max-width: 520px; line-height: 1.7; } .hero-visual { flex: 1.2; display: flex; justify-content: center; position: relative; } .hero-visual::before { content: ''; position: absolute; width: 85%; height: 85%; background: radial-gradient(circle, rgba(30,144,255,0.08) 0%, transparent 70%); border-radius: 50%; z-index: 0; filter: blur(40px); } .hero-img { width: 100%; max-width: 620px; height: auto; object-fit: contain; filter: drop-shadow(0 25px 40px rgba(10, 61, 98, 0.18)); animation: heroFloat 7s ease-in-out infinite; position: relative; z-index: 1; } @keyframes heroFloat { 0% { transform: translateY(0px) rotate(0deg); } 33% { transform: translateY(-12px) rotate(0.5deg); } 66% { transform: translateY(-6px) rotate(-0.3deg); } 100% { transform: translateY(0px) rotate(0deg); } } .slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: var(--glass-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.5); color: var(--azul-profundo); width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 16px; z-index: 10; transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1); font-size: 1.1rem; } .slider-arrow:hover { background: var(--azul-profundo); color: var(--blanco); border-color: var(--azul-profundo); transform: translateY(-50%) scale(1.08); box-shadow: var(--shadow-glow); } .prev { left: 24px; } .next { right: 24px; } .slider-pagination { position: absolute; bottom: 35px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 10; } .dot { width: 10px; height: 10px; background: rgba(10, 61, 98, 0.2); border-radius: 50%; cursor: pointer; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .dot.active { background: var(--azul-claro); width: 36px; border-radius: 8px; box-shadow: 0 2px 12px rgba(30, 144, 255, 0.4); } .dot:hover:not(.active) { background: rgba(30, 144, 255, 0.4); transform: scale(1.2); } .services-section { padding: 110px 5%; background-color: #eef1f5; background-image: linear-gradient(rgba(238,241,245,0.55), rgba(238,241,245,0.55)), url('../assets/img/circuit-pattern.svg'); background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; } .services-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(30,144,255,0.2), transparent); } .section-title { text-align: center; margin-bottom: 70px; } .section-title h2 { color: var(--azul-profundo); font-size: 2.6rem; font-weight: 800; letter-spacing: -0.3px; } .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; max-width: 1250px; margin: 0 auto; } .service-card { background: var(--blanco); padding: 38px 28px; border-radius: 20px; text-align: center; transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1); border: 1px solid rgba(10, 61, 98, 0.06); position: relative; overflow: hidden; } .service-card::before { content: ''; position: absolute; inset: 0; border-radius: 20px; padding: 2px; background: var(--grad-glow); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.4s ease; } .service-card:hover::before { opacity: 1; } .service-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); background: var(--blanco); } .card-icon { width: 70px; height: 70px; margin: 0 auto 22px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(30,144,255,0.1), rgba(10,61,98,0.05)); border-radius: 18px; font-size: 1.8rem; color: var(--azul-claro); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .service-card:hover .card-icon { background: var(--grad-accent); color: var(--blanco); transform: scale(1.05) rotate(-3deg); box-shadow: var(--shadow-glow); } .service-card h3 { color: var(--azul-profundo); margin-bottom: 14px; font-size: 1.25rem; font-weight: 700; } .service-card p { font-size: 0.93rem; color: var(--gris-oscuro); line-height: 1.65; opacity: 0.85; } .tech-section { padding: 80px 5%; background: linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%); position: relative; overflow: hidden; border-top: 1px solid rgba(10,61,98,0.08); border-bottom: 1px solid rgba(10,61,98,0.08); } .tech-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(10,61,98,0.08), transparent); } .tech-container { max-width: 1200px; margin: 0 auto; } .tech-logos { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 55px; } .tech-item { position: relative; } .tech-item i { font-size: 4rem; color: var(--azul-profundo); opacity: 0.25; transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1); cursor: pointer; } .tech-item i:hover { color: var(--azul-claro); opacity: 1; transform: scale(1.15) translateY(-8px); filter: drop-shadow(0 12px 24px rgba(30, 144, 255, 0.3)); } .page-header { background: var(--grad-hero); color: var(--blanco); padding: 100px 5% 80px; text-align: center; position: relative; overflow: hidden; } .page-header::before { content: ''; position: absolute; top: -40%; right: -15%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(30,144,255,0.25) 0%, transparent 70%); border-radius: 50%; animation: meshFloat 12s ease-in-out infinite; } .page-header::after { content: ''; position: absolute; bottom: -30%; left: -10%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(0,212,255,0.15) 0%, transparent 70%); border-radius: 50%; animation: meshFloat 15s ease-in-out infinite reverse; } @keyframes meshFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(30px, -20px) scale(1.05); } 50% { transform: translate(-15px, 15px) scale(0.95); } 75% { transform: translate(20px, 10px) scale(1.02); } } .page-header-content { position: relative; z-index: 2; } .page-header-content h1 { font-size: 3.2rem; margin-bottom: 16px; font-weight: 800; letter-spacing: -0.5px; } .page-header-content p { font-size: 1.15rem; color: rgba(255, 255, 255, 0.75); max-width: 550px; margin: 0 auto; line-height: 1.6; } .detailed-services { padding: 90px 5%; background: var(--blanco); } .detailed-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; max-width: 1350px; margin: 0 auto; } .detailed-card { background: var(--blanco); padding: 34px 28px; border-radius: 20px; border: 1px solid rgba(10, 61, 98, 0.06); transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; position: relative; overflow: hidden; } .detailed-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad-glow); background-size: 200% auto; opacity: 0; transition: opacity 0.4s ease; animation: gradientSlide 3s linear infinite; } @keyframes gradientSlide { 0% { background-position: 0% center; } 100% { background-position: 200% center; } } .detailed-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(30, 144, 255, 0.15); } .detailed-card:hover::after { opacity: 1; } .service-icon { font-size: 2.4rem; color: var(--azul-claro); margin-bottom: 18px; transition: all 0.3s ease; } .detailed-card:hover .service-icon { transform: scale(1.1); filter: drop-shadow(0 4px 10px rgba(30,144,255,0.3)); } .detailed-card h2 { color: var(--azul-profundo); font-size: 1.35rem; margin-bottom: 14px; font-weight: 700; } .detailed-card p { color: var(--gris-oscuro); font-size: 0.93rem; margin-bottom: 20px; line-height: 1.6; flex-grow: 1; opacity: 0.85; } .service-features { list-style: none; border-top: 1px solid rgba(10, 61, 98, 0.08); padding-top: 16px; } .service-features li { margin-bottom: 10px; font-size: 0.88rem; color: var(--gris-oscuro); display: flex; align-items: flex-start; line-height: 1.5; } .service-features li i { color: var(--azul-claro); margin-right: 10px; margin-top: 3px; font-size: 0.8rem; } .cta-section { background: var(--grad-hero); color: var(--blanco); text-align: center; padding: 100px 5%; position: relative; overflow: hidden; } .cta-section::before { content: ''; position: absolute; top: -50%; right: -20%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(30,144,255,0.2) 0%, transparent 70%); border-radius: 50%; animation: pulseOrb 10s ease-in-out infinite; } .cta-content { max-width: 750px; margin: 0 auto; position: relative; z-index: 2; } .cta-content h2 { font-size: 2.8rem; margin-bottom: 20px; font-weight: 800; letter-spacing: -0.3px; } .cta-content p { font-size: 1.1rem; margin-bottom: 40px; opacity: 0.85; line-height: 1.7; } .cta-btn { background: var(--blanco) !important; color: var(--azul-profundo) !important; font-size: 1rem; padding: 18px 42px; border-radius: 14px; font-weight: 700; } .cta-btn:hover { background: var(--azul-claro) !important; color: var(--blanco) !important; box-shadow: 0 12px 35px rgba(30, 144, 255, 0.4); } .footer { background: var(--azul-noche); color: rgba(255, 255, 255, 0.65); padding-top: 70px; position: relative; } .footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(30,144,255,0.3), transparent); } .footer-container { max-width: 1200px; margin: 0 auto; padding: 0 5%; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; margin-bottom: 50px; } .footer-logo { max-height: 45px; margin-bottom: 20px; filter: brightness(0) invert(1); } .footer-col p { line-height: 1.7; font-size: 0.95rem; } .footer-col h4 { color: var(--blanco); font-family: 'Outfit', sans-serif; font-size: 1.15rem; font-weight: 700; margin-bottom: 24px; position: relative; padding-bottom: 12px; } .footer-col h4::after { content: ''; position: absolute; left: 0; bottom: 0; width: 35px; height: 3px; background: var(--grad-accent); border-radius: 2px; } .footer-col ul { list-style: none; } .footer-col ul li { margin-bottom: 14px; display: flex; align-items: center; font-size: 0.93rem; } .footer-col ul li i { color: var(--azul-claro); margin-right: 14px; font-size: 1rem; } .footer-col ul a { color: rgba(255, 255, 255, 0.65); text-decoration: none; transition: all 0.3s ease; } .footer-col ul a:hover { color: var(--azul-claro); padding-left: 6px; } .footer-bottom { background: rgba(0, 0, 0, 0.25); text-align: center; padding: 22px 5%; font-size: 0.87rem; border-top: 1px solid rgba(255, 255, 255, 0.05); letter-spacing: 0.3px; } .contact-section { padding: 90px 5%; background: linear-gradient(180deg, var(--gris-fondo) 0%, #e8ecf1 100%); } .contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 35px; max-width: 1200px; margin: 0 auto; } .contact-info { background: var(--grad-hero); color: var(--blanco); padding: 50px 40px; border-radius: 24px; box-shadow: var(--shadow-lg); position: relative; overflow: hidden; } .contact-info::before { content: ''; position: absolute; top: -40%; right: -30%; width: 300px; height: 300px; background: radial-gradient(circle, rgba(30,144,255,0.2) 0%, transparent 70%); border-radius: 50%; } .contact-info h2 { font-size: 2rem; margin-bottom: 14px; color: var(--blanco); font-weight: 800; position: relative; } .contact-info > p { color: rgba(255, 255, 255, 0.7); margin-bottom: 40px; font-size: 1rem; line-height: 1.65; position: relative; } .info-item { display: flex; align-items: flex-start; margin-bottom: 28px; position: relative; } .info-item i { font-size: 1.3rem; color: rgba(255, 255, 255, 0.85); margin-right: 18px; margin-top: 4px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.1); border-radius: 12px; flex-shrink: 0; } .info-item h4 { font-size: 1.05rem; margin-bottom: 4px; color: var(--blanco); font-weight: 600; } .info-item p { color: rgba(255, 255, 255, 0.7); font-size: 0.93rem; } .contact-form-container { background: var(--blanco); padding: 50px 42px; border-radius: 24px; box-shadow: var(--shadow-md); border: 1px solid rgba(10, 61, 98, 0.05); } .contact-form-container h2 { color: var(--azul-profundo); font-size: 2rem; margin-bottom: 30px; font-weight: 800; } .form-group { margin-bottom: 20px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .form-group label { display: block; margin-bottom: 8px; color: var(--azul-profundo); font-weight: 600; font-size: 0.9rem; font-family: 'Outfit', sans-serif; } .contact-form input, .contact-form select, .contact-form textarea { width: 100%; padding: 14px 16px; border: 1.5px solid rgba(10, 61, 98, 0.1); border-radius: 12px; font-size: 0.95rem; font-family: 'DM Sans', sans-serif; transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1); background-color: rgba(240, 242, 245, 0.5); color: var(--gris-oscuro); } .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: none; border-color: var(--azul-claro); background-color: var(--blanco); box-shadow: 0 0 0 4px rgba(30, 144, 255, 0.08); } .contact-form input::placeholder, .contact-form textarea::placeholder { color: #aaa; } .btn-submit { width: 100%; border: none; cursor: pointer; font-size: 1rem; margin-top: 10px; border-radius: 14px; padding: 16px; } .about-section { padding: 110px 5%; background: var(--blanco); } .about-container { display: flex; align-items: center; justify-content: space-between; max-width: 1200px; margin: 0 auto; gap: 70px; } .about-text { flex: 1.2; } .about-text h2 { color: var(--azul-profundo); font-size: 2.3rem; margin-bottom: 26px; line-height: 1.2; font-weight: 800; } .about-text p { color: var(--gris-oscuro); font-size: 1.05rem; margin-bottom: 18px; line-height: 1.75; opacity: 0.88; } .about-image { flex: 1.4; display: flex; justify-content: center; align-items: center; } .about-image img { width: 100%; height: auto; border-radius: 16px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12); } .values-section { padding: 90px 5%; background: var(--gris-fondo); } .values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; max-width: 1200px; margin: 0 auto; } .value-card { background: var(--blanco); padding: 42px 32px; border-radius: 22px; text-align: center; box-shadow: var(--shadow-sm); border: 1px solid rgba(10, 61, 98, 0.04); transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1); position: relative; overflow: hidden; } .value-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--grad-glow); background-size: 200% auto; animation: gradientSlide 3s linear infinite; } .value-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); } .value-card i { font-size: 3rem; margin-bottom: 22px; display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; background: linear-gradient(135deg, rgba(30,144,255,0.1), rgba(10,61,98,0.05)); border-radius: 22px; color: var(--azul-claro); transition: all 0.3s ease; } .value-card:hover i { background: var(--grad-accent); color: var(--blanco); box-shadow: var(--shadow-glow); } .value-card h3 { color: var(--azul-profundo); font-size: 1.4rem; margin-bottom: 14px; font-weight: 700; } .value-card p { color: var(--gris-oscuro); font-size: 0.95rem; line-height: 1.65; opacity: 0.85; } .menu-toggle { display: none; font-size: 1.6rem; color: var(--azul-profundo); cursor: pointer; transition: all 0.3s ease; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 12px; } .menu-toggle:hover { color: var(--azul-claro); background: rgba(30, 144, 255, 0.06); } @media (max-width: 992px) { .hero-container { flex-direction: column; text-align: center; padding: 40px 5%; } .hero-text { margin-bottom: 30px; } .hero h1, .hero-text .hero-title { font-size: 2.5rem; } .subtitle { margin: 0 auto 35px; } .pre-title::before { display: none; } .hero-visual { justify-content: center; } .prev, .next { display: none; } .about-container { flex-direction: column; text-align: center; } .contact-grid { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; gap: 0; } } @media (max-width: 768px) { .top-bar { display: none; } .menu-toggle { display: flex; } .nav-links { display: none; flex-direction: column; position: absolute; top: 70px; left: 0; width: 100%; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); padding: 20px 0; z-index: 999; text-align: center; border-top: 2px solid var(--azul-claro); } .nav-links.active { display: flex; animation: menuSlideDown 0.35s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes menuSlideDown { from { opacity: 0; transform: translateY(-15px); } to { opacity: 1; transform: translateY(0); } } .navbar nav a { margin: 14px 0; font-size: 1.1rem; display: block; } .navbar nav a::after { display: none; } .hero-slider { min-height: 75vh; } .hero h1, .hero-text .hero-title { font-size: 2rem; } .hero-img { max-width: 280px; } .section-title h2 { font-size: 2rem; } .detailed-grid { grid-template-columns: 1fr; } .cta-content h2 { font-size: 2rem; } .tech-logos { gap: 35px; } .tech-item i { font-size: 3.2rem; } .page-header { padding: 70px 5% 60px; } .page-header-content h1 { font-size: 2.2rem; } .contact-info { padding: 35px 28px; } .contact-form-container { padding: 35px 28px; } .footer-container { text-align: center; } .footer-col h4::after { left: 50%; transform: translateX(-50%); } .about-text h2 { font-size: 1.8rem; } .values-grid { grid-template-columns: 1fr; } .about-image { width: 100%; max-width: 500px; margin: 0 auto; } .about-container { gap: 35px; } .slide-bg-img .hero-text .hero-title { font-size: 1.9rem; } .footer-col ul li { justify-content: center; } .slide-bg-img { background-position: center top !important; } } @media (max-width: 480px) { .hero h1, .hero-text .hero-title { font-size: 1.65rem; } .slide-bg-img .hero-text .hero-title { font-size: 1.5rem; } .subtitle { font-size: 0.92rem; } .hero-slider { min-height: 60vh; } .section-title h2 { font-size: 1.6rem; } .cta-content h2 { font-size: 1.6rem; } .cta-section { padding: 70px 5%; } .cta-btn { width: 100%; text-align: center; justify-content: center; } .page-header { padding: 55px 5% 45px; } .page-header-content h1 { font-size: 1.75rem; } .contact-info { padding: 25px 18px; } .contact-form-container { padding: 25px 18px; } .about-image { max-width: 100%; } .about-text h2 { font-size: 1.6rem; } .footer-container { grid-template-columns: 1fr; gap: 28px; } .tech-logos { gap: 22px; } .tech-item i { font-size: 2.5rem; } .tech-item span { font-size: 0.75rem; } .btn-primary { padding: 14px 24px; font-size: 0.9rem; } .info-item { gap: 12px; } .navbar { padding: 14px 5%; } .footer-col ul li { justify-content: center; } } ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--gris-fondo); } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--azul-claro), var(--azul-profundo)); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: var(--azul-profundo); } ::selection { background: rgba(30, 144, 255, 0.2); color: var(--azul-profundo); } .whatsapp-float { position: fixed; bottom: 28px; right: 28px; z-index: 9999; width: 58px; height: 58px; background: #25D366; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 24px rgba(37, 211, 102, 0.45); text-decoration: none; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease; animation: wsp-pulse 2.5s infinite; } .whatsapp-float i { color: #fff; font-size: 1.75rem; line-height: 1; } .whatsapp-float:hover { transform: scale(1.12); box-shadow: 0 10px 32px rgba(37, 211, 102, 0.6); animation: none; } @keyframes wsp-pulse { 0%, 100% { box-shadow: 0 6px 24px rgba(37, 211, 102, 0.45); } 50% { box-shadow: 0 6px 32px rgba(37, 211, 102, 0.75); } } @media (max-width: 480px) { .whatsapp-float { bottom: 18px; right: 18px; width: 52px; height: 52px; } .whatsapp-float i { font-size: 1.55rem; } } .menu-toggle { border: 0; background: transparent; font: inherit; font-size: 1.6rem; } .dot { border: 0; padding: 0; } :focus-visible { outline: 3px solid var(--azul-claro); outline-offset: 4px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } .reveal, .reveal-left, .reveal-right { opacity: 1; transform: none; } } .hero-soluciones { display:grid; min-height:0; background:#06182d; color:white; } .hero-soluciones::before,.hero-soluciones::after { display:none; } .hero-soluciones .hero-slide { position:relative; inset:auto; grid-area:1/1; height:auto; min-width:0; min-height:640px; display:flex; align-items:center; } .hero-soluciones .hero-picture { position:absolute; inset:0; } .hero-soluciones .hero-picture img { width:100%; height:100%; object-fit:cover; object-position:center; } .hero-soluciones .hero-slide::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(4,20,40,.95),rgba(4,20,40,.78) 35%,rgba(4,20,40,.08) 65%); } .hero-soluciones .hero-container { padding:70px 7%; } .hero-soluciones .hero-text { max-width:560px; width:48%; flex:none; margin:0; } .hero-soluciones .pre-title { color:#7dd3fc; font-size:12px; letter-spacing:1.5px; } .hero-soluciones .hero-title { color:white; font-size:clamp(36px,3.4vw,54px); line-height:1.08; text-wrap:balance; } .hero-soluciones .subtitle { color:#e1eaf4; opacity:1; font-size:18px; line-height:1.65; margin-bottom:22px; } .hero-soluciones .hero-services { font-size:14px; line-height:1.8; color:#9eddf5; margin-bottom:28px; } .hero-soluciones .btn-primary { font-size:13px; text-align:center; } .hero-soluciones .hero-controls { position:relative; z-index:3; display:flex; align-items:center; justify-content:center; gap:18px; padding:20px 5%; background:#06182d; } .hero-soluciones .slider-pagination { position:static; transform:none; display:flex; gap:12px; } .hero-soluciones .dot { width:auto; height:auto; border-radius:6px; padding:12px 16px; background:transparent; color:#b8cada; border:1px solid #31475f; font:inherit; font-size:13px; cursor:pointer; } .hero-soluciones .dot span { color:#75d4f6; margin-right:7px; } .hero-soluciones .dot.active { background:#173952; border-color:#75d4f6; transform:none; } .hero-soluciones .hero-direction { background:transparent; color:white; border:1px solid #31475f; border-radius:50%; width:44px; height:44px; flex-shrink:0; cursor:pointer; font-size:22px; } .hero-soluciones button:focus-visible,.hero-soluciones a:focus-visible { outline:3px solid #7dd3fc; outline-offset:4px; } @media(max-width:767px) { .hero-soluciones .hero-slide { display:flex; flex-direction:column; justify-content:space-between; min-height:0; } .hero-soluciones .hero-slide::after { display:none; } .hero-soluciones .hero-container { order:0; padding:36px 24px 28px; flex:1; } .hero-soluciones .hero-text { width:100%; max-width:none; text-align:left; } .hero-soluciones .hero-title { font-size:clamp(30px,6vw,38px); } .hero-soluciones .pre-title { font-size:11px; letter-spacing:1px; } .hero-soluciones .subtitle { font-size:16px; line-height:1.6; } .hero-soluciones .hero-services { font-size:13px; } .hero-soluciones .btn-primary { width:100%; display:block; padding:16px 12px; } .hero-soluciones .hero-picture { position:relative; order:1; width:100%; aspect-ratio:4/3; display:block; } .hero-soluciones .hero-picture img { display:block; } .hero-soluciones .hero-controls { gap:8px; padding:16px 12px; } .hero-soluciones .slider-pagination { display:grid; grid-template-columns:1fr 1fr; gap:8px; flex:1; } .hero-soluciones .dot { padding:10px 5px; font-size:11px; min-height:44px; } .hero-soluciones .dot span { margin-right:2px; } .hero-soluciones .hero-direction { width:32px; height:44px; border-radius:6px; } } @media(prefers-reduced-motion:reduce) { .hero-soluciones .hero-slide { transition:none; } .hero-soluciones .hero-slide.active .hero-text { animation:none; } } #servicios.solutions-overview { padding:72px 5%; background:#f2f5f8; } #servicios .section-title { max-width:800px; margin:0 auto 36px; } #servicios .section-title h2 { font-size:clamp(28px,3vw,40px); line-height:1.15; text-wrap:balance; } #servicios .solutions-intro { color:#526579; font-size:17px; line-height:1.65; max-width:680px; margin:18px auto 0; } #servicios .services-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; } #servicios .service-card { display:flex; flex-direction:column; padding:24px; border-radius:14px; text-align:left; color:inherit; text-decoration:none; border:1px solid #dce5ed; transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; } #servicios .service-card::before { display:none; } #servicios .solution-card-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; } #servicios .card-icon { width:44px; height:44px; border-radius:11px; font-size:21px; margin:0; flex-shrink:0; } #servicios .solution-number { font-family:'Outfit',sans-serif; font-size:13px; color:#64788c; letter-spacing:1px; } #servicios .service-card h3 { font-size:18px; line-height:1.3; margin-bottom:12px; } #servicios .service-card p { color:#526579; opacity:1; font-size:15px; line-height:1.6; margin:0 0 20px; } #servicios .solution-link { margin-top:auto; color:#086aa8; font-size:14px; font-weight:700; } #servicios .service-card:hover { transform:none; box-shadow:none; } #servicios .service-card:hover .card-icon { transform:none; box-shadow:none; } #servicios .service-card:focus-visible { outline:3px solid #168bce; outline-offset:4px; } @media(hover:hover) and (prefers-reduced-motion:no-preference) { #servicios .service-card:hover { transform:translateY(-3px); border-color:#168bce; box-shadow:0 8px 22px rgba(10,61,98,.08); } } @media(max-width:1100px) { #servicios .services-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media(max-width:600px) { #servicios.solutions-overview { padding:48px 6%; } #servicios .section-title { margin-bottom:28px; } #servicios .solutions-intro { font-size:16px; } #servicios .services-grid { grid-template-columns:minmax(0,1fr); gap:14px; } #servicios .service-card { padding:20px; } #servicios .solution-card-top { margin-bottom:14px; } #servicios .service-card h3 { margin-bottom:10px; } #servicios .service-card p { margin-bottom:16px; } } @media(prefers-reduced-motion:reduce) { #servicios .service-card,#servicios .card-icon { transition:none; } } .enterprise-platforms { padding:64px 5% 70px; background:#fff; } .enterprise-platforms .platforms-heading { max-width:760px; margin:0 auto 40px; text-align:center; } .enterprise-platforms h2 { color:var(--azul-profundo); font-size:clamp(28px,3vw,38px); line-height:1.2; text-wrap:balance; } .enterprise-platforms .platforms-intro { margin:18px auto 0; max-width:660px; color:#526579; font-size:17px; line-height:1.65; } .enterprise-platforms .platforms-list { list-style:none; margin:0; padding:26px 0 0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:28px; border-top:1px solid #e1e8ef; } .enterprise-platforms .platforms-list li { display:flex; align-items:center; justify-content:center; min-height:72px; text-align:center; } .enterprise-platforms .platforms-list span { font-family:'Outfit',sans-serif; font-size:20px; font-weight:500; color:#29465e; line-height:1.4; } .business-conversation { padding:72px 5%; background:linear-gradient(120deg,#0a3d62,#086a9b); } .business-conversation::before { display:none; } .business-conversation .cta-content { max-width:850px; } .business-conversation h2 { font-size:clamp(30px,3.5vw,46px); line-height:1.15; text-wrap:balance; margin:0 auto 22px; } .business-conversation .cta-content p { max-width:620px; margin:0 auto 30px; font-size:18px; line-height:1.65; color:#edf6ff; } .business-conversation .cta-btn { display:inline-flex; justify-content:center; align-items:center; gap:12px; max-width:100%; padding:18px 26px; font-size:14px; line-height:1.5; background:#fff; color:#0a3d62; transition:background .2s ease,box-shadow .2s ease; } .business-conversation .cta-btn i { font-size:23px; } .business-conversation .cta-btn:hover { background:#eaf5ff; color:#0a3d62; transform:none; box-shadow:0 6px 18px #062b4a33; } .business-conversation .cta-btn:focus-visible { outline:3px solid #fff; outline-offset:5px; } @media(max-width:1000px) and (min-width:601px) { .enterprise-platforms .platforms-list { grid-template-columns:repeat(6,minmax(0,1fr)); gap:20px; } .enterprise-platforms .platforms-list li { grid-column:span 2; } .enterprise-platforms .platforms-list li:nth-child(4) { grid-column:2/span 2; } } @media(max-width:600px) { .enterprise-platforms { padding:44px 6%; } .enterprise-platforms .platforms-heading { margin-bottom:26px; } .enterprise-platforms .platforms-intro { font-size:16px; } .enterprise-platforms .platforms-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 20px; padding-top:18px; } .enterprise-platforms .platforms-list li:last-child { grid-column:1/-1; } .enterprise-platforms .platforms-list span { font-size:18px; } .enterprise-platforms .platforms-list li { min-height:58px; } .business-conversation { padding:48px 6%; } .business-conversation .cta-content p { font-size:16px; margin-bottom:24px; } .business-conversation .cta-btn { width:100%; padding:16px 12px; font-size:13px; } } @media(prefers-reduced-motion:reduce) { .business-conversation .cta-btn { transition:none; } } .fa-solid,.fa-brands{display:inline-block;font-style:normal;line-height:1;vertical-align:-.125em} .fa-solid svg,.fa-brands svg{height:1em;width:1em;fill:currentColor;display:inline-block;vertical-align:-.125em} .fa-bars .icon-close,.fa-xmark .icon-menu{display:none} .fa-bars .icon-menu,.fa-xmark .icon-close{display:inline-block} .enterprise-platforms .pre-title{color:#086aa8} .footer h3{color:var(--blanco);font-family:Outfit,sans-serif;font-size:1.15rem;font-weight:700;margin-bottom:24px;position:relative;padding-bottom:12px} .footer h3::after{content:'';position:absolute;bottom:0;left:0;width:35px;height:3px;background:var(--grad-accent);border-radius:2px} .footer-bottom a{text-decoration:underline;text-underline-offset:3px} .hero-soluciones .hero-slide.active .hero-text{animation:none} @media(max-width:768px){.footer-col h3::after{left:50%;transform:translateX(-50%)}} .whatsapp-float{animation:none} .whatsapp-float::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 6px 32px rgba(37,211,102,.75);opacity:0;animation:home-whatsapp-glow 2.5s infinite} .whatsapp-float:hover::before{animation:none;opacity:0} @keyframes home-whatsapp-glow{0%,100%{opacity:0}50%{opacity:1}} .footer-bottom a:focus-visible{outline:2px solid currentColor;outline-offset:4px}