/* =====================================================================
   THEME DARK — capa de tema oscuro "Modernee" para todo el sitio.
   (1) Footer oscuro (compartido).  (2) Overrides de los componentes Xeno
   bajo body.theme-dark para oscurecer las páginas interiores reutilizando
   su markup. Acento TEAL de marca #00A88E.  2026-06-25
   ===================================================================== */

/* ---------- variables ---------- */
body.theme-dark, .xeno-footer-wa {
    --d-bg: #0a0f1a;
    --d-bg2: #0e1525;
    --d-card: #121a2b;
    --d-line: rgba(255, 255, 255, .08);
    --d-teal: #00A88E;
    --d-ink: #ffffff;
    --d-mut: #9aa7b8;
}

/* =====================================================================
   FOOTER (compartido, siempre oscuro Modernee)
   ===================================================================== */
.xeno-footer-wa { background: #070b13 !important; color: var(--d-mut); border-top: 1px solid var(--d-line); }
.xeno-footer-wa .footer-top { background: transparent !important; }
.xeno-footer-wa .xeno-content-box h2,
.xeno-footer-wa .footer-top h2 {
    color: #fff !important;
    background: none !important;
    -webkit-text-fill-color: #fff !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
}
.xeno-footer-wa .widget-title { color: #fff !important; }
.xeno-footer-wa .footer-content,
.xeno-footer-wa .footer-content p,
.xeno-footer-wa .footer-nav li { color: var(--d-mut) !important; }
.xeno-footer-wa a { color: var(--d-mut) !important; transition: color .25s; }
.xeno-footer-wa a:hover { color: var(--d-teal) !important; }
.xeno-footer-wa .footer-widget-area { border-top: 1px solid var(--d-line); padding-top: 50px; }
.xeno-footer-wa .footer-copyright { background: #060910 !important; border-top: 1px solid var(--d-line); }
.xeno-footer-wa .copyright-text p,
.xeno-footer-wa .copyright-nav a { color: #6f7c90 !important; }
/* el botón flotante de WhatsApp se queda verde (convención) */

/* =====================================================================
   PÁGINAS OSCURAS (body.theme-dark) — overrides de componentes
   ===================================================================== */
body.theme-dark { background: var(--d-bg) !important; color: var(--d-mut); }
body.theme-dark #smooth-content, body.theme-dark main { background: var(--d-bg); }

/* Texto: titulares blancos, párrafos claros (gana al color oscuro inline) */
body.theme-dark h1, body.theme-dark h2, body.theme-dark h3,
body.theme-dark h4, body.theme-dark h5, body.theme-dark .big-feature-text { color: #fff !important; }
/* Títulos con relleno de degradado (.big-feature-text usa -webkit-text-fill-color:
   transparent + gradient oscuro) -> en oscuro quedaban invisibles. Anulamos el clip. */
body.theme-dark .big-feature-text {
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: #fff !important;
}
body.theme-dark p, body.theme-dark li, body.theme-dark .lead,
body.theme-dark .service-detail-content p, body.theme-dark .seo-content-block p { color: var(--d-mut) !important; }
body.theme-dark .seo-content-block li { color: var(--d-mut) !important; }

/* Fondos de sección claros -> oscuros (flag i = case-insensitive: cubre #FFF/#F8FAFC) */
body.theme-dark section[style*="background: white" i],
body.theme-dark section[style*="background:#fff" i],
body.theme-dark section[style*="background: #fff" i],
body.theme-dark section[style*="#f8fafc" i],
body.theme-dark section[style*="hsl(210, 40%, 98%)" i],
body.theme-dark .service-detail-content,
body.theme-dark .process-section,
body.theme-dark .xeno-services-ca,
body.theme-dark .seo-content-block,
body.theme-dark .faq-section,
body.theme-dark .we-examples,
body.theme-dark .xeno-contact-sec { background: var(--d-bg) !important; }
/* alternancia sutil para dar ritmo */
body.theme-dark .seo-content-block,
body.theme-dark .we-examples { background: var(--d-bg2) !important; }

/* Héroes de página (colores por servicio) -> navy uniforme Modernee */
body.theme-dark .service-detail-hero { background: linear-gradient(120deg, #0a0f1a 0%, #0e1525 60%, #0a0f1a 100%) !important; }
body.theme-dark .service-detail-hero .hero-content h1,
body.theme-dark .service-detail-hero .hero-content .lead { color: #fff !important; }
body.theme-dark .service-detail-hero .hero-content .lead { color: #aeb9c9 !important; }

/* Tarjetas con fondo blanco inline (llevan box-shadow -> son tarjetas, no botones) */
body.theme-dark div[style*="#fff" i][style*="box-shadow"],
body.theme-dark div[style*="background: white" i][style*="box-shadow"],
body.theme-dark div[style*="background:white" i][style*="box-shadow"] {
    background: var(--d-card) !important;
    border: 1px solid var(--d-line) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .28) !important;
}
/* HOVER: el onmouseenter toca this.style por JS y el navegador RE-SERIALIZA el
   atributo (#FFFFFF -> rgb(255, 255, 255); #F8FAFC -> rgb(248, 250, 252)),
   rompiendo el match [style*="#fff"] de arriba -> la tarjeta volvia a blanco al
   pasar el raton. Re-oscurecemos la forma serializada. Solo el fondo: el borde
   teal del hover (this.style.borderColor='#00A88E') se conserva como efecto. */
body.theme-dark div[style*="rgb(255, 255, 255)"][style*="box-shadow"],
body.theme-dark div[style*="rgb(248, 250, 252)"][style*="box-shadow"] {
    background: var(--d-card) !important;
}
/* Tarjetas (modern-card) -> oscuras */
body.theme-dark .modern-card { background: var(--d-card) !important; border: 1px solid var(--d-line) !important; }
body.theme-dark .modern-card h3 { color: #fff !important; }
body.theme-dark .modern-card p { color: var(--d-mut) !important; }
/* iconos teal: el fondo translúcido teal ya queda bien en oscuro; reforzar color */
body.theme-dark .icon-large { color: var(--d-teal) !important; }

/* Tarjetas glass dentro de héroes (rgba blanco) -> ligeramente más visibles */
body.theme-dark [style*="rgba(255,255,255,0.12)"],
body.theme-dark [style*="rgba(255,255,255,0.15)"] { background: rgba(255, 255, 255, .06) !important; border-color: var(--d-line) !important; }

/* FAQ interior (modern-faq) -> oscuro */
body.theme-dark .modern-faq { background: var(--d-card) !important; border: 1px solid var(--d-line) !important; }
body.theme-dark .faq-question { color: #fff !important; }
body.theme-dark .faq-answer, body.theme-dark .faq-answer p { color: var(--d-mut) !important; }

/* Sección de ejemplos: las tarjetas (.we-browser/.we-plain) son claras (capturas)
   y quedan bien sobre fondo oscuro; solo aseguramos el head claro */
body.theme-dark .we-ex-head h2 { color: #fff !important; }
body.theme-dark .we-cap h3 { color: #fff !important; }

/* Enlaces de texto dentro del contenido -> teal */
body.theme-dark .seo-content-block a,
body.theme-dark .service-detail-content a:not(.theme-btn) { color: var(--d-teal) !important; }

/* Formulario de contacto -> oscuro (panel + inputs + selects con bg blanco inline) */
body.theme-dark .xeno-contact-wrapper { background: var(--d-card) !important; border: 1px solid var(--d-line) !important; }
body.theme-dark .xeno-contact-wrapper h3 { color: #fff !important; }
body.theme-dark .form_control,
body.theme-dark .xeno-contact-form input:not([type="hidden"]),
body.theme-dark .xeno-contact-form select,
body.theme-dark .xeno-contact-form textarea {
    background: #0a0f1a !important;
    color: #e6edf5 !important;
    border: 1px solid var(--d-line) !important;
}
body.theme-dark .xeno-contact-form input::placeholder,
body.theme-dark .xeno-contact-form textarea::placeholder { color: #6f7c90 !important; }
body.theme-dark .form-group label { color: #cdd8e6 !important; }

/* Botones uniformes en pastilla en TODO el sitio (coherencia con la home .hm-btn).
   No va con gate -> aplica también a la cabecera de todas las páginas. */
.theme-btn { border-radius: 100px !important; }
/* Botón del CTA teal: el tema le ponía texto morado #6366f1 -> a teal/blanco */
body.theme-dark .cta-full-modern .theme-btn { color: #00A88E !important; background: #ffffff !important; border-color: #ffffff !important; }
body.theme-dark .cta-full-modern .theme-btn:hover { color: #ffffff !important; background: #0F2B26 !important; border-color: #0F2B26 !important; }
/* Texto (subtitulos, labels, badges) SOBRE banners teal: el color muted --d-mut
   (linea 61, !important) y los mint inline (#A7F3D0) quedan ilegibles ~1.4:1 sobre
   el verde -> forzar blanco. Los botones son <a>/<i> (no p/span) -> intactos. */
body.theme-dark [style*="00A88E" i] p,
body.theme-dark [style*="00A88E" i] span,
body.theme-dark .cta-full-modern p { color: #ffffff !important; }

/* Líneas/hr y bordes claros */
body.theme-dark hr { border-color: var(--d-line) !important; }