/*------------------------------------------------------------------ File Name: custom.css -------------------------------------------------------------------*/ /** ADD YOUR AWESOME CODES HERE **/ /* Topbar Styles */ .topbar-left ul.list-inline li { margin-right: 20px; } .topbar-left ul.list-inline li a { color: #fff; font-weight: 500; } .topbar-left ul.list-inline li i { margin-right: 8px; color: #039ee3; } /* Google Fonts ahora se carga desde el via (más rápido que @import) */ /* Modern Font Variables */ :root { --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-secondary: 'Plus Jakarta Sans', 'Poppins', sans-serif; --font-size-base: 16px; --line-height-base: 1.6; } /* Override Default Fonts */ body { font-family: var(--font-primary) !important; font-size: var(--font-size-base); line-height: var(--line-height-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6, .main-heading h2, .heading, .service-heading { font-family: var(--font-secondary) !important; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; } /* Improved Typography */ h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; } h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; } h3 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 600; } h4 { font-size: clamp(1.25rem, 2.5vw, 1.5rem); font-weight: 600; } p { font-family: var(--font-primary); font-size: 1rem; line-height: 1.7; font-weight: 400; } /* Modern Button Typography */ .btn { font-family: var(--font-secondary) !important; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; font-size: 0.875rem; } /* Navigation Typography */ #navbar_menu ul li a { font-family: var(--font-secondary) !important; font-weight: 500; letter-spacing: 0.02em; } /* Marquee Typography */ .marquee-content .topbar-hightlight { font-family: var(--font-primary) !important; font-weight: 500; font-size: 0.875rem; } /* Footer Typography */ footer { font-family: var(--font-primary) !important; } footer h2 { font-family: var(--font-secondary) !important; font-weight: 700; } /* Form Typography */ input, textarea, select { font-family: var(--font-primary) !important; font-size: 1rem; } /* Card and Content Typography */ .blog_feature_head h4, .product_list h4, .service_blog_inner h4 { font-family: var(--font-secondary) !important; font-weight: 600; } /* Responsive Font Sizes */ @media (max-width: 768px) { :root { --font-size-base: 15px; } body { font-size: 15px; } } @media (max-width: 576px) { :root { --font-size-base: 14px; } body { font-size: 14px; } } /* Performance Optimizations */ * { font-display: swap; } /* Accessibility */ ::selection { background-color: #007bff; color: #ffffff; } ::-moz-selection { background-color: #007bff; color: #ffffff; } /* Utility Classes - Replacing Inline Styles */ .margin-top-35 { margin-top: 35px !important; } .padding-50 { padding: 50px 0 !important; } .text-no-transform { text-transform: none !important; } .font-size-18 { font-size: 18px !important; } /* Revolution Slider Wrapper Defaults */ .rev_slider_wrapper.fullwidthbanner-container { margin: 0px auto !important; background-color: transparent !important; padding: 0px !important; margin-top: 0px !important; margin-bottom: 0px !important; } /* Revolution Slider Initial State */ .rev_slider.fullwidthabanner { display: block !important; } /* Slider Layer Backgrounds */ .slider-layer-bg-dark { z-index: 5 !important; background-color: rgba(0, 0, 0, 0.25) !important; border-color: rgba(0, 0, 0, 0.50) !important; } .slider-layer-bg-darker { z-index: 5 !important; background-color: rgba(29, 29, 29, 0.85) !important; border-color: rgba(0, 0, 0, 0.50) !important; } /* Slider Text Layers */ .slider-text-layer { white-space: nowrap !important; } .slider-text-layer-title { z-index: 6 !important; white-space: nowrap !important; } .slider-text-layer-subtitle { z-index: 7 !important; white-space: nowrap !important; } /* ==================== MODERN SLIDER ENHANCEMENTS FOR ALL PAGES ==================== */ /* Modern Tech Gradient Overlays - Balanced for Image Visibility */ .slider-layer-bg-dark { background: linear-gradient(135deg, rgba(0, 0, 0, 0.10) 0%, rgba(3, 158, 227, 0.05) 25%, rgba(0, 123, 255, 0.06) 50%, rgba(13, 110, 253, 0.05) 75%, rgba(0, 0, 0, 0.10) 100%) !important; backdrop-filter: none; animation: overlayShift 10s ease-in-out infinite; } @keyframes overlayShift { 0%, 100% { background: linear-gradient(135deg, rgba(0, 0, 0, 0.10) 0%, rgba(3, 158, 227, 0.05) 25%, rgba(0, 123, 255, 0.06) 50%, rgba(13, 110, 253, 0.05) 75%, rgba(0, 0, 0, 0.10) 100%); } 50% { background: linear-gradient(135deg, rgba(0, 0, 0, 0.12) 0%, rgba(13, 110, 253, 0.06) 25%, rgba(3, 158, 227, 0.07) 50%, rgba(0, 123, 255, 0.06) 75%, rgba(0, 0, 0, 0.12) 100%); } } .slider-layer-bg-darker { background: linear-gradient(90deg, rgba(0, 0, 0, 0.70) 0%, rgba(3, 158, 227, 0.40) 25%, rgba(0, 123, 255, 0.35) 50%, rgba(3, 158, 227, 0.40) 75%, rgba(0, 0, 0, 0.70) 100%) !important; box-shadow: 0 0 60px rgba(3, 158, 227, 0.7), 0 0 120px rgba(0, 123, 255, 0.5), 0 0 180px rgba(13, 110, 253, 0.4), inset 0 0 50px rgba(3, 158, 227, 0.25); border: 2px solid rgba(3, 158, 227, 0.6); border-radius: 15px; position: relative; overflow: hidden; } /* Animated border glow effect */ .slider-layer-bg-darker::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent 30%, rgba(3, 158, 227, 0.4) 50%, transparent 70%); animation: borderSweep 3s linear infinite; } @keyframes borderSweep { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Enhanced Text Styling - CRYSTAL CLEAR WHITE TEXT */ .slider-text-layer-title { color: #ffffff !important; text-shadow: 0 0 30px rgba(3, 158, 227, 1), 0 0 50px rgba(3, 158, 227, 0.7), 0 0 70px rgba(0, 123, 255, 0.5), 0 5px 15px rgba(0, 0, 0, 0.9), 0 3px 8px rgba(0, 0, 0, 1), 2px 2px 4px rgba(0, 0, 0, 0.8) !important; font-weight: 900 !important; letter-spacing: 3px !important; position: relative; z-index: 10; -webkit-text-fill-color: #ffffff !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; text-rendering: optimizeLegibility !important; filter: drop-shadow(0 0 20px rgba(3, 158, 227, 0.8)); } /* Add a vibrant background glow box for extra visibility */ .slider-text-layer-title::before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 110%; height: 140%; z-index: -1; background: radial-gradient(ellipse at center, rgba(3, 158, 227, 0.25) 0%, rgba(0, 123, 255, 0.15) 30%, transparent 70%); box-shadow: 0 0 40px rgba(3, 158, 227, 0.5), 0 0 80px rgba(3, 158, 227, 0.3), 0 0 120px rgba(0, 123, 255, 0.2); border-radius: 10px; animation: glowPulse 2s ease-in-out infinite; } @keyframes glowPulse { 0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } } .slider-text-layer-subtitle { color: #ffffff !important; text-shadow: 0 0 25px rgba(3, 158, 227, 1), 0 0 45px rgba(0, 123, 255, 0.8), 0 0 65px rgba(13, 110, 253, 0.6), 0 4px 12px rgba(0, 0, 0, 1), 0 2px 6px rgba(0, 0, 0, 0.9) !important; font-weight: 700 !important; letter-spacing: 4px !important; position: relative; z-index: 10; -webkit-text-fill-color: #ffffff !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; text-rendering: optimizeLegibility !important; filter: drop-shadow(0 0 15px rgba(3, 158, 227, 0.9)); animation: subtitleShine 3s ease-in-out infinite; } @keyframes subtitleShine { 0%, 100% { filter: drop-shadow(0 0 15px rgba(3, 158, 227, 0.9)); } 50% { filter: drop-shadow(0 0 25px rgba(3, 158, 227, 1)) drop-shadow(0 0 40px rgba(0, 123, 255, 0.8)); } } /* Modern Tech Particle Effect Overlay - Enhanced */ .rev_slider::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(circle at 15% 25%, rgba(3, 158, 227, 0.25) 0%, transparent 25%), radial-gradient(circle at 85% 75%, rgba(0, 123, 255, 0.25) 0%, transparent 25%), radial-gradient(circle at 50% 50%, rgba(13, 110, 253, 0.20) 0%, transparent 35%), radial-gradient(circle at 25% 80%, rgba(3, 158, 227, 0.15) 0%, transparent 20%), radial-gradient(circle at 75% 20%, rgba(0, 123, 255, 0.15) 0%, transparent 20%); pointer-events: none; z-index: 2; animation: particleFloat 10s ease-in-out infinite; } @keyframes particleFloat { 0%, 100% { opacity: 0.5; transform: translateY(0px) scale(1); } 33% { opacity: 0.8; transform: translateY(-15px) scale(1.05); } 66% { opacity: 0.6; transform: translateY(-30px) scale(0.95); } } /* Modern Animated Grid Pattern Overlay */ .rev_slider::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(rgba(3, 158, 227, 0.12) 2px, transparent 2px), linear-gradient(90deg, rgba(3, 158, 227, 0.12) 2px, transparent 2px), linear-gradient(rgba(0, 123, 255, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 123, 255, 0.08) 1px, transparent 1px); background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px; background-position: 0 0, 0 0, 0 0, 0 0; pointer-events: none; z-index: 1; opacity: 0.4; animation: gridMove 20s linear infinite; } @keyframes gridMove { 0% { background-position: 0 0, 0 0, 0 0, 0 0; } 100% { background-position: 100px 100px, 100px 100px, 20px 20px, 20px 20px; } } /* Pulsing Tech Lines Animation - Enhanced */ @keyframes techPulse { 0%, 100% { box-shadow: 0 0 30px rgba(3, 158, 227, 0.5), 0 0 60px rgba(3, 158, 227, 0.3), 0 0 90px rgba(0, 123, 255, 0.2), inset 0 0 30px rgba(3, 158, 227, 0.2); } 50% { box-shadow: 0 0 50px rgba(3, 158, 227, 0.7), 0 0 100px rgba(3, 158, 227, 0.5), 0 0 150px rgba(0, 123, 255, 0.4), inset 0 0 50px rgba(3, 158, 227, 0.3); } } .slider-layer-bg-darker { animation: techPulse 2.5s ease-in-out infinite; } /* Enhanced Scanline Tech Effect with Multiple Lines */ @keyframes scanline { 0% { transform: translateY(-100%); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(200vh); opacity: 0; } } @keyframes scanlineFast { 0% { transform: translateY(-100%); opacity: 0; } 5% { opacity: 0.6; } 95% { opacity: 0.6; } 100% { transform: translateY(200vh); opacity: 0; } } .rev_slider .tp-bgimg-layer::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, transparent 0%, rgba(3, 158, 227, 0.3) 20%, rgba(3, 158, 227, 0.9) 50%, rgba(3, 158, 227, 0.3) 80%, transparent 100%); box-shadow: 0 0 10px rgba(3, 158, 227, 0.8), 0 0 20px rgba(3, 158, 227, 0.5); animation: scanline 5s linear infinite; pointer-events: none; z-index: 3; } .rev_slider .tp-bgimg-layer::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent 0%, rgba(0, 123, 255, 0.5) 50%, transparent 100%); animation: scanlineFast 3s linear infinite; animation-delay: 1s; pointer-events: none; z-index: 3; } /* Footer Style - Border Top */ .footer_style_2 { padding: 0; margin: 0; width: 100%; border-top: 5px solid #039ee3; /* Franja celeste visible */ } /* Language Switcher */ .lang-switcher { float: left; margin-right: 15px; } .lang-switcher ul { margin: 0; padding: 0; } .lang-switcher ul li { display: inline-block; margin-left: 5px; } .lang-switcher ul li a { color: #fff; padding: 2px 6px; border-radius: 3px; font-size: 14px; font-weight: 600; transition: all 0.3s ease; } .lang-switcher ul li a.active, .lang-switcher ul li a:hover { background-color: #039ee3; color: #fff; text-decoration: none; } /* Cookie Banner */ #cookie-banner { position: fixed; bottom: 0; left: 0; width: 100%; background-color: rgba(26, 26, 26, 0.95); color: #fff; padding: 20px; z-index: 10000; display: none; backdrop-filter: blur(5px); border-top: 1px solid #333; } .cookie-banner-content { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; } .cookie-banner-content p { margin: 0; padding-right: 20px; } .cookie-banner-content p a { color: #039ee3; text-decoration: underline; } #cookie-accept-btn { white-space: nowrap; }