/* ===================================================== theme-light.css — Tema claro Liquid Glass / Celeste VORTEX Agency — vortex_pagina_web Uso: agregar class="light-theme" en ===================================================== */ body.light-theme { /* ---- OVERRIDE DE VARIABLES ---- */ --navy: #94c3f1; --navy-light: #c8e0f8; --navy-mid: #98c2e2; --blue: #5891ca; --mid-blue: #1a6fd4; --sky: #0e8fd6; --aqua: #008fad; --aqua-light: #00b8d4; --celeste: #005f80; --white: #0a1a2e; --gray-light: #2a4a6a; --gray: #3a5a7a; --gray-dark: #7a9ab8; --border: rgba(0, 120, 180, 0.18); --border-soft: rgba(0, 80, 140, 0.08); --glass: rgba(255, 255, 255, 0.45); --glass-hover: rgba(255, 255, 255, 0.62); --glow: 0 0 40px rgba(0, 143, 173, 0.2); --glow-strong: 0 0 60px rgba(0, 143, 173, 0.35); --shadow-card: 0 20px 50px rgba(0, 80, 140, 0.18); background-color: #a4c5da; color: #0a1a2e; } /* ---- FONDO GENERAL ---- */ body.light-theme { background: radial-gradient(ellipse 120% 80% at 60% -10%, rgba(180, 225, 255, 0.8) 0%, transparent 60%), radial-gradient(ellipse 80% 60% at 10% 90%, rgba(200, 235, 255, 0.6) 0%, transparent 50%), linear-gradient(180deg, #cce4f6 0%, #ddeeff 40%, #e8f4ff 100%); background-attachment: fixed; } /* ---- SCROLLBAR ---- */ body.light-theme ::-webkit-scrollbar-track { background: #d0e8f8; } body.light-theme ::-webkit-scrollbar-thumb { background: rgba(0, 120, 180, 0.25); } body.light-theme ::-webkit-scrollbar-thumb:hover { background: var(--aqua); } /* ---- SELECTION ---- */ body.light-theme ::selection { background: rgba(0, 143, 173, 0.2); color: #0a1a2e; } /* ---- LOADER ---- */ body.light-theme #loader { background: #d4eaf8; } /* ---- NAVBAR / DOCK ---- */ body.light-theme #navbar { background: rgba(255, 255, 255, 0.52); border-color: rgba(0, 120, 200, 0.2); box-shadow: 0 8px 32px rgba(0, 80, 160, 0.12), 0 2px 8px rgba(0, 80, 160, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(0, 100, 180, 0.06); } body.light-theme #navbar::before { background: linear-gradient( 160deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.2) 40%, rgba(0, 143, 173, 0.06) 100% ); } body.light-theme #navbar::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent); } body.light-theme #navbar.scrolled { background: rgba(255, 255, 255, 0.75); box-shadow: 0 12px 48px rgba(0, 80, 160, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9); } body.light-theme .nav-links > li > a { color: rgba(20, 60, 100, 0.65); } body.light-theme .nav-links > li > a:hover { color: rgba(10, 26, 46, 0.9); background: rgba(0, 100, 180, 0.07); } body.light-theme .nav-links > li > a.active { color: var(--aqua); background: rgba(0, 143, 173, 0.1); } body.light-theme .nav-separator { background: linear-gradient(to bottom, transparent, rgba(0,100,180,0.15), transparent); } body.light-theme .nav-dropdown { background: rgba(240, 250, 255, 0.85); border-color: rgba(0, 120, 200, 0.18); box-shadow: 0 -8px 40px rgba(0, 80, 160, 0.15), inset 0 1px 0 rgba(255,255,255,0.9); } body.light-theme .nav-dropdown::after { background: rgba(240, 250, 255, 0.85); border-color: rgba(0, 120, 200, 0.18); } body.light-theme .nav-dropdown a { color: rgba(20, 60, 100, 0.75); } body.light-theme .nav-dropdown a:hover { background: rgba(0, 143, 173, 0.08); color: var(--aqua); } /* ---- BOTÓN COTIZACIÓN FLOTANTE ---- */ body.light-theme #cta-float a { background: rgba(255, 255, 255, 0.55); border-color: rgba(0, 143, 173, 0.3); color: #0a1a2e; box-shadow: 0 8px 32px rgba(0, 100, 180, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.95); } body.light-theme #cta-float a:hover { background: rgba(255, 255, 255, 0.75); border-color: rgba(0, 143, 173, 0.5); box-shadow: 0 14px 44px rgba(0, 143, 173, 0.25), inset 0 1px 0 rgba(255,255,255,1); } /* ---- HERO ---- */ body.light-theme .hero-bg { background: radial-gradient(ellipse 80% 60% at 70% 50%, rgba(120, 190, 250, 0.3) 0%, transparent 70%), radial-gradient(ellipse 40% 60% at 20% 80%, rgba(0, 180, 210, 0.15) 0%, transparent 60%), transparent; } body.light-theme .hero-grid { background-image: linear-gradient(rgba(0, 100, 180, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 100, 180, 0.1) 1px, transparent 1px); } body.light-theme .orb-1 { background: rgba(0, 143, 173, 0.12); } body.light-theme .orb-2 { background: rgba(30, 111, 212, 0.1); } body.light-theme .orb-3 { background: rgba(45, 156, 219, 0.1); } body.light-theme .hero-eyebrow { background: rgba(255, 255, 255, 0.5); border-color: rgba(0, 120, 180, 0.2); color: var(--aqua); } body.light-theme .hero-title { color: #0a1a2e; } body.light-theme .hero-desc { color: #3a5a7a; } body.light-theme .hero-video-placeholder { background: linear-gradient(135deg, rgba(200,230,255,0.8), rgba(180,215,250,0.6)); border-color: rgba(0, 120, 200, 0.2); } /* ---- SECTIONS ---- */ body.light-theme #services { background: linear-gradient(180deg, #d4eaf8 0%, #c8e0f5 100%); } body.light-theme #process { background: #d0e6f6; } body.light-theme #partners { background: #cce0f4; border-color: rgba(0, 100, 180, 0.1); } body.light-theme #blog { background: #d4eaf8; } body.light-theme #contact { background: #cce0f4; } body.light-theme #footer { background: rgba(200, 225, 248, 0.6); border-color: rgba(0, 100, 180, 0.1); } /* ---- CARDS — Liquid Glass claro ---- */ body.light-theme .service-card, body.light-theme .blog-card, body.light-theme .step-content, body.light-theme .glass-card { background: rgba(255, 255, 255, 0.5); border-color: rgba(255, 255, 255, 0.8); box-shadow: 0 4px 20px rgba(0, 80, 160, 0.08), inset 0 1px 0 rgba(255,255,255,0.95); } body.light-theme .service-card::before, body.light-theme .blog-card::before, body.light-theme .step-content::before { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent); } body.light-theme .service-card:hover, body.light-theme .blog-card:hover, body.light-theme .step-content:hover { background: rgba(255, 255, 255, 0.72); border-color: rgba(0, 143, 173, 0.3); box-shadow: 0 20px 50px rgba(0, 80, 160, 0.15), inset 0 1px 0 rgba(255,255,255,1); } body.light-theme .service-name, body.light-theme .blog-title, body.light-theme .step-content h3 { color: #0a1a2e; } body.light-theme .service-desc, body.light-theme .blog-excerpt, body.light-theme .step-content p { color: #3a5a7a; } body.light-theme .service-icon { background: rgba(0, 100, 180, 0.1); border-color: rgba(0, 100, 180, 0.15); } body.light-theme .partner-logo { background: rgba(255, 255, 255, 0.45); border-color: rgba(255, 255, 255, 0.75); color: #3a5a7a; } body.light-theme .partner-logo:hover { border-color: rgba(0,143,173,0.35); color: var(--aqua); } body.light-theme .step-dot { background: linear-gradient(135deg, rgba(14, 143, 214, 0.8), rgba(0, 143, 173, 0.7)); border-color: rgba(0, 143, 173, 0.4); color: #fff; box-shadow: 0 0 20px rgba(0, 143, 173, 0.2); } /* ---- PORTFOLIO CARDS ---- */ body.light-theme .portfolio-card { border-color: rgba(255, 255, 255, 0.6); box-shadow: 0 4px 20px rgba(0, 80, 160, 0.1); } body.light-theme .portfolio-card:hover { border-color: rgba(0, 143, 173, 0.35); box-shadow: 0 20px 50px rgba(0, 80, 160, 0.2); } body.light-theme .portfolio-card-overlay { background: linear-gradient(180deg, transparent 20%, rgba(200, 225, 248, 0.95) 100%); } body.light-theme .portfolio-card-title { color: #0a1a2e; } /* ---- FORMS ---- */ body.light-theme .form-control { background: rgba(255, 255, 255, 0.55); border-color: rgba(0, 120, 200, 0.18); color: #0a1a2e; box-shadow: inset 0 1px 0 rgba(255,255,255,0.9); } body.light-theme .form-control:focus { border-color: rgba(0, 143, 173, 0.55); background: rgba(255, 255, 255, 0.75); box-shadow: 0 0 0 3px rgba(0, 143, 173, 0.1), inset 0 1px 0 rgba(255,255,255,1); } body.light-theme .form-control:hover:not(:focus) { border-color: rgba(0, 120, 200, 0.3); background: rgba(255, 255, 255, 0.65); } body.light-theme .form-control::placeholder { color: rgba(58, 90, 122, 0.5); } body.light-theme select.form-control option { background: #d4eaf8; color: #0a1a2e; } body.light-theme .form-group label { color: #3a5a7a; } /* ---- MODAL ---- */ body.light-theme #quote-modal { background: rgba(180, 215, 248, 0.6); } body.light-theme .modal-box { background: rgba(240, 250, 255, 0.72); border-color: rgba(255, 255, 255, 0.85); box-shadow: 0 40px 100px rgba(0, 80, 160, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.95); } body.light-theme .modal-close { background: rgba(255,255,255,0.4); border-color: rgba(0, 120, 200, 0.18); color: #0a1a2e; } body.light-theme .modal-close:hover { background: rgba(255,255,255,0.65); border-color: var(--aqua); color: var(--aqua); } /* ---- FOOTER ---- */ body.light-theme .footer-logo { background: linear-gradient(135deg, var(--sky), var(--aqua)); -webkit-background-clip: text; background-clip: text; } body.light-theme .footer-brand p { color: #3a5a7a; } body.light-theme .footer-col h4 { color: #0a1a2e; } body.light-theme .footer-col a { color: #3a5a7a; } body.light-theme .footer-col a:hover { color: var(--aqua); } body.light-theme .footer-bottom p { color: #3a5a7a; } body.light-theme .footer-bottom .footer-links a { color: #3a5a7a; } body.light-theme .footer-divider { background: rgba(0, 100, 180, 0.1); } /* ---- SOCIAL LINKS ---- */ body.light-theme .social-link { background: rgba(255, 255, 255, 0.45); border-color: rgba(0, 120, 200, 0.18); color: #3a5a7a; } body.light-theme .social-link:hover { background: var(--aqua); color: #fff; border-color: var(--aqua); } /* ---- BUTTONS ---- */ body.light-theme .btn-outline { border-color: rgba(0, 120, 200, 0.25); color: #0a1a2e; } body.light-theme .btn-outline:hover { background: rgba(255,255,255,0.4); border-color: var(--aqua); color: var(--aqua); } body.light-theme .filter-btn { border-color: rgba(0, 120, 200, 0.2); color: #3a5a7a; background: rgba(255,255,255,0.35); } /* ---- SECTION TAGS / TITLES ---- */ body.light-theme .section-title { color: #0a1a2e; } body.light-theme .section-subtitle { color: #3a5a7a; } body.light-theme .partners-label { color: #3a5a7a; } body.light-theme h1, body.light-theme h2, body.light-theme h3, body.light-theme h4 { color: #0a1a2e; } /* ---- PAGE HERO ---- */ body.light-theme .page-breadcrumb a { color: #3a5a7a; } body.light-theme .page-breadcrumb span:last-child { color: var(--aqua); } body.light-theme .page-hero-title { color: #0a1a2e; } body.light-theme .page-hero-subtitle { color: #3a5a7a; } body.light-theme #portafolio-page, body.light-theme #blog-page, body.light-theme #contacto-page { background: #d4eaf8; } /* ---- PAGE CTA BOTTOM ---- */ body.light-theme .page-cta-bottom { background: linear-gradient(135deg, rgba(255,255,255,0.5), rgba(180,220,255,0.4)); border-color: rgba(255,255,255,0.8); box-shadow: inset 0 1px 0 rgba(255,255,255,0.9); } /* ---- CONTACT SECTION ---- */ body.light-theme .contact-icon { background: rgba(255, 255, 255, 0.45); border-color: rgba(0, 120, 200, 0.18); } body.light-theme .contact-item h4 { color: #0a1a2e; } body.light-theme .contact-item p { color: #3a5a7a; } body.light-theme .map-placeholder { background: rgba(255, 255, 255, 0.35); border-color: rgba(0, 120, 200, 0.15); color: #3a5a7a; } /* ---- MOBILE MENU ---- */ body.light-theme .mobile-menu { background: rgba(230, 245, 255, 0.88); border-color: rgba(255,255,255,0.8); box-shadow: 0 -8px 40px rgba(0, 80, 160, 0.15), inset 0 1px 0 rgba(255,255,255,0.95); } body.light-theme .mobile-menu a { color: rgba(20, 60, 100, 0.75); } body.light-theme .mobile-menu a:hover { background: rgba(0, 143, 173, 0.08); color: var(--aqua); } body.light-theme .mobile-menu .mobile-cta { border-top-color: rgba(0, 100, 180, 0.12); } /* ---- PROCESS ---- */ body.light-theme .process-center-line { background: rgba(0, 100, 180, 0.12); } /* ---- STAT NUMBERS ---- */ body.light-theme .stat-label { color: #3a5a7a; } /* ---- BLOG TAG ---- */ body.light-theme .blog-tag { background: rgba(0, 143, 173, 0.1); border-color: rgba(0, 143, 173, 0.25); } body.light-theme .blog-meta { border-top-color: rgba(0, 100, 180, 0.1); } body.light-theme .blog-date { color: #3a5a7a; }