/* Modo oscuro para la réplica de arasgbc — tema dirigido por CSS (sin inversión de color).
   Oscurece fondos claros y aclara los textos; deja intactas fotos y secciones que ya
   son claras sobre fondo oscuro (heroes). Scopeado bajo html.dark. */

html.dark { color-scheme: dark; background: #0f1115; }
html.dark body { background: #0f1115 !important; }

/* Contenedores estructurales: transparentes para heredar el fondo oscuro.
   (background-color transparente NO elimina las imágenes de fondo de los heroes). */
html.dark #page,
html.dark #content,
html.dark #primary,
html.dark #main,
html.dark .elementor,
html.dark .elementor-section,
html.dark .elementor-container,
html.dark .elementor-column,
html.dark .elementor-column-wrap,
html.dark .elementor-widget-wrap,
html.dark .elementor-widget,
html.dark .e-con,
html.dark .e-con-inner {
  background-color: transparent !important;
}

/* Cabecera y pie en un gris muy oscuro */
html.dark .site-header,
html.dark #masthead,
html.dark header.site-header,
html.dark .header-wrap,
html.dark .site-footer,
html.dark footer,
html.dark .footer-widgets,
html.dark .copyright {
  background-color: #15181d !important;
}

/* Texto principal -> claro */
html.dark,
html.dark p, html.dark li, html.dark span, html.dark strong, html.dark em,
html.dark td, html.dark th, html.dark blockquote, html.dark figcaption,
html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6,
html.dark label, html.dark dt, html.dark dd,
html.dark .elementor-heading-title,
html.dark .elementor-widget-text-editor,
html.dark .elementor-icon-box-title,
html.dark .elementor-icon-box-title span,
html.dark .elementor-icon-box-description,
html.dark .elementor-icon-list-text,
html.dark .site-title a,
html.dark .site-description,
html.dark .widget-title,
html.dark .menu-item a,
html.dark .main-navigation a,
html.dark .sydney-dropdown a {
  color: #e7eaee !important;
}

/* Enlaces de acento */
html.dark a,
html.dark .elementor-widget-text-editor a {
  color: #8fb6e3 !important;
}
html.dark .site-title a { color: #ffffff !important; }

/* Tarjetas con fondo claro detectadas por JS (dark-mode.js) */
html.dark .dark-cardbg { background-color: #181c22 !important; }

/* Tarjetas / cajas con fondo claro propio */
html.dark .elementor-widget-container[style*="background"],
html.dark .card, html.dark .widget, html.dark .sydney-widget,
html.dark .elementor-cta, html.dark .elementor-price-table,
html.dark .elementor-testimonial-content {
  background-color: #181c22 !important;
}

/* Formularios */
html.dark input:not([type="submit"]):not([type="button"]),
html.dark textarea,
html.dark select,
html.dark .wpcf7 input,
html.dark .wpcf7 textarea {
  background-color: #1b1f25 !important;
  color: #e7eaee !important;
  border-color: #39404a !important;
}
html.dark ::placeholder { color: #9aa3ad !important; }

/* Separadores / bordes suaves */
html.dark hr,
html.dark .elementor-divider-separator { border-color: #2a2f37 !important; }

/* Botón flotante de tema (fuera de #page). !important para no heredar
   los estilos de <button> del tema, que lo estiraban a óvalo. */
#dark-toggle {
  position: fixed !important;
  top: 90px;
  right: 124px;
  z-index: 99991;
  box-sizing: border-box !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 0 !important;
  max-width: 42px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  background: #16385c !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3) !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  -webkit-tap-highlight-color: transparent;
  transition: transform .08s ease;
  line-height: 1 !important;
}
#dark-toggle svg { width: 20px; height: 20px; display: block; }
#dark-toggle:active { transform: scale(.92); }
@media (max-width: 600px) {
  #dark-toggle { top: auto; bottom: 14px; right: 122px; }
}