.elementor-kit-450{--e-global-color-primary:#0E9B47;--e-global-color-secondary:#FFF9F5;--e-global-color-text:#737373;--e-global-color-accent:#0A0A0A;--e-global-color-2d5403d:#FFFFFF;--e-global-color-2e58cd0:#E2F9EA;--e-global-color-b9a6b24:#69796F;--e-global-color-d95cfcc:#2A5238;--e-global-color-7b8aeff:#FFFFFF;--e-global-typography-primary-font-family:"Playfair Display";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Open Sans";--e-global-typography-text-font-size:18px;--e-global-typography-text-font-weight:400;--e-global-typography-text-text-transform:none;--e-global-typography-text-font-style:normal;--e-global-typography-text-line-height:1.8em;--e-global-typography-accent-font-family:"Playfair Display";--e-global-typography-accent-font-size:18px;--e-global-typography-accent-font-weight:500;--e-global-typography-278aa3a-font-size:4.4vw;--e-global-typography-278aa3a-font-weight:700;--e-global-typography-278aa3a-font-style:normal;--e-global-typography-278aa3a-text-decoration:none;--e-global-typography-278aa3a-line-height:1.2em;--e-global-typography-278aa3a-letter-spacing:0px;--e-global-typography-2e7a006-font-size:60px;--e-global-typography-2e7a006-font-weight:700;--e-global-typography-2e7a006-font-style:normal;--e-global-typography-2e7a006-text-decoration:none;--e-global-typography-2e7a006-line-height:1.1em;--e-global-typography-2e7a006-letter-spacing:0px;--e-global-typography-e0c5c62-font-size:35px;--e-global-typography-e0c5c62-font-weight:700;--e-global-typography-e0c5c62-font-style:normal;--e-global-typography-e0c5c62-text-decoration:none;--e-global-typography-e0c5c62-line-height:1.5em;--e-global-typography-e0c5c62-letter-spacing:0px;--e-global-typography-4937c61-font-size:26px;--e-global-typography-4937c61-font-weight:700;--e-global-typography-4937c61-text-transform:none;--e-global-typography-4937c61-font-style:normal;--e-global-typography-4937c61-text-decoration:none;--e-global-typography-4937c61-line-height:1.2em;--e-global-typography-4937c61-letter-spacing:0px;--e-global-typography-45ac3d1-font-size:20px;--e-global-typography-45ac3d1-font-weight:700;--e-global-typography-45ac3d1-font-style:normal;--e-global-typography-45ac3d1-text-decoration:none;--e-global-typography-45ac3d1-line-height:3em;--e-global-typography-45ac3d1-letter-spacing:0px;--e-global-typography-baeeb05-font-family:"Open Sans";--e-global-typography-baeeb05-font-size:24px;--e-global-typography-baeeb05-font-weight:400;--e-global-typography-baeeb05-font-style:normal;--e-global-typography-baeeb05-text-decoration:none;--e-global-typography-baeeb05-line-height:2em;--e-global-typography-baeeb05-letter-spacing:0px;--e-global-typography-1661da8-font-family:"Open Sans";--e-global-typography-1661da8-font-size:22px;--e-global-typography-1661da8-font-weight:400;--e-global-typography-1661da8-font-style:normal;--e-global-typography-1661da8-text-decoration:none;--e-global-typography-1661da8-line-height:1.8em;--e-global-typography-1661da8-letter-spacing:0px;font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );text-transform:var( --e-global-typography-text-text-transform );font-style:var( --e-global-typography-text-font-style );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-450 e-page-transition{background-color:#FFBC7D;}.elementor-kit-450 a{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );}.elementor-kit-450 h1{font-size:var( --e-global-typography-278aa3a-font-size );font-weight:var( --e-global-typography-278aa3a-font-weight );font-style:var( --e-global-typography-278aa3a-font-style );text-decoration:var( --e-global-typography-278aa3a-text-decoration );line-height:var( --e-global-typography-278aa3a-line-height );letter-spacing:var( --e-global-typography-278aa3a-letter-spacing );}.elementor-kit-450 h2{font-size:var( --e-global-typography-2e7a006-font-size );font-weight:var( --e-global-typography-2e7a006-font-weight );font-style:var( --e-global-typography-2e7a006-font-style );text-decoration:var( --e-global-typography-2e7a006-text-decoration );line-height:var( --e-global-typography-2e7a006-line-height );letter-spacing:var( --e-global-typography-2e7a006-letter-spacing );}.elementor-kit-450 h3{font-size:var( --e-global-typography-e0c5c62-font-size );font-weight:var( --e-global-typography-e0c5c62-font-weight );font-style:var( --e-global-typography-e0c5c62-font-style );text-decoration:var( --e-global-typography-e0c5c62-text-decoration );line-height:var( --e-global-typography-e0c5c62-line-height );letter-spacing:var( --e-global-typography-e0c5c62-letter-spacing );}.elementor-kit-450 h4{font-size:var( --e-global-typography-4937c61-font-size );font-weight:var( --e-global-typography-4937c61-font-weight );text-transform:var( --e-global-typography-4937c61-text-transform );font-style:var( --e-global-typography-4937c61-font-style );text-decoration:var( --e-global-typography-4937c61-text-decoration );line-height:var( --e-global-typography-4937c61-line-height );letter-spacing:var( --e-global-typography-4937c61-letter-spacing );}.elementor-kit-450 h5{font-size:var( --e-global-typography-45ac3d1-font-size );font-weight:var( --e-global-typography-45ac3d1-font-weight );font-style:var( --e-global-typography-45ac3d1-font-style );text-decoration:var( --e-global-typography-45ac3d1-text-decoration );line-height:var( --e-global-typography-45ac3d1-line-height );letter-spacing:var( --e-global-typography-45ac3d1-letter-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-450{--e-global-typography-text-font-size:16px;--e-global-typography-278aa3a-font-size:55px;--e-global-typography-2e7a006-font-size:37px;--e-global-typography-e0c5c62-font-size:28px;--e-global-typography-4937c61-font-size:18px;--e-global-typography-45ac3d1-font-size:14px;--e-global-typography-baeeb05-font-size:16px;--e-global-typography-1661da8-font-size:16px;font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-450 a{font-size:var( --e-global-typography-accent-font-size );}.elementor-kit-450 h1{font-size:var( --e-global-typography-278aa3a-font-size );line-height:var( --e-global-typography-278aa3a-line-height );letter-spacing:var( --e-global-typography-278aa3a-letter-spacing );}.elementor-kit-450 h2{font-size:var( --e-global-typography-2e7a006-font-size );line-height:var( --e-global-typography-2e7a006-line-height );letter-spacing:var( --e-global-typography-2e7a006-letter-spacing );}.elementor-kit-450 h3{font-size:var( --e-global-typography-e0c5c62-font-size );line-height:var( --e-global-typography-e0c5c62-line-height );letter-spacing:var( --e-global-typography-e0c5c62-letter-spacing );}.elementor-kit-450 h4{font-size:var( --e-global-typography-4937c61-font-size );line-height:var( --e-global-typography-4937c61-line-height );letter-spacing:var( --e-global-typography-4937c61-letter-spacing );}.elementor-kit-450 h5{font-size:var( --e-global-typography-45ac3d1-font-size );line-height:var( --e-global-typography-45ac3d1-line-height );letter-spacing:var( --e-global-typography-45ac3d1-letter-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-450{--e-global-typography-278aa3a-font-size:29px;--e-global-typography-2e7a006-font-size:24px;font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-450 a{font-size:var( --e-global-typography-accent-font-size );}.elementor-kit-450 h1{font-size:var( --e-global-typography-278aa3a-font-size );line-height:var( --e-global-typography-278aa3a-line-height );letter-spacing:var( --e-global-typography-278aa3a-letter-spacing );}.elementor-kit-450 h2{font-size:var( --e-global-typography-2e7a006-font-size );line-height:var( --e-global-typography-2e7a006-line-height );letter-spacing:var( --e-global-typography-2e7a006-letter-spacing );}.elementor-kit-450 h3{font-size:var( --e-global-typography-e0c5c62-font-size );line-height:var( --e-global-typography-e0c5c62-line-height );letter-spacing:var( --e-global-typography-e0c5c62-letter-spacing );}.elementor-kit-450 h4{font-size:var( --e-global-typography-4937c61-font-size );line-height:var( --e-global-typography-4937c61-line-height );letter-spacing:var( --e-global-typography-4937c61-letter-spacing );}.elementor-kit-450 h5{font-size:var( --e-global-typography-45ac3d1-font-size );line-height:var( --e-global-typography-45ac3d1-line-height );letter-spacing:var( --e-global-typography-45ac3d1-letter-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS */<!-- WIDGET DE ATENCION AL CLIENTE - JABL PROMOCIONES -->
<style>
#jabl-chat-button {
  position:fixed;
  bottom:22px;
  right:22px;
  z-index:999999;
  background:#16a765;
  color:white;
  border:0;
  border-radius:50px;
  padding:15px 21px;
  font-size:15px;
  font-weight:bold;
  cursor:pointer;
  box-shadow:0 4px 18px rgba(0,0,0,.22);
  font-family:Arial,sans-serif;
}

#jabl-chat-window {
  display:none;
  position:fixed;
  bottom:90px;
  right:22px;
  width:340px;
  max-width:calc(100vw - 30px);
  height:465px;
  max-height:calc(100vh - 120px);
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  z-index:999999;
  box-shadow:0 5px 30px rgba(0,0,0,.25);
  font-family:Arial,sans-serif;
}

#jabl-chat-header {
  background:#174b39;
  color:white;
  padding:18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

#jabl-chat-header strong {
  font-size:16px;
}

#jabl-close {
  background:none;
  border:0;
  color:white;
  font-size:25px;
  cursor:pointer;
}

#jabl-chat-content {
  height:calc(100% - 145px);
  padding:16px;
  overflow-y:auto;
  background:#f5f7f6;
}

.jabl-message {
  padding:11px 13px;
  border-radius:12px;
  margin-bottom:12px;
  font-size:14px;
  line-height:1.5;
  max-width:90%;
}

.jabl-bot {
  background:white;
  color:#333;
  border:1px solid #e5e5e5;
}

.jabl-user {
  background:#d9f5e5;
  color:#174b39;
  margin-left:auto;
}

#jabl-chat-footer {
  padding:12px;
  background:white;
  border-top:1px solid #eee;
}

#jabl-chat-footer input {
  width:100%;
  box-sizing:border-box;
  padding:12px;
  border:1px solid #ddd;
  border-radius:22px;
  outline:none;
  font-size:14px;
}

.jabl-quick {
  display:block;
  width:100%;
  text-align:left;
  padding:10px;
  margin:6px 0;
  border:1px solid #d8e6df;
  background:white;
  border-radius:9px;
  color:#174b39;
  cursor:pointer;
  font-size:13px;
}

.jabl-quick:hover {
  background:#e8f5ed;
}

#jabl-whatsapp {
  display:block;
  text-align:center;
  background:#16a765;
  color:white;
  padding:12px;
  border-radius:9px;
  text-decoration:none;
  font-weight:bold;
  margin-top:9px;
  font-size:14px;
}

@media(max-width:480px) {
  #jabl-chat-window {
    right:10px;
    bottom:82px;
    width:calc(100vw - 20px);
  }
  #jabl-chat-button {
    right:15px;
    bottom:15px;
  }
}
<\/style>

<button id="jabl-chat-button" type="button">
  💬 ¿Necesitas ayuda?
</button>

<div id="jabl-chat-window">

  <div id="jabl-chat-header">
    <div>
      <strong>JABL PROMOCIONES</strong><br>
      <small>Estamos aquí para ayudarte</small>
    </div>
    <button id="jabl-close" aria-label="Cerrar chat">×</button>
  </div>

  <div id="jabl-chat-content">
    <div class="jabl-message jabl-bot">
      ¡Hola! 👋 Bienvenido a JABL Promociones.<br>
      ¿En qué podemos ayudarte?
    </div>

    <button class="jabl-quick" data-question="promociones">
      🏷️ Información sobre promociones
    </button>

    <button class="jabl-quick" data-question="servicios">
      ℹ️ Información sobre servicios
    </button>

    <button class="jabl-quick" data-question="precios">
      💰 Consultar precios y presupuestos
    </button>

    <button class="jabl-quick" data-question="contacto">
      📞 Quiero contactar con JABL
    </button>

    <a id="jabl-whatsapp" href="#" target="_blank"
       rel="noopener noreferrer">
      🟢 Hablar por WhatsApp
    </a>
  </div>

  <div id="jabl-chat-footer">
    <input id="jabl-input" type="text"
      placeholder="Escribe tu pregunta..."
      aria-label="Escribe tu pregunta">
  </div>

</div>

<script>
(function() {
  // CONFIGURACIÓN
  // Sustituir por el número real con prefijo internacional.
  // Ejemplo: 34633336735 (sin + ni espacios).
  const WHATSAPP_NUMBER = "34XXXXXXXXX";

  const button = document.getElementById("jabl-chat-button");
  const windowChat = document.getElementById("jabl-chat-window");
  const close = document.getElementById("jabl-close");
  const content = document.getElementById("jabl-chat-content");
  const input = document.getElementById("jabl-input");
  const whatsapp = document.getElementById("jabl-whatsapp");

  function whatsappURL(message) {
    return "https://wa.me/" +34633336735"?text=" + encodeURIComponent(message);
  }

  function updateWhatsApp(message) {
    whatsapp.href = whatsappURL(message);
  }

  updateWhatsApp("Hola, tengo una consulta sobre JABL Promociones.");

  button.addEventListener("click", function() {
    windowChat.style.display = "block";
    button.style.display = "none";
  });

  close.addEventListener("click", function() {
    windowChat.style.display = "none";
    button.style.display = "block";
  });

  function addMessage(message, type) {
    const div = document.createElement("div");
    div.className = "jabl-message " +
      (type === "user" ? "jabl-user" : "jabl-bot");
    div.textContent = message;
    content.appendChild(div);
    content.scrollTop = content.scrollHeight;
  }

  const answers = {
    promociones:
      "Para conocer nuestras promociones actuales y sus condiciones, contacta con nuestro equipo por WhatsApp.",

    servicios:
      "Estaremos encantados de informarte sobre nuestros servicios. Cuéntanos qué necesitas por WhatsApp.",

    precios:
      "Para consultar precios o solicitar un presupuesto personalizado, escríbenos directamente por WhatsApp.",

    contacto:
      "Puedes contactar directamente con nuestro equipo a través del botón de WhatsApp."
  };

  document.querySelectorAll(".jabl-quick").forEach(function(btn) {
    btn.addEventListener("click", function() {
      const question = btn.dataset.question;
      addMessage(btn.textContent.trim(), "user");
      addMessage(answers[question], "bot");

      updateWhatsApp(
        "Hola, estoy visitando JABL Promociones. " +
        "Quisiera información sobre: " + question
      );
    });
  });

  function sendQuestion() {
    const question = input.value.trim();
    if (!question) return;

    addMessage(question, "user");
    addMessage(
      "Gracias por tu consulta. Para darte una respuesta personalizada, nuestro equipo puede atenderte directamente por WhatsApp.",
      "bot"
    );

    updateWhatsApp(
      "Hola, tengo esta consulta sobre JABL Promociones: " + question
    );

    input.value = "";
  }

  input.addEventListener("keydown", function(event) {
    if (event.key === "Enter") sendQuestion();
  });

  whatsapp.addEventListener("click", function(event) {
    if (!/^\d{8,15}$/.test(WHATSAPP_NUMBER)) {
      event.preventDefault();
      alert("Configura primero el número de WhatsApp de JABL Promociones.");
    }
  });

})();
</script>/* End custom CSS */