/* FCE — tema oscuro (activar con ) */
[data-theme="dark"] {
color-scheme: dark;
--teal: #35c8bf;
--teal-dark: #22a39b;
--text: #e8eaed;
--text-2: #bdc1c6;
--text-3: #80868b;
--border: #3c4043;
--bg: #131314;
--bg-2: #1e1f20;
--bg-3: #292a2d;
--teal-light: rgba(32, 178, 170, 0.14);
--teal-mid: rgba(32, 178, 170, 0.38);
--surface: #1e1f20;
--navbar-bg: #1a1b1e;
--footer-bg: #0f1014;
--sh-sm: 0 1px 4px rgba(0, 0, 0, 0.35);
--sh-md: 0 4px 16px rgba(0, 0, 0, 0.42);
--sh-lg: 0 8px 32px rgba(0, 0, 0, 0.48);
--sh-xl: 0 20px 60px rgba(0, 0, 0, 0.55);
}
/* Secciones públicas con colores fijos en claro */
[data-theme="dark"] .section--gray {
background: var(--bg-2);
}
[data-theme="dark"] #app,
[data-theme="dark"] .hero,
[data-theme="dark"] .home-pillars,
[data-theme="dark"] .home-contact-showcase {
background: var(--bg);
}
html[data-theme="dark"] body,
html[data-theme="dark"] #app {
background: var(--bg) !important;
}
html[data-theme="dark"] .hero,
html[data-theme="dark"] .section.home-pillars,
html[data-theme="dark"] .home-pillars {
background: var(--bg) !important;
}
html[data-theme="dark"] .hero + .section.home-pillars,
html[data-theme="dark"] .hero + .home-pillars {
margin-top: -1px;
padding-top: calc(70px + 1px);
border-top: 0;
}
[data-theme="dark"] .home-nosotros,
[data-theme="dark"] .home-metrics__item,
[data-theme="dark"] .fce-pillars__item.is-open,
[data-theme="dark"] .about-mvv-card,
[data-theme="dark"] .about-team-modern__card,
[data-theme="dark"] .about-actions__card {
background: var(--surface);
border-color: var(--border);
}
[data-theme="dark"] .about-actions__map-wrap {
border-color: rgba(255, 255, 255, .16);
box-shadow: none;
}
[data-theme="dark"] .home-nosotros__title,
[data-theme="dark"] .home-nosotros__lead,
[data-theme="dark"] .home-metrics__title,
[data-theme="dark"] .home-metrics__value,
[data-theme="dark"] .fce-pillars__title,
[data-theme="dark"] .fce-pillars__name {
color: var(--text);
}
[data-theme="dark"] .home-nosotros__pillars li,
[data-theme="dark"] .home-nosotros__quote blockquote,
[data-theme="dark"] .home-metrics__label,
[data-theme="dark"] .home-metrics__note,
[data-theme="dark"] .fce-pillars__subtitle,
[data-theme="dark"] .fce-pillars__text {
color: var(--text-2);
}
[data-theme="dark"] .home-nosotros .eyebrow {
background: var(--bg-2);
color: var(--text-3);
border-color: var(--border);
}
[data-theme="dark"] .home-nosotros__quote {
background: linear-gradient(
165deg,
color-mix(in srgb, var(--surface) 94%, transparent) 0%,
var(--bg-2) 100%
);
border-color: var(--border);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), var(--sh-sm);
text-align: center;
}
[data-theme="dark"] .home-nosotros__rating span {
color: var(--text);
font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .home-nosotros__quote blockquote {
color: var(--text);
}
[data-theme="dark"] .home-nosotros__quote figcaption strong {
color: var(--text);
}
[data-theme="dark"] .home-nosotros__quote figcaption span {
color: var(--text-3);
}
[data-theme="dark"] .home-metrics__item:hover,
[data-theme="dark"] .about-mvv-card:hover,
[data-theme="dark"] .about-team-modern__card:hover {
border-color: color-mix(in srgb, var(--teal) 42%, var(--border) 58%);
box-shadow: var(--sh-md);
}
[data-theme="dark"] .about-hero__summary {
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
}
[data-theme="dark"] .page-nosotros {
background: var(--bg);
}
[data-theme="dark"] .about-summary {
background: linear-gradient(180deg, #081d1e 0%, #0c2628 100%);
}
[data-theme="dark"] .about-summary__card {
background: var(--surface);
box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
[data-theme="dark"] .about-summary__quote { color: var(--text); }
[data-theme="dark"] .about-summary__text { color: var(--text-2); }
[data-theme="dark"] .about-summary__eyebrow { color: #7fc8bf; }
[data-theme="dark"] .about-summary__cta {
background: var(--teal);
border-color: var(--teal);
color: #06201f;
}
[data-theme="dark"] .about-summary__cta:hover {
background: #5ff0e6;
border-color: #5ff0e6;
}
[data-theme="dark"] .about-team {
background: var(--bg);
border-top-color: var(--border);
}
[data-theme="dark"] .about-team__head .eyebrow {
background: var(--bg-2);
border-color: var(--border);
color: var(--text-3);
}
[data-theme="dark"] .about-team__head .sec-title,
[data-theme="dark"] .about-team__head .sec-lead {
color: var(--text);
}
[data-theme="dark"] .about-team__head .sec-lead {
color: var(--text-2);
}
[data-theme="dark"] .about-actions {
background: var(--bg-2);
border-top-color: var(--border);
}
[data-theme="dark"] .about-actions__card {
background: var(--surface);
border-color: var(--border);
}
[data-theme="dark"] .about-actions__card .about-section__title {
color: var(--text);
}
[data-theme="dark"] .about-actions__card .about-section__lead,
[data-theme="dark"] .about-actions__card .about-actions__location {
color: var(--text-2);
}
[data-theme="dark"] .about-actions__card--contact {
background:
radial-gradient(420px 200px at 0% 0%, rgba(53, 200, 191, .2), transparent 60%),
linear-gradient(165deg, #1b2832 0%, #13212b 100%);
border-color: color-mix(in srgb, var(--teal) 32%, var(--border) 68%);
}
[data-theme="dark"] .about-actions__card--contact .about-section__title {
color: #f4f7f9;
}
[data-theme="dark"] .about-actions__card--contact .about-section__lead,
[data-theme="dark"] .about-actions__card--contact .about-actions__location,
[data-theme="dark"] .about-actions__card--contact .about-actions__form-note {
color: #c6d0d8;
}
[data-theme="dark"] .about-actions__card--contact .about-actions__form .form-input {
background: #10171d;
border-color: rgba(255, 255, 255, .14);
color: #edf2f6;
}
[data-theme="dark"] .about-actions__card--contact .about-actions__form .form-input::placeholder {
color: #8ea0ad;
}
[data-theme="dark"] .about-actions__card--contact .about-actions__form .form-input:focus {
border-color: var(--teal);
}
[data-theme="dark"] .about-team-modern__card {
background: linear-gradient(165deg, #1f2a33 0%, #18222b 100%);
border-color: var(--border);
}
[data-theme="dark"] .about-team-modern__card h3 {
color: var(--text);
}
[data-theme="dark"] .about-team-modern__card > span {
color: var(--text-3);
}
[data-theme="dark"] .about-team-modern__card p {
color: var(--text-2);
}
[data-theme="dark"] .about-team-modern__social a {
color: #7cd9d4;
border-color: rgba(53, 200, 191, .35);
background: rgba(53, 200, 191, .14);
}
[data-theme="dark"] .about-mvv-card__body {
color: var(--text-2);
}
[data-theme="dark"] .about-mvv-card__title {
color: var(--text);
}
[data-theme="dark"] .about-mvv-card__arrow {
color: var(--teal);
}
[data-theme="dark"] .fce-pillars__action {
background: color-mix(in srgb, var(--teal-dark) 88%, #0a1210 12%);
color: #f4fffe;
box-shadow: var(--sh-sm);
}
[data-theme="dark"] .fce-pillars__action:hover {
background: var(--teal-dark);
}
[data-theme="dark"] .alert--error {
background: #2a1518;
border-color: #5c2a32;
color: #fca5a5;
}
[data-theme="dark"] .alert--success {
background: #0d2826;
border-color: #1d4d48;
color: #7dd3c0;
}
[data-theme="dark"] .alert--info {
background: #152238;
border-color: #2a4a6e;
color: #93c5fd;
}
[data-theme="dark"] .theme-toggle {
color: var(--text-2);
}
[data-theme="dark"] .theme-toggle:hover {
color: var(--teal);
background: var(--bg-2);
}
[data-theme="dark"] .navbar.navbar--auth {
background: var(--teal) !important;
border-bottom-color: rgba(0, 0, 0, 0.28);
}
[data-theme="dark"] .footer__ribbon {
background: linear-gradient(180deg, #1a2426 0%, #152022 100%);
border-bottom-color: rgba(32, 178, 170, 0.22);
}
[data-theme="dark"] .footer__social-btn {
background: rgba(255, 255, 255, 0.08);
color: var(--text-2);
}
[data-theme="dark"] .footer__social-btn:hover {
background: var(--teal);
color: #fff;
}
[data-theme="dark"] .footer__social {
border-left-color: rgba(255, 255, 255, 0.12);
}
/* ── LMS / Admin / Dashboard: textos y badges en oscuro ───────── */
[data-theme="dark"] .badge--red {
background: #3a1a1e;
color: #fca5a5;
border-color: #6b2a30;
}
[data-theme="dark"] .dash-sub,
[data-theme="dark"] .course-hero__meta {
color: var(--text-2);
}
[data-theme="dark"] .admin-page-title + p {
color: var(--text-2) !important;
}
[data-theme="dark"] .admin-dash-card__l {
color: var(--text-2);
}
[data-theme="dark"] .admin-table th {
color: var(--text-2);
background: var(--bg-3);
}
[data-theme="dark"] .admin-table tr:hover td {
background: rgba(32, 178, 170, 0.08);
}
[data-theme="dark"] .perfil-email {
color: var(--text-2);
}
[data-theme="dark"] .lesson-sidebar__item.done-l {
color: var(--text-2);
}
/* Nosotros: "Propósito institucional" + "Nuestros pilares" (gradientes / #fff en styles.css) */
html[data-theme="dark"] .about-mvv,
html[data-theme="dark"] .fce-pillars {
background: var(--bg) !important;
}
html[data-theme="dark"] .fce-pillars__accordion {
border-color: var(--border);
}
html[data-theme="dark"] .fce-pillars__item {
border-color: var(--border);
}
html[data-theme="dark"] .fce-pillars__item.is-open {
background: color-mix(in srgb, var(--teal) 8%, var(--surface)) !important;
}
html[data-theme="dark"] .fce-pillars__item.is-open .fce-pillars__name {
color: var(--teal) !important;
}
html[data-theme="dark"] .fce-pillars__toggle {
border-color: color-mix(in srgb, var(--teal) 45%, var(--border));
}
html[data-theme="dark"] .fce-pillars__icon {
background: color-mix(in srgb, var(--teal) 14%, var(--surface));
border-color: color-mix(in srgb, var(--teal) 32%, var(--border));
color: var(--teal);
}
html[data-theme="dark"] .fce-pillars__item.is-open .fce-pillars__icon {
background: var(--teal);
border-color: var(--teal);
color: #08231f;
}
html[data-theme="dark"] .about-mvv-card {
background: var(--surface) !important;
border-color: var(--border) !important;
}
html[data-theme="dark"] .about-mvv-card:hover {
background: var(--bg-2) !important;
}
/* Misión: mantener la card destacada en teal también en oscuro. */
html[data-theme="dark"] .about-mvv__grid .about-mvv-card--mission,
html[data-theme="dark"] .about-mvv__grid .about-mvv-card--mission:hover {
background: linear-gradient(150deg, var(--teal-dark) 0%, var(--teal) 60%, #2ec4b8 100%) !important;
border-color: transparent !important;
}
html[data-theme="dark"] .about-mvv-card--mission .about-mvv-card__title { color: #fff !important; }
html[data-theme="dark"] .about-mvv-card--mission .about-mvv-card__body { color: rgba(255, 255, 255, .92) !important; }
html[data-theme="dark"] .fce-pillars::before {
opacity: 0.35;
}
/* Cursillo Solow — hero en tema oscuro */
html[data-theme="dark"] .sl-hero {
background: linear-gradient(165deg, color-mix(in srgb, var(--teal) 12%, var(--bg)) 0%, var(--surface) 72%);
}
html[data-theme="dark"] .sl-hero--career {
background: linear-gradient(180deg, var(--bg-2) 0%, var(--surface) 65%);
}
html[data-theme="dark"] .sl-hero--editorial {
background: linear-gradient(
125deg,
color-mix(in srgb, var(--teal) 14%, var(--bg)) 0%,
var(--surface) 52%,
var(--bg-2) 100%
);
}
html[data-theme="dark"] .sl-hero--editorial .sl-hero__figure--editorial {
box-shadow:
0 22px 50px rgba(0, 0, 0, 0.4),
0 0 0 1px rgba(255, 255, 255, 0.09);
}
html[data-theme="dark"] .sl-hero__figure--career-photo {
background: linear-gradient(180deg, var(--bg-2) 0%, var(--surface) 50%, var(--surface) 100%);
}
html[data-theme="dark"] .sl-hero__float {
background: color-mix(in srgb, var(--surface) 94%, transparent);
border-color: var(--border);
}
html[data-theme="dark"] .sl-hero__play {
background: var(--bg-2);
color: var(--teal);
}
html[data-theme="dark"] .sl-result-figure {
background: var(--bg-2);
}
html[data-theme="dark"] .sl-oferta--showcase .sl-oferta__card:not(.sl-oferta__card--deck) {
background: var(--surface);
}
html[data-theme="dark"] .sl-oferta--showcase .sl-oferta__deck {
background: var(--surface);
border-color: var(--border);
}
html[data-theme="dark"] .sl-catalog-cta {
background: var(--surface);
border-top-color: var(--border);
border-bottom-color: var(--border);
}
html[data-theme="dark"] .sl-catalog-cta__inner {
background: linear-gradient(135deg, rgba(32, 178, 170, 0.1) 0%, var(--bg-2) 58%);
border: 1px solid rgba(32, 178, 170, 0.22);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] .sl-catalog-cta__glow {
background: radial-gradient(ellipse at center, rgba(32, 178, 170, 0.18) 0%, rgba(32, 178, 170, 0) 68%);
}
html[data-theme="dark"] .sl-catalog-cta__eyebrow {
color: #8fe3d6;
background: rgba(32, 178, 170, 0.16);
border-color: rgba(32, 178, 170, 0.4);
}
html[data-theme="dark"] .sl-catalog-cta__title {
color: var(--text);
}
html[data-theme="dark"] .sl-catalog-cta__lead {
color: var(--text-2);
}
html[data-theme="dark"] .sl-catalog-cta .sl-catalog-cta__btn-alt {
color: #cdeeea;
background: rgba(255, 255, 255, 0.04);
border-color: rgba(32, 178, 170, 0.4);
}
html[data-theme="dark"] .sl-catalog-cta .sl-catalog-cta__btn-alt:hover {
background: rgba(32, 178, 170, 0.14);
border-color: var(--teal);
color: #eafaf8;
}
/* ── Ajustes 2026: secciones rediseñadas en tema oscuro ─────────── */
/* Home · "¿Por qué nosotros?" (banda verde + onda + tiles + métricas) */
html[data-theme="dark"] #nosotros-resumen { background: var(--bg); }
html[data-theme="dark"] .home-why__wave svg path { fill: var(--bg); }
html[data-theme="dark"] .home-why__feature {
background: var(--surface);
border-color: var(--border);
color: var(--text);
}
html[data-theme="dark"] #nosotros-resumen .home-metrics__item {
background: var(--surface);
border-color: var(--border);
}
html[data-theme="dark"] #nosotros-resumen .home-metrics__value { color: var(--text); }
html[data-theme="dark"] #nosotros-resumen .home-metrics__label { color: var(--text-2); }
html[data-theme="dark"] .home-why__metrics { border-top-color: var(--border); }
/* Brand Showcase: fondo, ondas e indicadores con logo (el fondo de la
imagen usa var(--bg-2), adapta solo). */
html[data-theme="dark"] .brand-showcase { background: var(--bg); }
html[data-theme="dark"] .brand-showcase__dot--logo {
background: rgba(255, 255, 255, .82);
border-color: var(--border);
}
html[data-theme="dark"] .brand-showcase__dot--logo:hover,
html[data-theme="dark"] .brand-showcase__dot--logo.is-active {
background: #ffffff;
border-color: color-mix(in srgb, var(--teal) 55%, var(--border));
}
html[data-theme="dark"] .brand-showcase__cta {
background: var(--teal);
color: #08231f;
}
html[data-theme="dark"] .brand-showcase__cta:hover { background: var(--teal-dark); color: #fff; }
/* Imagen grande con variante de tema: en oscuro mostramos el logo blanco. */
html[data-theme="dark"] .brand-showcase__visual-img--light { display: none; }
html[data-theme="dark"] .brand-showcase__visual-img--dark { display: block; }
/* Pilares acordeón: números y toggles en teal. */
html[data-theme="dark"] .fce-pillars__num { color: var(--teal); }
html[data-theme="dark"] .fce-pillars__item.is-open .fce-pillars__num { color: var(--teal); }
/* ===========================================================================
Auditoría tema oscuro — correcciones globales (2026)
Solo afecta [data-theme="dark"]; el modo claro queda intacto.
=========================================================================== */
/* Eyebrow: sin mezcla con blanco (en claro usa #fff en el mix) */
html[data-theme="dark"] .eyebrow {
background: color-mix(in srgb, var(--teal) 12%, var(--bg-2));
border-color: color-mix(in srgb, var(--teal) 28%, var(--border));
color: var(--teal);
}
/* Navbar: sombra al scrollear + links activos/hover */
html[data-theme="dark"] .navbar.scrolled {
box-shadow: 0 6px 22px rgba(0, 0, 0, 0.38);
}
/* Links del navbar más nítidos en oscuro (el mix por defecto queda apagado) */
html[data-theme="dark"] .navbar__link {
color: color-mix(in srgb, var(--text) 92%, var(--text-3) 8%);
}
html[data-theme="dark"] .navbar__caret { color: var(--text-2); }
html[data-theme="dark"] .navbar__link:hover,
html[data-theme="dark"] .navbar__link.active,
html[data-theme="dark"] [data-nav-dropdown].is-open > .navbar__link.navbar__link--trigger {
color: var(--teal);
}
html[data-theme="dark"] .navbar__dropdown-card-title { color: var(--text); }
html[data-theme="dark"] .navbar__dropdown-card-desc { color: var(--text-3); }
html[data-theme="dark"] .navbar__mobile { background: var(--bg); border-bottom-color: var(--border); }
html[data-theme="dark"] .navbar__mobile .navbar__link { color: var(--text); }
/* Cards genéricas (catálogo, pilares, pasos) */
html[data-theme="dark"] .course-card,
html[data-theme="dark"] .how-step,
html[data-theme="dark"] .home-pillar {
background: var(--surface);
border-color: var(--border);
}
html[data-theme="dark"] .course-card__title,
html[data-theme="dark"] .course-card__cat { color: var(--text); }
html[data-theme="dark"] .course-card__desc,
html[data-theme="dark"] .course-card__meta { color: var(--text-2); }
/* Botones secundarios / outline: borde y texto teal visibles en oscuro
(el borde var(--border) quedaba casi invisible). */
html[data-theme="dark"] .btn--outline {
color: #5fe6da;
border-color: color-mix(in srgb, var(--teal) 60%, transparent);
background: transparent;
}
html[data-theme="dark"] .btn--outline:hover {
background: color-mix(in srgb, var(--teal) 16%, transparent);
border-color: var(--teal);
color: #eafaf8;
}
html[data-theme="dark"] .btn--ghost {
color: var(--text);
border-color: var(--border);
background: transparent;
}
html[data-theme="dark"] .btn--ghost:hover {
background: var(--bg-2);
border-color: var(--teal-mid);
color: var(--teal);
}
/* Select nativo: opciones legibles en el desplegable del SO */
html[data-theme="dark"] select.form-input option {
background: var(--bg-2);
color: var(--text);
}
/* FAQ acordeón (FCE, More, Solow) */
html[data-theme="dark"] .more-faq__item,
html[data-theme="dark"] .sl-faq__item {
background: var(--surface);
border-color: var(--border);
}
html[data-theme="dark"] .more-faq__item summary,
html[data-theme="dark"] .sl-faq__item summary,
html[data-theme="dark"] .more-faq__item .more-faq__q,
html[data-theme="dark"] .sl-faq__item .sl-faq__q {
color: var(--text);
}
html[data-theme="dark"] .more-faq__item p,
html[data-theme="dark"] .sl-faq__item p,
html[data-theme="dark"] .more-faq__a,
html[data-theme="dark"] .sl-faq__a {
color: var(--text-2);
}
/* Footer: textos secundarios */
html[data-theme="dark"] .footer__tagline,
html[data-theme="dark"] .footer__address-text {
color: rgba(255, 255, 255, 0.72);
}
html[data-theme="dark"] .footer__bottom p {
color: rgba(255, 255, 255, 0.55);
}
/* Globo ecosistema: reemplazado por dropdown en navbar (ocultar si queda HTML legacy) */
.fce-eco-float {
display: none !important;
}
/* ===========================================================================
Solow — refuerzo defensivo de fondos en oscuro.
Estas secciones de contenido apoyan su texto en colores claros (var);
forzamos fondo oscuro explícito para que nunca queden "texto claro sobre
blanco" si el fondo de página no se hereda como se espera.
=========================================================================== */
html[data-theme="dark"] body.body--unit-solow .solow-landing .beca-info,
html[data-theme="dark"] body.body--unit-solow .solow-landing .beca-proceso,
html[data-theme="dark"] body.body--unit-solow .solow-landing .sl-solow-modalidades,
html[data-theme="dark"] body.body--unit-solow .solow-landing .sl-why,
html[data-theme="dark"] body.body--unit-solow .solow-landing .solow-section--diferencia,
html[data-theme="dark"] body.body--unit-solow .solow-landing .solow-section--modalidades {
background: var(--bg) !important;
}
/* Cards de pasos de beca: superficie y textos en oscuro */
html[data-theme="dark"] body.body--unit-solow .solow-landing .beca-paso {
background: var(--surface);
border-color: var(--border);
}
html[data-theme="dark"] body.body--unit-solow .solow-landing .beca-paso__title,
html[data-theme="dark"] body.body--unit-solow .solow-landing .beca-paso__desc {
color: var(--text-2);
}
html[data-theme="dark"] body.body--unit-solow .solow-landing .beca-paso__num {
color: #5fe6da;
}
/* Cards de modalidad: asegurar fondo oscuro y textos claros (independiente del hover) */
html[data-theme="dark"] body.body--unit-solow .solow-landing .sl-mod-card {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(95, 230, 218, 0.22);
}
html[data-theme="dark"] body.body--unit-solow .solow-landing .sl-mod-card__title {
color: #eaf6f4;
}
html[data-theme="dark"] body.body--unit-solow .solow-landing .sl-mod-card__desc {
color: rgba(234, 246, 244, 0.82);
}
/* Card del catálogo: el cuerpo se leía muy tenue */
html[data-theme="dark"] body.body--unit-solow .solow-landing .sl-catalog-cta__lead {
color: rgba(234, 246, 244, 0.86);
}
/* =====================================================================
ENDURECIMIENTO — Nosotros FCE (fondos hardcodeados en styles.css)
===================================================================== */
html[data-theme="dark"] .page-nosotros,
html[data-theme="dark"] #app.page-nosotros {
background: var(--bg) !important;
}
html[data-theme="dark"] .about-summary {
background: linear-gradient(180deg, #081d1e 0%, #0c2628 100%) !important;
}
html[data-theme="dark"] .about-summary__card {
background: var(--surface) !important;
border-color: var(--border) !important;
}
html[data-theme="dark"] .about-summary__eyebrow {
background: color-mix(in srgb, var(--teal) 18%, var(--surface)) !important;
border-color: color-mix(in srgb, var(--teal) 35%, var(--border)) !important;
color: #7fc8bf !important;
}
html[data-theme="dark"] .about-mvv {
background: var(--bg) !important;
}
html[data-theme="dark"] .about-mvv__head .eyebrow {
background: color-mix(in srgb, var(--teal) 18%, var(--surface)) !important;
border-color: color-mix(in srgb, var(--teal) 35%, var(--border)) !important;
color: #7fc8bf !important;
}
html[data-theme="dark"] .home-contact-nice__map-wrap {
background: var(--surface) !important;
border-color: var(--border) !important;
}
html[data-theme="dark"] .navbar {
background: color-mix(in srgb, var(--navbar-bg) 94%, transparent) !important;
}