.elementor-1942 .elementor-element.elementor-element-03cc85f{padding:15% 15% 15% 15%;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );text-transform:var( --e-global-typography-primary-text-transform );letter-spacing:var( --e-global-typography-primary-letter-spacing );color:var( --e-global-color-primary );}.elementor-widget-text-editor{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}@media(max-width:1366px){.elementor-widget-heading .elementor-heading-title{letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-text-editor{letter-spacing:var( --e-global-typography-text-letter-spacing );}}@media(max-width:1024px){.elementor-widget-heading .elementor-heading-title{letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-text-editor{letter-spacing:var( --e-global-typography-text-letter-spacing );}}@media(max-width:767px){.elementor-widget-heading .elementor-heading-title{letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-text-editor{letter-spacing:var( --e-global-typography-text-letter-spacing );}}/* Start custom CSS for section, class: .elementor-element-03cc85f */.hero-digital {
  position: relative; /* Asegúrate de tener position relative */
  overflow: hidden;   /* Para que el pseudo-elemento no se desborde */
}

.hero-digital::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px; /* Ajusta la altura según la transición deseada */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff);
  pointer-events: none; /* No afecta la interacción */
  z-index: 1; /* Asegura que el degradado se posicione por encima del fondo, pero sin bloquear el contenido si ya está en un z-index mayor */
}/* End custom CSS */
/* Start custom CSS *//* Contenedor del hero */
.hero-digital {
  position: relative;
  overflow: hidden;
}

/* Píxeles rojos generados automáticamente */
.pixel-auto, .pixel-follow {
  position: absolute;
  z-index: -1;  /* Se ubican detrás del contenido */
  background-color: #e74c3c;
  opacity: 0.9;
  pointer-events: none;
  transform: translate(-50%, -50%);
  border-radius: 2px;
  will-change: top, opacity, transform;
}

/* Píxeles negros para la estela en escritorio y para la explosión en móviles */
.cursor-trail {
  position: absolute;
  z-index: 1;
  width: 8px;
  height: 8px;
  background-color: #000;
  opacity: 0.7;
  pointer-events: none;
  transform: translate(-50%, -50%);
  border-radius: 2px;
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* Píxeles negros para la explosión, con transición de 0.65s */
.explosion-trail {
  position: absolute;
  z-index: 1;
  width: 8px;
  height: 8px;
  background-color: #000;
  opacity: 0.7;
  pointer-events: none;
  transform: translate(-50%, -50%);
  border-radius: 2px;
  transition: transform 0.65s ease-out, opacity 0.65s ease-out;
}

/* Degradado inferior para transición suave */
.hero-digital::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff);
  pointer-events: none;
  z-index: 1;
}/* End custom CSS */