/* ========================================================================== CDM / COMEDIMA - darkmode.css Modo nocturno: sobreescribe los tokens semanticos cuando [data-theme="dark"] esta en . Transicion suave via las transiciones declaradas en style.css (body, header, etc.) ========================================================================== */ [data-theme="dark"] { /* Tokens semanticos para modo oscuro */ --bg: #0d0d11; --bg-alt: #14141a; --bg-elev: #1a1a22; --text: #c7c7d1; --text-muted: #8a8a96; --heading: #f4f4f6; --border: #26262f; --border-strong: #34343f; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .3); --shadow-md: 0 4px 14px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .35); --shadow-lg: 0 20px 50px rgba(0, 0, 0, .6), 0 6px 16px rgba(0, 0, 0, .4); --shadow-yellow: 0 10px 34px rgba(245, 184, 0, .25); --glass-bg: rgba(20, 20, 26, .55); --glass-border: rgba(255, 255, 255, .08); } /* Icono del toggle: en dark, mostrar luna; esconder sol */ [data-theme="dark"] .theme-toggle__icon--sun { opacity: 0; transform: rotate(-90deg) scale(.5); } [data-theme="dark"] .theme-toggle__icon--moon { opacity: 1; transform: rotate(0) scale(1); } /* Header solido en dark */ [data-theme="dark"] .header.is-solid { background: rgba(13, 13, 17, .9); } [data-theme="dark"] .header.is-solid .nav__logo-text { color: var(--white); } [data-theme="dark"] .header.is-solid .nav__link { color: var(--gray-300); } [data-theme="dark"] .header.is-solid .nav__toggle span { background: var(--white); } [data-theme="dark"] .header.is-solid .lang-toggle, [data-theme="dark"] .header.is-solid .theme-toggle { background: var(--gray-800); color: var(--gray-200); } /* Cards y superficies elevadas en dark */ [data-theme="dark"] .what-card, [data-theme="dark"] .why-card, [data-theme="dark"] .mini-card, [data-theme="dark"] .contact__wrap { background: var(--bg-elev); border-color: var(--border); } [data-theme="dark"] .what-card__icon { background: linear-gradient(135deg, var(--gray-800), var(--gray-700)); color: var(--yellow); } /* Formulario de contacto en dark */ [data-theme="dark"] .contact-form .field input, [data-theme="dark"] .contact-form .field textarea { background: var(--bg-alt); border-color: var(--border-strong); color: var(--text); } [data-theme="dark"] .contact-form .field input::placeholder, [data-theme="dark"] .contact-form .field textarea::placeholder { color: var(--gray-500); } /* Lang menu en dark */ [data-theme="dark"] .lang-menu { background: var(--bg-elev); } [data-theme="dark"] .lang-menu__btn:hover { background: var(--gray-800); } /* Scrollbar en dark */ [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg-alt); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--gray-700); } /* Mapa del footer un poco mas oscuro en dark */ [data-theme="dark"] .footer__map iframe { filter: grayscale(.8) invert(.92) contrast(.9); } /* El footer siempre es oscuro: en dark acentuamos el borde superior */ [data-theme="dark"] .footer { border-top: 1px solid var(--border); }