.elementor-2 .elementor-element.elementor-element-1399a6f{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--overlay-opacity:0.46;--overlay-mix-blend-mode:darken;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2 .elementor-element.elementor-element-1399a6f:not(.elementor-motion-effects-element-type-background), .elementor-2 .elementor-element.elementor-element-1399a6f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://pararayo.com/wp-content/uploads/2025/12/como-funciona-un-pararrayos.jpg");background-position:center center;background-size:cover;}.elementor-2 .elementor-element.elementor-element-1399a6f::before, .elementor-2 .elementor-element.elementor-element-1399a6f > .elementor-background-video-container::before, .elementor-2 .elementor-element.elementor-element-1399a6f > .e-con-inner > .elementor-background-video-container::before, .elementor-2 .elementor-element.elementor-element-1399a6f > .elementor-background-slideshow::before, .elementor-2 .elementor-element.elementor-element-1399a6f > .e-con-inner > .elementor-background-slideshow::before, .elementor-2 .elementor-element.elementor-element-1399a6f > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#000000;background-image:url("https://pararayo.com/wp-content/uploads/2025/12/Recurso-2.png");--background-overlay:'';background-position:center right;background-repeat:no-repeat;background-size:contain;}.elementor-widget-image .widget-image-caption{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 );}.elementor-2 .elementor-element.elementor-element-16fe52f img{width:74%;}.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 );color:var( --e-global-color-primary );}.elementor-2 .elementor-element.elementor-element-7d7182e{text-align:center;}.elementor-2 .elementor-element.elementor-element-7d7182e .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:32px;font-weight:400;color:#FFFFFF;}.elementor-widget-icon-list .elementor-icon-list-item:not(:last-child):after{border-color:var( --e-global-color-text );}.elementor-widget-icon-list .elementor-icon-list-icon i{color:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-icon svg{fill:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-item > .elementor-icon-list-text, .elementor-widget-icon-list .elementor-icon-list-item > a{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-icon-list .elementor-icon-list-text{color:var( --e-global-color-secondary );}.elementor-2 .elementor-element.elementor-element-c845fdf .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-2 .elementor-element.elementor-element-c845fdf .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-2 .elementor-element.elementor-element-c845fdf{--e-icon-list-icon-size:26px;--icon-vertical-offset:0px;}.elementor-2 .elementor-element.elementor-element-c845fdf .elementor-icon-list-item > .elementor-icon-list-text, .elementor-2 .elementor-element.elementor-element-c845fdf .elementor-icon-list-item > a{font-family:"Lato", Sans-serif;font-size:26px;font-weight:400;}.elementor-2 .elementor-element.elementor-element-c845fdf .elementor-icon-list-text{color:#FFFFFF;transition:color 0.3s;}@media(max-width:767px){.elementor-2 .elementor-element.elementor-element-16fe52f img{width:95%;}.elementor-2 .elementor-element.elementor-element-7d7182e .elementor-heading-title{font-size:24px;}}@media(min-width:768px){.elementor-2 .elementor-element.elementor-element-1399a6f{--content-width:748px;}}/* Start custom CSS for container, class: .elementor-element-1399a6f */<style>
  /* Contenedor principal para asegurar el tamaño y centrado */
  .lightning-container {
    width: 100vw; /* Asegura el ancho completo de la ventana */
    height: 100vh; /* Asegura el alto completo de la ventana */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Oculta cualquier desbordamiento */
    position: relative; /* Necesario para posicionar el canvas */
  }

  /* El canvas que dibujará el rayo */
  #lightningCanvas {
    position: absolute; /* Posición absoluta para cubrir el fondo */
    top: 0;
    left: 0;
    /* Ajusta el tamaño aquí para que sea 1920x1080 o se adapte */
    width: 100%;
    height: 100%;
    background-image: url('https://i.imgur.com/kS5x01H.jpeg'); /* Tu imagen panorámica */
    background-size: cover; /* Cubre todo el canvas */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat;
    z-index: 1; /* Para que el rayo se dibuje sobre el fondo */
  }
</style>

<div class="lightning-container">
  <canvas id="lightningCanvas"></canvas>
</div>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const canvas = document.getElementById('lightningCanvas');
    const ctx = canvas.getContext('2d');

    // Ajustar el tamaño del canvas
    function resizeCanvas() {
      // Intenta establecer el tamaño fijo si Elementor lo permite,
      // pero es mejor que se adapte al contenedor si es posible.
      canvas.width = 1920; // Tamaño fijo sugerido
      canvas.height = 1080; // Tamaño fijo sugerido
      // O para adaptabilidad (puede requerir más CSS en Elementor)
      // canvas.width = canvas.parentElement.offsetWidth;
      // canvas.height = canvas.parentElement.offsetHeight;
      drawBackground(); // Redibuja el fondo si el canvas cambia de tamaño
    }

    // Dibuja la imagen de fondo una vez en el canvas
    const backgroundImage = new Image();
    backgroundImage.src = 'https://i.imgur.com/kS5x01H.jpeg'; // Tu imagen panorámica
    backgroundImage.onload = () => {
      drawBackground();
    };

    function drawBackground() {
      // Limpia el canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      // Dibuja la imagen de fondo escalada para cubrir el canvas
      if (backgroundImage.complete) {
        const hRatio = canvas.width / backgroundImage.width;
        const vRatio = canvas.height / backgroundImage.height;
        const ratio = Math.max(hRatio, vRatio); // Escala para cubrir
        const centerShiftX = (canvas.width - backgroundImage.width * ratio) / 2;
        const centerShiftY = (canvas.height - backgroundImage.height * ratio) / 2;
        ctx.drawImage(
          backgroundImage,
          0,
          0,
          backgroundImage.width,
          backgroundImage.height,
          centerShiftX,
          centerShiftY,
          backgroundImage.width * ratio,
          backgroundImage.height * ratio
        );
      }
    }

    window.addEventListener('resize', resizeCanvas);
    resizeCanvas(); // Llama al inicio para establecer el tamaño

    let isMouseOver = false;
    let lightningInterval;
    let currentLightning = null; // Para almacenar los puntos del rayo actual
    let animationFrameId = null;

    canvas.addEventListener('mouseenter', () => {
      isMouseOver = true;
      // Inicia la generación de rayos cuando el mouse entra
      startLightningEffect();
    });

    canvas.addEventListener('mouseleave', () => {
      isMouseOver = false;
      // Detiene la generación de rayos y borra el actual
      stopLightningEffect();
      drawBackground(); // Redibuja solo el fondo
    });

    // Función para dibujar un rayo de manera simple
    function drawLightning(points) {
      if (!points || points.length < 2) return;
      ctx.strokeStyle = 'white'; // Color del rayo
      ctx.lineWidth = 3; // Grosor del rayo
      ctx.shadowColor = 'rgba(255, 255, 255, 0.8)'; // Efecto de brillo
      ctx.shadowBlur = 15;
      ctx.lineCap = 'round';
      ctx.lineJoin = 'round';

      ctx.beginPath();
      ctx.moveTo(points[0].x, points[0].y);
      for (let i = 1; i < points.length; i++) {
        ctx.lineTo(points[i].x, points[i].y);
      }
      ctx.stroke();

      // Restaura los valores de sombra para no afectar otros dibujos
      ctx.shadowColor = 'transparent';
      ctx.shadowBlur = 0;
    }

    // Genera un rayo "ficticio" que va de arriba a abajo o aleatoriamente
    function generateRandomLightning() {
      const startX = Math.random() * canvas.width;
      const startY = 0; // Desde la parte superior
      const endX = startX + (Math.random() - 0.5) * 200; // Un poco desviado
      const endY = canvas.height;

      const points = [{ x: startX, y: startY }];
      let currentX = startX;
      let currentY = startY;

      // Genera segmentos del rayo
      while (currentY < endY) {
        currentX += (Math.random() - 0.5) * 50; // Desviación lateral
        currentY += 20 + Math.random() * 30; // Avance hacia abajo
        if (currentY > endY) currentY = endY;
        points.push({ x: currentX, y: currentY });
      }
      return points;
    }

    function animateLightning() {
      if (!isMouseOver) {
        stopLightningEffect();
        return;
      }

      drawBackground(); // Limpia y redibuja el fondo para "borrar" el rayo anterior

      // Si no hay rayo actual o se generó hace un tiempo, crea uno nuevo
      if (!currentLightning || Math.random() < 0.1) {
        // Probabilidad de generar un nuevo rayo
        currentLightning = generateRandomLightning();
      }

      drawLightning(currentLightning); // Dibuja el rayo actual

      animationFrameId = requestAnimationFrame(animateLightning);
    }

    function startLightningEffect() {
      if (lightningInterval) clearInterval(lightningInterval);
      if (animationFrameId) cancelAnimationFrame(animationFrameId);

      currentLightning = null; // Reinicia el rayo
      animateLightning(); // Inicia la animación del rayo
    }

    function stopLightningEffect() {
      if (lightningInterval) clearInterval(lightningInterval);
      if (animationFrameId) cancelAnimationFrame(animationFrameId);
      currentLightning = null;
      animationFrameId = null;
    }
  });
</script>/* End custom CSS */