.elementor-36813 .elementor-element.elementor-element-bea67f0{--spacer-size:50px;}/* Start custom CSS for html, class: .elementor-element-368e7c1 *//* ===== EFECTO INTENSIFICADO: más lento y más notorio ===== */

/* Cierre algo más suave; apertura con animación larga */
#clxDrawer .clx-panel{
  transition: transform .55s ease;     /* cierre */
  will-change: transform;
  transform: translate3d(-105%,0,0);
}

/* Apertura: más lenta y con overshoot marcado */
#clxToggle:checked ~ #clxDrawer .clx-panel{
  transform: translate3d(0,0,0);
  animation: clxOpen 1.35s cubic-bezier(.16,1,.3,1) forwards;
}

/* Slide + overshoot pronunciado */
@keyframes clxOpen{
  0%   { transform: translate3d(-120%,0,0) skewX(-10deg) scale(.98); }
  48%  { transform: translate3d(  2.2%,0,0) skewX(  3deg) scale(1.00); }
  70%  { transform: translate3d( -1.6%,0,0) skewX( -1deg) scale(.999); }
  100% { transform: translate3d(   0%,0,0) skewX(  0deg) scale(1.00); }
}

/* Glitch RGB más visible y más largo */
#clxDrawer .clx-panel::before,
#clxDrawer .clx-panel::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  opacity:0;
  mix-blend-mode:screen;
  background:
    /* scanlines más marcadas */
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.06) 0 2px,
      transparent 2px 5px
    );
}

/* Capa roja */
#clxDrawer .clx-panel::before{
  box-shadow: 0 0 0 1px rgba(255, 80, 80, .35) inset;
  filter: drop-shadow(0 0 12px rgba(255,80,80,.18));
}
/* Capa cian */
#clxDrawer .clx-panel::after{
  box-shadow: 0 0 0 1px rgba( 88,208,255, .35) inset;
  filter: drop-shadow(0 0 12px rgba(88,208,255,.18));
}

/* Duración mayor + desplazamientos más grandes */
#clxToggle:checked ~ #clxDrawer .clx-panel::before{
  animation: clxGlitchA 1.15s steps(26,end) forwards, clxBands 0.95s ease-out forwards;
}
#clxToggle:checked ~ #clxDrawer .clx-panel::after{
  animation: clxGlitchB 1.15s steps(26,end) forwards;
}

/* Trayectorias más amplias y opacidad mayor */
@keyframes clxGlitchA{
  0%   { opacity:0;    transform: translateX(-18px) skewX(-8deg); }
  12%  { opacity:.55;  transform: translateX(  6px) skewX( 4deg); }
  36%  { opacity:.38;  transform: translateX( -4px) skewX(-2deg); }
  64%  { opacity:.22;  transform: translateX(  2px) skewX( 0deg); }
  100% { opacity:0;    transform: translateX(  0px) skewX( 0deg); }
}
@keyframes clxGlitchB{
  0%   { opacity:0;    transform: translateX( 18px) skewX( 8deg); }
  18%  { opacity:.48;  transform: translateX( -5px) skewX(-3deg); }
  44%  { opacity:.32;  transform: translateX(  3px) skewX( 1deg); }
  70%  { opacity:.18;  transform: translateX( -1px) skewX( 0deg); }
  100% { opacity:0;    transform: translateX(  0px) skewX( 0deg); }
}

/* Barrido de bandas verticales más visible y más lento */
#clxDrawer .clx-panel:before{
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 12px, transparent 12px 18px);
  mask-image:         repeating-linear-gradient(90deg, #000 0 12px, transparent 12px 18px);
  -webkit-mask-size: 220% 100%;
  mask-size:         220% 100%;
  -webkit-mask-position: 220% 0;
  mask-position:         220% 0;
}
@keyframes clxBands{
  0%   { -webkit-mask-position: 220% 0; mask-position: 220% 0; opacity:.45; }
  80%  { -webkit-mask-position:   0% 0; mask-position:   0% 0; opacity:.20; }
  100% { -webkit-mask-position:   0% 0; mask-position:   0% 0; opacity:0; }
}

/* Menos motion si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce){
  #clxToggle:checked ~ #clxDrawer .clx-panel{ animation:none; }
  #clxToggle:checked ~ #clxDrawer .clx-panel::before,
  #clxToggle:checked ~ #clxDrawer .clx-panel::after{ animation:none; opacity:0; }
}/* End custom CSS */