/* ============================================================ IAPLIKADA — darkmode.css Modo oscuro inspirado en el estilo de calculadoraudis.com Activado con [data-theme="dark"] en Versión 1.0 | Junio 2026 ============================================================ */ /* ============================================================ 1. VARIABLES — MODO OSCURO ============================================================ */ [data-theme="dark"] { /* --- Superficies --- */ --bg-body: #0D1117; --bg-surface: #131A2B; --bg-surface-2: #1A2540; --bg-section-alt: #0F1520; /* --- Bordes --- */ --border-subtle: rgba(255, 255, 255, 0.07); --border-mid: rgba(255, 255, 255, 0.12); --border-accent: rgba(22, 171, 141, 0.28); /* --- Texto --- */ --text-primary: rgba(255, 255, 255, 0.92); --text-secondary: rgba(255, 255, 255, 0.55); --text-muted: rgba(255, 255, 255, 0.30); /* --- Sombras dark --- */ --shadow-card: 0 1px 0 var(--border-subtle), 0 4px 24px rgba(0,0,0,0.4); --shadow-hover: 0 1px 0 rgba(22,171,141,0.2), 0 8px 32px rgba(0,0,0,0.55); } /* ============================================================ 2. BASE BODY Y FONDOS DE SECCIÓN ============================================================ */ [data-theme="dark"] body { background-color: var(--bg-body); color: var(--text-secondary); } [data-theme="dark"] .bg-blanco, [data-theme="dark"] .section.bg-blanco { background-color: var(--bg-body); } [data-theme="dark"] .bg-palido, [data-theme="dark"] .section.bg-palido { background-color: var(--bg-section-alt); } [data-theme="dark"] .bg-dark-pattern { background-color: #070C15; background-image: radial-gradient(circle at 20% 30%, rgba(22,171,141,0.08) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(58,83,159,0.10) 0%, transparent 50%); } [data-theme="dark"] .cta-section { background: var(--bg-section-alt) !important; } /* ============================================================ 3. TIPOGRAFÍA Y ENCABEZADOS ============================================================ */ [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: var(--text-primary); } /* Títulos de sección con color explícito inline */ [data-theme="dark"] h2[style*="color:var(--azul-profundo)"], [data-theme="dark"] h2[style*="color: var(--azul-profundo)"] { color: var(--text-primary) !important; } [data-theme="dark"] p { color: var(--text-secondary); } [data-theme="dark"] p[style*="color:var(--gris-medio)"], [data-theme="dark"] p[style*="color: var(--gris-medio)"] { color: var(--text-secondary) !important; } [data-theme="dark"] .section-eyebrow { color: var(--teal-claro); } [data-theme="dark"] .section-eyebrow::before { background: linear-gradient(135deg, var(--teal) 0%, var(--teal-claro) 100%); } /* ============================================================ 4. NAVBAR — MODO OSCURO ============================================================ */ [data-theme="dark"] .navbar { background: transparent; } [data-theme="dark"] .navbar.scrolled { background: rgba(13, 17, 23, 0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border-subtle); box-shadow: 0 1px 0 var(--border-subtle), 0 8px 32px rgba(0,0,0,0.4); } [data-theme="dark"] .navbar.scrolled .navbar__link { color: var(--text-secondary); } [data-theme="dark"] .navbar.scrolled .navbar__link:hover, [data-theme="dark"] .navbar.scrolled .navbar__link[aria-current="page"] { color: var(--text-primary); } [data-theme="dark"] .navbar__link::after { background: linear-gradient(135deg, var(--teal) 0%, var(--teal-claro) 100%); } /* CTA navbar en dark mode → mismo estilo que btn--whatsapp */ [data-theme="dark"] .navbar__cta.btn--primary { background: #25D366; border-color: transparent; color: var(--blanco); box-shadow: 0 4px 20px rgba(37, 211, 102, 0.35); } [data-theme="dark"] .navbar__cta.btn--primary:hover { background: #20BD5A; color: var(--blanco); box-shadow: 0 8px 28px rgba(37, 211, 102, 0.5); transform: translateY(-2px); } /* Mobile nav overlay en dark mode → mismo fondo que service cards (#131A2B) */ [data-theme="dark"] .navbar__nav.open { background: #131A2B; } /* ============================================================ 5. BOTÓN LUNA (THEME TOGGLE) ============================================================ */ .theme-toggle { flex-shrink: 0; width: 34px; height: 34px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.75); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1rem; transition: background var(--dur-normal) var(--ease-out), border-color var(--dur-normal) var(--ease-out), color var(--dur-normal) var(--ease-out), transform var(--dur-fast) var(--ease-out); position: relative; } .theme-toggle:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.25); color: var(--blanco); transform: scale(1.08); } .theme-toggle:active { transform: scale(0.93); } /* Ícono luna → sol en dark mode */ .theme-toggle .icon-moon { display: block; } .theme-toggle .icon-sun { display: none; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } [data-theme="dark"] .theme-toggle { background: rgba(255, 255, 255, 0.06); border-color: rgba(22, 171, 141, 0.25); color: var(--teal-claro); } [data-theme="dark"] .theme-toggle:hover { background: rgba(22, 171, 141, 0.12); border-color: var(--teal); color: var(--teal); } /* Tooltip del botón */ .theme-toggle__tooltip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--gris-oscuro); color: var(--blanco); font-size: var(--text-xs); font-weight: var(--fw-bold); padding: 0.3rem 0.6rem; border-radius: var(--radius-sm); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity var(--dur-fast); } [data-theme="dark"] .theme-toggle__tooltip { background: var(--bg-surface-2); border: 1px solid var(--border-subtle); } .theme-toggle__tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-top-color: var(--gris-oscuro); } [data-theme="dark"] .theme-toggle__tooltip::after { border-top-color: var(--bg-surface-2); } .theme-toggle:hover .theme-toggle__tooltip { opacity: 1; } /* ============================================================ 6. BOTONES — OVERRIDES DARK ============================================================ */ [data-theme="dark"] .btn--primary { background: linear-gradient(135deg, #1E6B8A 0%, #16AB8D 100%); box-shadow: 0 2px 12px rgba(22,171,141,0.2); } [data-theme="dark"] .btn--primary:hover { box-shadow: 0 6px 24px rgba(22,171,141,0.35); } [data-theme="dark"] .btn--outline { border-color: var(--border-mid); color: var(--text-primary); } [data-theme="dark"] .btn--outline:hover { border-color: var(--teal); background: rgba(22, 171, 141, 0.08); color: var(--text-primary); } [data-theme="dark"] .btn--outline-dark { color: var(--teal-claro); border-color: rgba(22, 171, 141, 0.35); } [data-theme="dark"] .btn--outline-dark:hover { background: rgba(22, 171, 141, 0.1); color: var(--teal-claro); box-shadow: 0 0 0 1px var(--teal); } /* ============================================================ 7. CARDS DE SERVICIO — DARK ============================================================ */ [data-theme="dark"] .service-card { background: var(--bg-surface); border-color: var(--border-subtle); box-shadow: var(--shadow-card); } [data-theme="dark"] .service-card:hover { box-shadow: var(--shadow-hover); border-color: transparent; } [data-theme="dark"] .service-card::after { background: linear-gradient(135deg, rgba(22,171,141,0.05) 0%, rgba(58,83,159,0.05) 100%); } [data-theme="dark"] .service-card__icon { background: rgba(22, 171, 141, 0.10); border: 1px solid rgba(22, 171, 141, 0.15); } [data-theme="dark"] .service-card:hover .service-card__icon { background: linear-gradient(135deg, rgba(22,171,141,0.25) 0%, rgba(58,83,159,0.20) 100%); border-color: var(--teal); } [data-theme="dark"] .service-card__icon svg, [data-theme="dark"] .service-card__icon i { color: var(--teal-claro); } [data-theme="dark"] .service-card:hover .service-card__icon svg, [data-theme="dark"] .service-card:hover .service-card__icon i { color: var(--blanco); } [data-theme="dark"] .service-card__number { color: var(--teal); } [data-theme="dark"] .service-card__title { color: var(--text-primary); } [data-theme="dark"] .service-card__desc { color: var(--text-secondary); } [data-theme="dark"] .service-card__tag { background: rgba(22, 171, 141, 0.08); color: var(--teal-claro); border: 1px solid rgba(22,171,141,0.15); } [data-theme="dark"] .service-card:hover .service-card__tag { background: rgba(22, 171, 141, 0.14); color: var(--teal-claro); } [data-theme="dark"] .service-card__link { color: var(--teal); } [data-theme="dark"] .service-card__link:hover { color: var(--teal-claro); } /* ============================================================ 8. STATS — DARK ============================================================ */ [data-theme="dark"] .stat-card { position: relative; } [data-theme="dark"] .stat-card:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 20%; height: 60%; width: 1px; background: var(--border-subtle); } [data-theme="dark"] .stat-card__number { background: linear-gradient(135deg, var(--teal) 0%, var(--teal-claro) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } [data-theme="dark"] .stat-card__label { color: var(--text-secondary); } /* Contenedor de stats en dark — sin fondo diferente al body */ [data-theme="dark"] .grid-4[style*="background:var(--azul-profundo)"], [data-theme="dark"] .grid-4[style*="background: var(--azul-profundo)"] { background: var(--bg-surface) !important; border: 1px solid var(--border-subtle) !important; } /* Sección Portafolio (#servicios) — mismo gradiente que "el momento es ahora" */ [data-theme="dark"] #servicios { position: relative; background-color: #0F1520 !important; } [data-theme="dark"] #servicios::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 80% 30%, rgba(22,171,141,0.07) 0%, transparent 55%), radial-gradient(circle at 15% 70%, rgba(58,83,159,0.06) 0%, transparent 50%); pointer-events: none; z-index: 0; } [data-theme="dark"] #servicios > .container { position: relative; z-index: 1; } /* ============================================================ 9. DIFERENCIADORES — DARK ============================================================ */ [data-theme="dark"] .differentiator { background: var(--bg-surface); border-color: var(--border-subtle); } [data-theme="dark"] .differentiator:hover { border-color: var(--border-accent); box-shadow: var(--shadow-hover); } [data-theme="dark"] .differentiator__icon { background: linear-gradient(135deg, rgba(22,171,141,0.2) 0%, rgba(58,83,159,0.2) 100%); border: 1px solid rgba(22,171,141,0.25); color: var(--teal-claro); } [data-theme="dark"] .differentiator__content h3 { color: var(--text-primary); } [data-theme="dark"] .differentiator__content p { color: var(--text-secondary); } /* ============================================================ 10. CERT BADGES — DARK ============================================================ */ [data-theme="dark"] .cert-badge { background: rgba(22, 171, 141, 0.07); border-color: rgba(22, 171, 141, 0.2); color: var(--teal-claro); } [data-theme="dark"] .cert-badge i { color: var(--teal); } /* ============================================================ 11. SECTOR CHIPS — DARK (fuera de bg-dark-pattern) ============================================================ */ [data-theme="dark"] .sector-chip { background: var(--bg-surface); border-color: var(--border-mid); color: var(--text-secondary); } [data-theme="dark"] .sector-chip:hover { background: rgba(22, 171, 141, 0.10); border-color: var(--teal); color: var(--text-primary); } /* ============================================================ 12. FORMULARIOS — DARK ============================================================ */ [data-theme="dark"] .form-group label { color: var(--text-secondary); } [data-theme="dark"] .form-group input, [data-theme="dark"] .form-group textarea, [data-theme="dark"] .form-group select { background: var(--bg-surface); border-color: var(--border-mid); color: var(--text-primary); } [data-theme="dark"] .form-group input:focus, [data-theme="dark"] .form-group textarea:focus, [data-theme="dark"] .form-group select:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(22, 171, 141, 0.12); } [data-theme="dark"] .form-group input::placeholder, [data-theme="dark"] .form-group textarea::placeholder { color: var(--text-muted); } [data-theme="dark"] .form-consent { background: var(--bg-surface); border-color: var(--border-subtle); } [data-theme="dark"] .form-consent label { color: var(--text-secondary); } /* ============================================================ 13. FOOTER — DARK (ya es dark, ajustes sutiles) ============================================================ */ [data-theme="dark"] .footer { background: #070C15; border-top: 1px solid var(--border-subtle); } [data-theme="dark"] .footer__grid { border-color: var(--border-subtle); } /* ============================================================ 14. BARRA DE LECTURA — DARK ============================================================ */ [data-theme="dark"] .reading-progress { background: linear-gradient(90deg, var(--teal) 0%, var(--teal-claro) 100%); } /* ============================================================ 15. HERO SECTION — DARK (ya es dark, detalles) ============================================================ */ [data-theme="dark"] .hero__badge { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.12); } /* ============================================================ 16. TRANSICIÓN SUAVE AL CAMBIAR TEMA ============================================================ */ html { transition: background-color 300ms ease, color 300ms ease; } [data-theme="dark"] body, [data-theme="dark"] .service-card, [data-theme="dark"] .differentiator, [data-theme="dark"] .navbar { transition-property: background-color, color, border-color, box-shadow; transition-duration: 300ms; transition-timing-function: ease; }