/* ======================================== NETTENSOFT - Dark Mode Activa con: ======================================== */ [data-theme="dark"] { /* Override neutral colors */ --color-white: #0F172A; --color-gray-50: #0F172A; --color-gray-100: #1E293B; --color-gray-200: #334155; --color-gray-300: #475569; --color-gray-400: #64748B; --color-gray-500: #94A3B8; --color-gray-600: #CBD5E1; --color-gray-700: #E2E8F0; --color-gray-800: #F1F5F9; --color-gray-900: #F8FAFC; --color-black: #FFFFFF; /* Override gradient-hero para que no use los grays invertidos */ --gradient-hero: linear-gradient(135deg, #020617 0%, #1e3a8a 50%, #020617 100%); } /* ---- Body ---- */ [data-theme="dark"] body { background-color: #0F172A; color: #CBD5E1; } /* ---- Cards ---- */ [data-theme="dark"] .card { background: #1E293B; border-color: rgba(255, 255, 255, 0.07); } [data-theme="dark"] .card:hover { border-color: transparent; } /* ---- Section backgrounds ---- */ [data-theme="dark"] .services, [data-theme="dark"] .features { background: #0F172A; } [data-theme="dark"] section:not(.hero):not(.stats):not(.cta) { background: #0F172A; } /* ---- Headings & text ---- */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: #F1F5F9; } [data-theme="dark"] p { color: #94A3B8; } [data-theme="dark"] .section__description { color: #94A3B8; } [data-theme="dark"] .card__title { color: #F1F5F9; } [data-theme="dark"] .card__text { color: #94A3B8; } /* ---- Process steps ---- */ [data-theme="dark"] .process-step__title { color: #F1F5F9; } [data-theme="dark"] .process-step__text { color: #94A3B8; } /* ---- Reach section ---- */ [data-theme="dark"] .reach__highlight-label { color: #64748B; } [data-theme="dark"] .reach__location-tag { background: rgba(37, 99, 235, 0.12); border-color: rgba(37, 99, 235, 0.25); } /* ---- Section label pill ---- */ [data-theme="dark"] .section__label { background: rgba(37, 99, 235, 0.15); } /* ---- Footer ---- */ [data-theme="dark"] .footer { background: #020617; } /* ---- Header nav — desktop: transparente, links blancos ---- */ @media (min-width: 1025px) { [data-theme="dark"] .header__nav { background: transparent; } [data-theme="dark"] .header__nav .header__nav-link { color: rgba(255, 255, 255, 0.8); } [data-theme="dark"] .header__nav .header__nav-link:hover, [data-theme="dark"] .header__nav .header__nav-link--active { color: #ffffff; background: rgba(255, 255, 255, 0.1); } } /* ---- Mobile nav panel ---- */ @media (max-width: 1024px) { [data-theme="dark"] .header__nav { background: #1E293B; } [data-theme="dark"] .header__nav .header__nav-link { color: #94A3B8; } [data-theme="dark"] .header__nav .header__nav-link:hover { color: #F1F5F9; background: rgba(255, 255, 255, 0.06); } } /* ---- Botón "Comenzar Proyecto" en dark mode ---- */ [data-theme="dark"] .header__cta .btn--white { background: var(--gradient-primary); color: #ffffff; box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35); } [data-theme="dark"] .header__cta .btn--white:hover { color: #ffffff; box-shadow: 0 6px 20px rgba(37, 99, 235, 0.5); } /* ---- App Types Section ---- */ [data-theme="dark"] .app-types { background: #0A1628; } [data-theme="dark"] .app-type-card { background: #1E293B; border-color: rgba(255, 255, 255, 0.07); } [data-theme="dark"] .app-type-card:hover { border-color: transparent; box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .app-type-card__title { color: #F1F5F9; } [data-theme="dark"] .app-type-card__text { color: #64748B; } [data-theme="dark"] .app-tag { background: rgba(255, 255, 255, 0.06); color: #94A3B8; border-color: rgba(255, 255, 255, 0.1); } [data-theme="dark"] .app-type-card:hover .app-tag { background: rgba(37, 99, 235, 0.15); color: #93C5FD; border-color: rgba(37, 99, 235, 0.3); } /* ---- Chatbot Widget ---- */ [data-theme="dark"] .chatbot-fab__label { background: #1E293B; color: #E2E8F0; box-shadow: 0 4px 16px rgba(0,0,0,0.4); } [data-theme="dark"] .chatbot-popup { background: #1E293B; border-color: rgba(255, 255, 255, 0.07); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); } [data-theme="dark"] .chatbot-popup__body { background: #0F172A; } [data-theme="dark"] .chatbot-msg__bubble { background: #1E293B; color: #CBD5E1; box-shadow: 0 1px 3px rgba(0,0,0,0.3); } [data-theme="dark"] .chatbot-typing__bubble { background: #1E293B; box-shadow: 0 1px 3px rgba(0,0,0,0.3); } [data-theme="dark"] .chatbot-popup__replies { background: #1E293B; border-top-color: rgba(255,255,255,0.06); } [data-theme="dark"] .chatbot-reply { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); color: #CBD5E1; } [data-theme="dark"] .chatbot-reply:hover { background: rgba(37, 211, 102, 0.1); border-color: rgba(37, 211, 102, 0.3); color: #4ADE80; } [data-theme="dark"] .chatbot-popup__footer { background: #1E293B; } /* ---- Theme Toggle Button ---- */ .theme-toggle { width: 40px; height: 40px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.15); color: var(--color-white); cursor: pointer; transition: all var(--transition-fast); flex-shrink: 0; } .theme-toggle:hover { background: rgba(255, 255, 255, 0.18); transform: scale(1.05); } .header--scrolled .theme-toggle { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.12); color: var(--color-white); } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* ---- Tech Carousel ---- */ [data-theme="dark"] .tech-carousel { background: #0A1628; border-color: rgba(255, 255, 255, 0.05); } [data-theme="dark"] .tech-logo__name { color: #94A3B8; } [data-theme="dark"] .tech-logo--github svg path, [data-theme="dark"] .tech-logo--apple svg path { fill: #E2E8F0; }