/* Controles Lmscorp sobre secciones y contenedores de Elementor */

.lmscorp-controlled {
  position: relative;
}

.lmscorp-has-particles,
.lmscorp-has-video-bg {
  overflow: hidden;
}

/* El canvas de partículas y video de fondo siempre quedan detrás del contenido */
.lmscorp-section-particles,
.lms-particles-wrap,
.lmscorp-video-bg-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: transparent !important;
  background-color: transparent !important;
}

.lmscorp-video-bg-wrap video,
.lmscorp-video-bg-wrap iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100vh;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%) scale(1.08); /* Escala suave para evitar bordes blancos por desenfoque */
  object-fit: cover;
  pointer-events: none;
  border: 0;
}

.lmscorp-video-bg-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1;
  pointer-events: none;
}

.lmscorp-has-particles > *:not(.lmscorp-section-particles):not(.lmscorp-video-bg-wrap),
.lmscorp-has-video-bg > *:not(.lmscorp-section-particles):not(.lmscorp-video-bg-wrap) {
  position: relative;
  z-index: 2;
}

/* Modo ceñido / ajustado al área interior de elementos */
.lmscorp-has-particles[data-particles-fit="boxed"] > .lmscorp-section-particles {
  inset: var(--container-widget-spacing, 15px) !important;
  border-radius: inherit;
}

.lmscorp-section-particles .particles-js-canvas-el,
.lms-particles-wrap canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
  background: transparent !important;
  background-color: transparent !important;
}

/* Con interacción activa el canvas debe recibir eventos del puntero */
.lmscorp-has-particles[data-lmscorp-particles-interactive="yes"] > .lmscorp-section-particles {
  pointer-events: auto;
}

/* Solo si el usuario activa explícitamente el overlay */
.lmscorp-section-particles[data-overlay="yes"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent !important;
  pointer-events: none;
}

/* Parallax */
.lmscorp-has-parallax {
  will-change: transform;
  backface-visibility: hidden;
}

/* Sticky */
.lmscorp-is-sticky {
  position: sticky;
  top: var(--lmscorp-sticky-top, 0px);
  z-index: var(--lmscorp-sticky-z, 10);
}

@media (max-width: 767px) {
  .lmscorp-is-sticky[data-lmscorp-sticky-mobile="no"] {
    position: relative;
    top: auto;
  }
}

/* =========================================================
   BARRA PRINCIPAL AL HACER SCROLL (STICKY & SEMI-TRANSPARENCIA)
   ========================================================= */
/* Los contenedores padres no deben cortar el comportamiento sticky */
.lmscorp-theme-location--header,
.elementor-location-header,
.elementor-6483,
.elementor-element-8a95fa5 {
  overflow: visible !important;
}

/* Contenedores del header superior (8a95fa5, 0806e68, 20d8cfd, af3664a, 4bfc159):
   En el tope son 100% transparentes dejando el logo, redes y elementos flotando sobre la web sin ningún color celeste/azul de fondo. */
.elementor-6483,
.elementor-6483 .e-con,
.elementor-6483 .e-con-inner,
.elementor-element-8a95fa5,
.elementor-element-8a95fa5::before,
.elementor-element-8a95fa5::after,
.elementor-element-0806e68,
.elementor-element-0806e68::before,
.elementor-element-0806e68::after,
.elementor-element-20d8cfd,
.elementor-element-20d8cfd::before,
.elementor-element-20d8cfd::after,
.elementor-element-af3664a,
.elementor-element-af3664a::before,
.elementor-element-af3664a::after,
.elementor-element-4bfc159,
.elementor-element-4bfc159::before,
.elementor-element-4bfc159::after {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: transparent !important;
}

.elementor-element-8a95fa5 {
  position: relative !important;
}

/* Contenedor sticky del menú de navegación (1703c0c):
   Utiliza position: sticky con top: 0 nativo garantizado para no perder ancho ni salir del flujo */
.lms-sticky-header,
.elementor-element-1703c0c,
.elementor-6483 .elementor-element-1703c0c,
.lms-floating-navbar-yes {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 999999 !important;
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  align-self: flex-start !important;
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border-bottom: none !important;
  transition: background-color 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.lms-sticky-header > .e-con-inner,
.elementor-element-1703c0c > .e-con-inner {
  background: transparent !important;
  background-color: transparent !important;
  width: 100% !important;
}

/* AL BAJAR EN EL SCROLL: LA BARRA SE MANTIENE FIJA EN LA PARTE SUPERIOR
   Con fondo plomo azulado verdoso transparente y efecto de desenfoque de cristal (glassmorphism) */
.elementor-element-1703c0c.is-scrolled,
.is-header-scrolled .elementor-element-1703c0c,
body.is-header-scrolled .elementor-element-1703c0c,
html.is-header-scrolled .elementor-element-1703c0c,
.lms-sticky-header.is-scrolled,
.is-header-scrolled .lms-sticky-header,
.elementor-element-1703c0c.elementor-sticky--active {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  z-index: 99999999 !important;
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
  background: var(--lms-scrolled-bg-dark, rgba(30, 48, 54, 0.85));
  background-color: var(--lms-scrolled-bg-dark, rgba(30, 48, 54, 0.85));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 4px 20px rgba(10, 20, 24, 0.35) !important;
  border-bottom: 1px solid var(--lms-scrolled-border-dark, rgba(82, 140, 150, 0.35));
}

/* Evitar que Elementor o temas restrinjan el contenedor a absolute o lo muevan */
.is-header-scrolled .elementor-element-1703c0c,
.elementor-element-1703c0c.is-scrolled {
  bottom: auto !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  overflow: visible !important;
  max-height: none !important;
}

/* Neutralizar cualquier transform, will-change o perspective de los contenedores padre al hacer scroll
   para que position: fixed siempre se ancle al viewport real.
   backdrop-filter (incluso blur(0px)) también crea un bloque contenedor y es lo que genera
   Elementor en .elementor-element-8a95fa5, por eso hay que anularlo con especificidad suficiente:
   el CSS de Elementor (.elementor-6483 .elementor-element.elementor-element-8a95fa5) usa !important
   y se carga después. */
html.is-header-scrolled .lmscorp-theme-location--header,
html.is-header-scrolled .elementor-6483,
html.is-header-scrolled .elementor-6483 .elementor-element.elementor-element-8a95fa5,
html.is-header-scrolled .elementor-element.elementor-element-8a95fa5,
html.is-header-scrolled .elementor-element.elementor-element-0806e68,
html.is-header-scrolled .elementor-element.elementor-element-20d8cfd {
  transform: none !important;
  translate: none !important;
  rotate: none !important;
  scale: none !important;
  perspective: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  contain: none !important;
  container-type: normal !important;
  content-visibility: visible !important;
  will-change: auto !important;
}

/* En caso de que Elementor aplique clases de efectos o intentara ocultarlo */
.elementor-element-1703c0c.elementor-sticky--effects,
.elementor-element-1703c0c.elementor-sticky--active {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* La barra fija debe verse POR ENCIMA del contenido de la página.
   .elementor-element-8a95fa5 es position:relative + z-index:0, o sea que crea un contexto de
   apilamiento: el z-index gigante del menú quedaba encerrado ahí y el contenido de la página
   (secciones, chat, widgets) lo tapaba. Subiendo el nivel del envoltorio del header el menú
   vuelve a competir en el contexto raíz. */
html.is-header-scrolled .lmscorp-theme-location--header,
html.is-header-scrolled .elementor-6483 {
  position: relative !important;
  z-index: 999999 !important;
}

/* El menú lateral y su overlay se mantienen por encima de la barra (comportamiento previo) */
html.is-header-scrolled #ajaxify-offcanvas,
html.is-header-scrolled .offcanvas-overlay {
  z-index: 1000001 !important;
}

/* Modo claro al hacer scroll: plomo azulado verdoso fresco y translúcido */
html:not(.dark-mode) .elementor-element-1703c0c.is-scrolled,
html:not(.dark-mode).is-header-scrolled .elementor-element-1703c0c,
html:not(.dark-mode) .lms-sticky-header.is-scrolled,
html:not(.dark-mode).is-header-scrolled .lms-sticky-header,
html:not(.dark-mode) .elementor-element-1703c0c.elementor-sticky--active {
  background: var(--lms-scrolled-bg-light, rgba(45, 68, 74, 0.85));
  background-color: var(--lms-scrolled-bg-light, rgba(45, 68, 74, 0.85));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 4px 20px rgba(20, 35, 40, 0.2) !important;
  border-bottom: 1px solid var(--lms-scrolled-border-light, rgba(120, 175, 185, 0.35));
}

/* Placeholder para que el contenido de la página no salte al volverse fixed */
.lms-navbar-placeholder {
  display: none;
  width: 100%;
}
.is-header-scrolled .lms-navbar-placeholder {
  display: block;
}

/* Enlaces y botones de la barra cuando está fija con el fondo plomo azulado verdoso */
html:not(.dark-mode).is-header-scrolled .elementor-element-1703c0c .lms-menu a,
html:not(.dark-mode) .elementor-element-1703c0c.is-scrolled .lms-menu a {
  color: #f1f5f9 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

html:not(.dark-mode).is-header-scrolled .elementor-element-1703c0c .lms-menu a:hover,
html:not(.dark-mode) .elementor-element-1703c0c.is-scrolled .lms-menu a:hover {
  color: #38bdf8 !important;
}

html:not(.dark-mode).is-header-scrolled .elementor-element-1703c0c .lms-header-action-btn,
html:not(.dark-mode) .elementor-element-1703c0c.is-scrolled .lms-header-action-btn,
html:not(.dark-mode).is-header-scrolled .elementor-element-1703c0c .btn-darkmode,
html:not(.dark-mode) .elementor-element-1703c0c.is-scrolled .btn-darkmode {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* =========================================================
   BARRA FIJA: ICONOS Y BOTONES LEGIBLES EN CADA MODO
   (las reglas definitivas están al final de esta hoja, después del sistema de modo
   claro/oscuro, para ganar por orden a los resets con !important)
   ========================================================= */

/* =========================================================
   SISTEMA INTEGRAL DE MODO CLARO Y OSCURO (TEXTOS, WIDGETS E ICONOS)
   ========================================================= */

/* --- 1. MODO CLARO (html:not(.dark-mode) o .light-mode) ---
   Las letras se ponen negras/oscuras en todos los widgets y secciones */
html:not(.dark-mode),
html:not(.dark-mode) body {
  color: #0f172a !important;
  --e-global-color-text: #0f172a !important;
}

html:not(.dark-mode) p,
html:not(.dark-mode) span,
html:not(.dark-mode) h1,
html:not(.dark-mode) h2,
html:not(.dark-mode) h3,
html:not(.dark-mode) h4,
html:not(.dark-mode) h5,
html:not(.dark-mode) h6,
html:not(.dark-mode) li,
html:not(.dark-mode) label,
html:not(.dark-mode) .elementor-heading-title,
html:not(.dark-mode) .elementor-widget-text-editor,
html:not(.dark-mode) .elementor-icon-list-text,
html:not(.dark-mode) .elementor-icon-list-item > a,
html:not(.dark-mode) .alty-header h1,
html:not(.dark-mode) .alty-header h2,
html:not(.dark-mode) .alty-header h3,
html:not(.dark-mode) .alty-header div,
html:not(.dark-mode) .alty-header span,
html:not(.dark-mode) .alty-header p {
  color: #0f172a !important;
}

/* Enlaces del menú en modo claro (inicio y al hacer scroll) */
html:not(.dark-mode) .lms-menu a,
html:not(.dark-mode) .lms-menu .lms-menu__list > li > a,
html:not(.dark-mode) .elementor-element-28a46c5 .lms-menu a,
html:not(.dark-mode) .lms-sticky-header .lms-menu a,
html:not(.dark-mode) .elementor-element-1703c0c .lms-menu a {
  color: #0f172a !important;
  text-shadow: none !important;
}

html:not(.dark-mode) .lms-menu a:hover,
html:not(.dark-mode) .elementor-element-28a46c5 .lms-menu a:hover {
  color: #e60002 !important;
}

/* Submenús en modo claro */
html:not(.dark-mode) .lms-menu .sub-menu {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
}

html:not(.dark-mode) .lms-menu .sub-menu a {
  color: #1e293b !important;
}

/* Botones de acción del encabezado en modo claro */
html:not(.dark-mode) .lms-header-action-btn,
html:not(.dark-mode) .btn-darkmode,
html:not(.dark-mode) .btn-search,
html:not(.dark-mode) .btn-menu,
html:not(.dark-mode) .lms-sticky-header .lms-header-action-btn,
html:not(.dark-mode) .lms-sticky-header .btn-darkmode,
html:not(.dark-mode) .lms-sticky-header .btn-menu,
html:not(.dark-mode) .elementor-element-1703c0c .lms-header-action-btn,
html:not(.dark-mode) .elementor-element-1703c0c .btn-darkmode,
html:not(.dark-mode) .elementor-element-1703c0c .btn-menu {
  color: #0f172a !important;
  background: rgba(0, 0, 0, 0.05) !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
}

html:not(.dark-mode) .lms-header-action-btn:hover,
html:not(.dark-mode) .btn-darkmode:hover,
html:not(.dark-mode) .btn-search:hover,
html:not(.dark-mode) .btn-menu:hover {
  background: rgba(0, 0, 0, 0.1) !important;
  color: #000000 !important;
}

/* Redes sociales en modo claro (cabecera y pie de página) */
html:not(.dark-mode) .elementor-widget-social-icons .elementor-social-icon {
  background-color: rgba(0, 0, 0, 0.05) !important;
}

html:not(.dark-mode) .elementor-widget-social-icons .elementor-social-icon i,
html:not(.dark-mode) .elementor-widget-social-icons .elementor-social-icon svg {
  fill: #0f172a !important;
  color: #0f172a !important;
}

html:not(.dark-mode) .elementor-widget-social-icons .elementor-social-icon:hover {
  background-color: rgba(0, 0, 0, 0.12) !important;
}

/* Divisores y listas del pie de página en modo claro */
html:not(.dark-mode) .elementor-6484,
html:not(.dark-mode) .elementor-6484 p,
html:not(.dark-mode) .elementor-6484 span,
html:not(.dark-mode) .elementor-6484 a,
html:not(.dark-mode) .elementor-6484 .elementor-heading-title,
html:not(.dark-mode) .elementor-6484 .elementor-widget-text-editor,
html:not(.dark-mode) .elementor-6484 .elementor-icon-list-text,
html:not(.dark-mode) .elementor-6484 .elementor-icon-list-item > a,
html:not(.dark-mode) .elementor-6484 .elementor-divider__text {
  color: #0f172a !important;
}

/* Lista de iconos en modo claro (general y elementos específicos del footer) */
html:not(.dark-mode) .elementor-widget-icon-list .elementor-icon-list-icon i,
html:not(.dark-mode) .elementor-widget-icon-list .elementor-icon-list-icon svg {
  fill: #0f172a !important;
  color: #0f172a !important;
}

html:not(.dark-mode) .elementor-element-481189c .elementor-icon-list-icon i,
html:not(.dark-mode) .elementor-element-481189c .elementor-icon-list-icon svg,
html:not(.dark-mode) .elementor-element-79e2e22 .elementor-icon-list-icon i,
html:not(.dark-mode) .elementor-element-79e2e22 .elementor-icon-list-icon svg,
html:not(.dark-mode) .elementor-element-2c72821 .elementor-icon-list-icon i,
html:not(.dark-mode) .elementor-element-2c72821 .elementor-icon-list-icon svg {
  color: #0f172a !important;
  fill: #0f172a !important;
}

html:not(.dark-mode) .elementor-element-481189c .elementor-icon-list-text,
html:not(.dark-mode) .elementor-element-79e2e22 .elementor-icon-list-text,
html:not(.dark-mode) .elementor-element-2c72821 .elementor-icon-list-text {
  color: #0f172a !important;
}

html:not(.dark-mode) .elementor-element-2c72821 > .elementor-widget-container {
  background-color: rgba(0, 0, 0, 0.05) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* Chat en vivo en modo claro */
html:not(.dark-mode) .lms-chat-vis {
  background: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08) !important;
}

html:not(.dark-mode) .lms-chat-vis > div:first-child {
  background: rgba(0, 0, 0, 0.04) !important;
  color: #0f172a !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

html:not(.dark-mode) .lms-chat-vis-toggle {
  color: #64748b !important;
}

html:not(.dark-mode) .lms-chat-vis-item {
  background: rgba(0, 0, 0, 0.03) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

html:not(.dark-mode) .lms-chat-vis-item .name {
  color: #0f172a !important;
}

html:not(.dark-mode) .lms-chat-vis-item .name .dot {
  background: #0f172a !important;
  opacity: 0.4 !important;
}

html:not(.dark-mode) .lms-chat-vis-item .text {
  color: #334155 !important;
}

html:not(.dark-mode) .lms-chat-vis-empty {
  color: #64748b !important;
}

html:not(.dark-mode) .lms-chat-vis-input {
  background: rgba(0, 0, 0, 0.02) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

html:not(.dark-mode) .vis-chat-name,
html:not(.dark-mode) .vis-chat-msg {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
}

html:not(.dark-mode) .vis-chat-name::placeholder,
html:not(.dark-mode) .vis-chat-msg::placeholder {
  color: #94a3b8 !important;
}

html:not(.dark-mode) .vis-chat-emoji-btn,
html:not(.dark-mode) .vis-chat-img-btn,
html:not(.dark-mode) .vis-chat-audio-btn {
  color: #64748b !important;
}

html:not(.dark-mode) .vis-chat-emoji-bar {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

html:not(.dark-mode) .vis-chat-preview {
  background: #f1f5f9 !important;
  color: #334155 !important;
}


/* --- 2. MODO OSCURO (.dark-mode) ---
   Las letras se ponen blancas en todos los widgets y secciones */
html.dark-mode,
html.dark-mode body,
.dark-mode {
  color: #f8fafc !important;
  --e-global-color-text: #f8fafc !important;
}

.dark-mode p,
.dark-mode span,
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6,
.dark-mode li,
.dark-mode label,
.dark-mode .elementor-heading-title,
.dark-mode .elementor-widget-text-editor,
.dark-mode .elementor-icon-list-text,
.dark-mode .elementor-icon-list-item > a,
.dark-mode .alty-header h1,
.dark-mode .alty-header h2,
.dark-mode .alty-header h3,
.dark-mode .alty-header div,
.dark-mode .alty-header span,
.dark-mode .alty-header p {
  color: #ffffff !important;
}

/* Enlaces del menú en modo oscuro (inicio y al hacer scroll) */
.dark-mode .lms-menu a,
.dark-mode .lms-menu .lms-menu__list > li > a,
.dark-mode .elementor-element-28a46c5 .lms-menu a,
.dark-mode .lms-sticky-header .lms-menu a,
.dark-mode .elementor-element-1703c0c .lms-menu a {
  color: #ffffff !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.dark-mode .lms-menu a:hover,
.dark-mode .elementor-element-28a46c5 .lms-menu a:hover {
  color: #ff3344 !important;
}

/* Submenús en modo oscuro */
.dark-mode .lms-menu .sub-menu {
  background-color: rgba(15, 23, 42, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
}

.dark-mode .lms-menu .sub-menu a {
  color: #ffffff !important;
}

/* Botones de acción del encabezado en modo oscuro */
.dark-mode .lms-header-action-btn,
.dark-mode .btn-darkmode,
.dark-mode .btn-search,
.dark-mode .btn-menu,
.dark-mode .lms-sticky-header .lms-header-action-btn,
.dark-mode .lms-sticky-header .btn-darkmode,
.dark-mode .lms-sticky-header .btn-menu,
.dark-mode .elementor-element-1703c0c .lms-header-action-btn,
.dark-mode .elementor-element-1703c0c .btn-darkmode,
.dark-mode .elementor-element-1703c0c .btn-menu {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.dark-mode .lms-header-action-btn:hover,
.dark-mode .btn-darkmode:hover,
.dark-mode .btn-search:hover,
.dark-mode .btn-menu:hover {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
}

/* Lista de iconos en modo oscuro */
.dark-mode .elementor-widget-icon-list .elementor-icon-list-icon i,
.dark-mode .elementor-widget-icon-list .elementor-icon-list-icon svg {
  fill: #ffffff !important;
  color: #ffffff !important;
}

.dark-mode .elementor-element-481189c .elementor-icon-list-icon i,
.dark-mode .elementor-element-481189c .elementor-icon-list-icon svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}

.dark-mode .elementor-element-481189c .elementor-icon-list-text {
  color: #ffffff !important;
}

/* Redes sociales en modo oscuro (cabecera y pie de página) */
.dark-mode .elementor-widget-social-icons .elementor-social-icon {
  background-color: rgba(255, 255, 255, 0.12) !important;
}

.dark-mode .elementor-widget-social-icons .elementor-social-icon i,
.dark-mode .elementor-widget-social-icons .elementor-social-icon svg {
  fill: #ffffff !important;
  color: #ffffff !important;
}

.dark-mode .elementor-widget-social-icons .elementor-social-icon:hover {
  background-color: rgba(255, 255, 255, 0.22) !important;
}

/* Pie de página en modo oscuro */
.dark-mode .elementor-6484,
.dark-mode .elementor-6484 p,
.dark-mode .elementor-6484 span,
.dark-mode .elementor-6484 a,
.dark-mode .elementor-6484 .elementor-heading-title,
.dark-mode .elementor-6484 .elementor-widget-text-editor,
.dark-mode .elementor-6484 .elementor-icon-list-text,
.dark-mode .elementor-6484 .elementor-icon-list-item > a,
.dark-mode .elementor-6484 .elementor-divider__text {
  color: #ffffff !important;
}

.dark-mode .elementor-element-79e2e22 .elementor-icon-list-icon i,
.dark-mode .elementor-element-79e2e22 .elementor-icon-list-icon svg,
.dark-mode .elementor-element-2c72821 .elementor-icon-list-icon i,
.dark-mode .elementor-element-2c72821 .elementor-icon-list-icon svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}

.dark-mode .elementor-element-79e2e22 .elementor-icon-list-text,
.dark-mode .elementor-element-2c72821 .elementor-icon-list-text {
  color: #ffffff !important;
}

.dark-mode .elementor-element-2c72821 > .elementor-widget-container {
  background-color: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Chat en vivo en modo oscuro */
.dark-mode .lms-chat-vis {
  background: rgba(10, 14, 23, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5) !important;
}

.dark-mode .lms-chat-vis > div:first-child {
  background: rgba(10, 14, 23, 0.4) !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.dark-mode .lms-chat-vis-toggle {
  color: #94a3b8 !important;
}

.dark-mode .lms-chat-vis-item {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.dark-mode .lms-chat-vis-item .name {
  color: #ffffff !important;
}

.dark-mode .lms-chat-vis-item .name .dot {
  background: #ffffff !important;
  opacity: 0.6 !important;
}

.dark-mode .lms-chat-vis-item .text {
  color: #cbd5e1 !important;
}

.dark-mode .lms-chat-vis-empty {
  color: rgba(255, 255, 255, 0.4) !important;
}

.dark-mode .lms-chat-vis-input {
  background: rgba(10, 14, 23, 0.35) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.dark-mode .vis-chat-name,
.dark-mode .vis-chat-msg {
  background: rgba(15, 23, 42, 0.7) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.dark-mode .vis-chat-name::placeholder,
.dark-mode .vis-chat-msg::placeholder {
  color: #64748b !important;
}

.dark-mode .vis-chat-emoji-btn,
.dark-mode .vis-chat-img-btn,
.dark-mode .vis-chat-audio-btn {
  color: #94a3b8 !important;
}

.dark-mode .vis-chat-emoji-bar {
  background: rgba(15, 23, 42, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.dark-mode .vis-chat-preview {
  background: rgba(15, 23, 42, 0.7) !important;
  color: #cbd5e1 !important;
}


/* Hover suave y transición en todos los elementos interactivos */
.lms-menu a,
.lms-header-action-btn,
.btn-darkmode,
.btn-search,
.btn-menu {
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease !important;
}

/* Eliminación total del espacio negro inferior */
html,
body {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.lmscorp-theme-location--footer,
.elementor-location-footer,
.elementor-6484,
.elementor-6484 .e-con,
.elementor-6484 .e-con-inner,
.elementor-6484 .elementor-element-6a11fad,
.elementor-6484 .elementor-element-6a11fad::before,
.elementor-6484 .elementor-element-6a11fad::after,
.elementor-6484 .lmscorp-section-particles,
.elementor-6484 .lmscorp-section-particles::after,
.elementor-6484 .lmscorp-section-particles::before {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: transparent !important;
}

.elementor-6484 .elementor-element.elementor-element-6a11fad {
  margin-bottom: 0 !important;
  --margin-bottom: 0px !important;
  padding-bottom: 25px !important;
  --padding-bottom: 25px !important;
}

/* Bajar un poco el reproductor */
.player2 {
  bottom: 2px !important;
}

/* Reacomodo de widgets del pie de página para que nada quede montado ni solapado */
.elementor-6484 .elementor-element-8190c13 {
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  position: relative !important;
}

.elementor-6484 .elementor-element-2c72821 {
  margin-top: 6px !important;
  margin-bottom: 30px !important;
  transform: none !important;
  position: relative !important;
  z-index: 10 !important;
}

/* Corregir divisores e iconos que tenían márgenes negativos solapados */
.elementor-6484 .elementor-element-b706c73,
.elementor-6484 .elementor-element-c1c59df {
  margin-top: 4px !important;
  margin-bottom: 8px !important;
}

.elementor-6484 .elementor-element-721ed63 {
  margin-top: 6px !important;
  margin-bottom: 10px !important;
}

.elementor-6484 .elementor-element-090aa41 {
  margin-bottom: 6px !important;
}

/* El botón de plegar y controles inferiores se integran armónicamente con el fondo azul */
.player2-down-up {
  background: rgba(14, 27, 65, 0.75) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-bottom: none !important;
}

/* =========================================================
   BARRA FIJA AL BAJAR: ICONOS Y BOTONES LEGIBLES EN CADA MODO
   Al bajar, la barra se pone oscura (plomo azulado + blur). En modo claro los resets
   globales dejaban los iconos en #0f172a / #334155 y quedaban casi invisibles
   (contraste 1.5 y 2.5). Este bloque va al final de la hoja a propósito: gana por
   orden a los resets con !important de la sección de modo claro y a chat.css.
   ========================================================= */

/* 1) Botón de chat (su color lo fija chat.css con selector de id) */
html.is-header-scrolled #lmsChatBtn,
html.is-header-scrolled #lmsChatBtn svg,
html.is-header-scrolled .elementor-element-1703c0c .btn-chat,
html.is-header-scrolled .elementor-element-1703c0c .btn-chat svg,
html.is-header-scrolled .lms-sticky-header #lmsChatBtn {
  color: #f8fafc !important;
  fill: currentColor !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}
html.is-header-scrolled #lmsChatBtn:hover,
html.is-header-scrolled .elementor-element-1703c0c .btn-chat:hover {
  color: #ffffff !important;
  background: rgba(56, 189, 248, 0.22) !important;
  border-color: rgba(56, 189, 248, 0.45) !important;
}

/* 2) Botón de menú (hamburguesa + etiqueta MENU) */
html.is-header-scrolled .elementor-element-1703c0c .btn-menu,
html.is-header-scrolled .elementor-element-1703c0c .btn-menu i,
html.is-header-scrolled .elementor-element-1703c0c .btn-menu span,
html.is-header-scrolled .lms-sticky-header .btn-menu,
html.is-header-scrolled .lms-sticky-header .btn-menu i {
  color: #f8fafc !important;
}
html.is-header-scrolled .elementor-element-1703c0c .btn-menu:hover,
html.is-header-scrolled .elementor-element-1703c0c .btn-menu:hover i {
  color: #38bdf8 !important;
}

/* 3) Toggle claro/oscuro: sobre la barra oscura siempre blanco (gana al ámbar del sol) */
html.is-header-scrolled .elementor-element-1703c0c .btn-darkmode,
html.is-header-scrolled .elementor-element-1703c0c .btn-darkmode i,
html.is-header-scrolled .elementor-element-1703c0c .lmscorp-dark-toggle,
html.is-header-scrolled .elementor-element-1703c0c .lmscorp-dark-toggle i {
  color: #ffffff !important;
}
html.is-header-scrolled .elementor-element-1703c0c .btn-darkmode:hover,
html.is-header-scrolled .elementor-element-1703c0c .btn-darkmode:hover i {
  color: #38bdf8 !important;
}

/* 4) Cualquier otro ícono de la barra (acciones, redes sociales, widgets) */
html.is-header-scrolled .elementor-element-1703c0c .hder-actions i,
html.is-header-scrolled .elementor-element-1703c0c .lms-actions i,
html.is-header-scrolled .elementor-element-1703c0c .hder-socials i,
html.is-header-scrolled .elementor-element-1703c0c .lms-socials i,
html.is-header-scrolled .elementor-element-1703c0c .hder-actions .elementor-icon,
html.is-header-scrolled .lms-sticky-header .hder-actions i {
  color: #f8fafc !important;
}
html.is-header-scrolled .elementor-element-1703c0c .hder-actions i:hover,
html.is-header-scrolled .elementor-element-1703c0c .lms-socials a:hover,
html.is-header-scrolled .elementor-element-1703c0c .hder-socials a:hover {
  color: #38bdf8 !important;
}

/* 5) Insignia "EN VIVO": en modo claro conserva su fondo blanco con texto oscuro legible.
      En modo oscuro el fondo ya es oscuro, así que el texto se queda claro. */
html:not(.dark-mode).is-header-scrolled .elementor-element-1703c0c .hder-type3__live .hder-live-text {
  color: #0f172a !important;
}
html:not(.dark-mode).is-header-scrolled .elementor-element-1703c0c .hder-type3__live .hder-live-time {
  color: #475569 !important;
}

/* ==========================================================================
   WIDGET RADIOS PUBLICADAS (Radio por Países / rc-card): MODO CLARO Y OSCURO
   ========================================================================== */

/* Modo Oscuro: títulos en blanco nítido y ubicación/slogan en gris claro */
.dark-mode .rc-card-title,
html.dark-mode .rc-card-title,
.dark-mode .lmscorp-radio-country-section .rc-card-title,
html.dark-mode .lmscorp-radio-country-section .rc-card-title {
  color: #ffffff !important;
}

.dark-mode .rc-card-loc,
html.dark-mode .rc-card-loc,
.dark-mode .lmscorp-radio-country-section .rc-card-loc,
html.dark-mode .lmscorp-radio-country-section .rc-card-loc {
  color: #cbd5e1 !important;
  opacity: 0.9 !important;
}

.dark-mode .rc-card.is-playing .rc-card-title,
html.dark-mode .rc-card.is-playing .rc-card-title {
  color: #ff2020 !important;
}

/* Modo Claro: títulos en oscuro contrastado (#0f172a) y ubicación en gris legible (#475569) */
html:not(.dark-mode) .rc-card-title,
html:not(.dark-mode) .lmscorp-radio-country-section .rc-card-title {
  color: #0f172a !important;
}

html:not(.dark-mode) .rc-card-loc,
html:not(.dark-mode) .lmscorp-radio-country-section .rc-card-loc {
  color: #475569 !important;
  opacity: 0.85 !important;
}

html:not(.dark-mode) .rc-card.is-playing .rc-card-title {
  color: #ff2020 !important;
}

/* ==========================================================================
   EFECTOS 3D Y DESTELLO (SHIMMER) DE LOGOTIPOS (Importados de lamega905)
   Controlables desde Elementor > Avanzado > Efectos 3D y Destello (Logo)
   ========================================================================== */

:root {
  --lms-logo-perspective: 1000px;
}

/* Definimos la animación de rotación 3D con intervalo de espera (Eje Y horizontal) */
@keyframes rotacion3D {
  0%, 70% {
    /* Durante el primer 70% del tiempo (3.15s), la imagen se queda quieta */
    transform: perspective(var(--lms-logo-perspective, 1000px)) rotateY(0deg);
  }
  100% {
    /* En el 30% restante (1.35s), da la vuelta completa en 3D */
    transform: perspective(var(--lms-logo-perspective, 1000px)) rotateY(360deg);
  }
}

/* Rotación 3D Vertical (Eje X) si se selecciona en los controles */
@keyframes rotacion3D_X {
  0%, 70% {
    transform: perspective(var(--lms-logo-perspective, 1000px)) rotateX(0deg);
  }
  100% {
    transform: perspective(var(--lms-logo-perspective, 1000px)) rotateX(360deg);
  }
}

/* El destello cruza diagonalmente MIENTRAS la imagen está quieta */
@keyframes destelloShimmer {
  0% {
    /* Empieza arriba a la derecha */
    transform: translateX(100%) translateY(-100%) rotate(45deg);
    opacity: 0;
  }
  10% {
    opacity: 1; /* Se hace visible rápidamente al empezar */
  }
  60% {
    /* Termina su recorrido abajo a la izquierda antes de que la imagen gire */
    transform: translateX(-100%) translateY(100%) rotate(45deg);
    opacity: 0;
  }
  100% {
    /* Se mantiene oculto y estático el resto del tiempo (mientras la imagen rota) */
    transform: translateX(-100%) translateY(100%) rotate(45deg);
    opacity: 0;
  }
}

/* Contenedores con rotación o destello activo */
.has-lms-rotacion3d,
.has-lms-shimmer,
.imagen-3d-rotativa {
  position: relative;
  overflow: hidden !important;
  display: inline-block;
}

/* Aplicamos la rotación 3D fluida a las imágenes solo cuando está activado */
.has-lms-rotacion3d img,
.imagen-3d-rotativa img {
  position: relative;
  overflow: hidden;
  /* 4.5 segundos en total por defecto: configurable por slider */
  animation: rotacion3D 4.5s cubic-bezier(0.25, 1, 0.5, 1) infinite;
  transform-style: preserve-3d;
  backface-visibility: visible;
  will-change: transform;
}

/* Variante si se eligió eje X en los controles */
.lms-rot-axis-X.has-lms-rotacion3d img {
  animation-name: rotacion3D_X !important;
}

/* Pausar animación al pasar el puntero (Hover) si se activa en los controles */
.lms-pause-hover-yes:hover img,
.lms-pause-hover-yes:hover::after {
  animation-play-state: paused !important;
}

/* Creación del destello blanco traslúcido (Shimmer beam):
   SOLO se activa si está encendido en los controles (has-lms-shimmer) */
.has-lms-shimmer::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 300%; /* Cubre la diagonal al rotar */
  height: 300%;
  pointer-events: none; /* No interfiere con clics */
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: destelloShimmer 4.5s cubic-bezier(0.25, 1, 0.5, 1) infinite;
  z-index: 2;
}

/* Si el destello está desactivado explícitamente o no tiene la clase, no debe mostrar nada */
.has-lms-shimmer-no::after,
.imagen-3d-rotativa:not(.has-lms-shimmer)::after,
.elementor-element-e603083:not(.has-lms-shimmer)::after,
.lms-logo:not(.has-lms-shimmer)::after,
.custom-logo-link:not(.has-lms-shimmer)::after {
  content: none !important;
  display: none !important;
  animation: none !important;
  opacity: 0 !important;
}

/* ==========================================================================
   3. EFECTO: FLOTACIÓN SUAVE (LEVITACIÓN ANTIGRAVEDAD)
   ========================================================================== */
@keyframes lmsFloatLevitation {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
  100% {
    transform: translateY(0px);
  }
}

.has-lms-float img {
  animation: lmsFloatLevitation 3.5s ease-in-out infinite !important;
}

/* ==========================================================================
   4. EFECTO: PULSO RÍTMICO / LATIDO (PULSE)
   ========================================================================== */
@keyframes lmsPulseBeat {
  0% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.05);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.03);
  }
  70% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}

.has-lms-pulse img {
  animation: lmsPulseBeat 2.4s ease-in-out infinite !important;
  transform-origin: center center;
}

/* ==========================================================================
   5. EFECTO: RESPLANDOR NEÓN (AURA GLOW)
   ========================================================================== */
@keyframes lmsNeonGlowPulse {
  0%, 100% {
    filter: drop-shadow(0 0 5px var(--lms-glow-color, rgba(0, 229, 255, 0.75)))
            drop-shadow(0 0 15px var(--lms-glow-color, rgba(0, 229, 255, 0.4)));
  }
  50% {
    filter: drop-shadow(0 0 12px var(--lms-glow-color, rgba(0, 229, 255, 0.95)))
            drop-shadow(0 0 25px var(--lms-glow-color, rgba(0, 229, 255, 0.7)));
  }
}

.has-lms-glow img {
  animation: lmsNeonGlowPulse 2.8s ease-in-out infinite !important;
}

/* ==========================================================================
   6. EFECTOS AL PASAR EL RATÓN (HOVER INTERACTIONS)
   ========================================================================== */

/* Zoom Suave */
.lms-hover-zoom img {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.lms-hover-zoom:hover img {
  transform: scale(1.08) !important;
}

/* Inclinación 3D (Tilt) */
.lms-hover-tilt {
  perspective: 800px;
}
.lms-hover-tilt img {
  transition: transform 0.4s ease !important;
}
.lms-hover-tilt:hover img {
  transform: perspective(800px) rotateX(10deg) rotateY(-12deg) scale(1.05) !important;
}

/* Giro Completo (Flip) */
.lms-hover-flip {
  perspective: 1000px;
}
.lms-hover-flip img {
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.lms-hover-flip:hover img {
  transform: perspective(1000px) rotateY(180deg) !important;
}

/* Brillo Flash */
.lms-hover-bright img {
  transition: filter 0.3s ease, transform 0.3s ease !important;
}
.lms-hover-bright:hover img {
  filter: brightness(1.3) contrast(1.1) !important;
  transform: scale(1.03) !important;
}

/* ==========================================================================
   AJUSTE DE PIE DE PÁGINA: ELEVAR RENDICIÓN DE CUENTAS & ESPACIO REPRODUCTOR
   ========================================================================== */
/* Despeje inferior del pie de página al ras del reproductor */
.lmscorp-theme-location--footer,
.elementor-location-footer,
.elementor-6484 {
  padding-bottom: 42px !important;
}

/* Enlace de Rendición de cuentas pegado sutilmente encima del reproductor */
.elementor-element-2c72821 {
  margin-top: 2px !important;
  margin-bottom: 3px !important;
  position: relative !important;
  z-index: 5 !important;
}

.elementor-element-2c72821 .elementor-icon-list-item {
  display: inline-flex !important;
  align-items: center !important;
  transition: transform 0.25s ease, opacity 0.25s ease !important;
}

.elementor-element-2c72821 .elementor-icon-list-item:hover {
  transform: translateY(-2px) !important;
}

@media (max-width: 767px) {
  .lmscorp-theme-location--footer,
  .elementor-location-footer,
  .elementor-6484 {
    padding-bottom: 54px !important;
  }
  .elementor-element-2c72821 {
    margin-bottom: 5px !important;
  }
}