<!-- POPUP CANAL DE WHATSAPP CCIP -->
<div id="ccip-whatsapp-popup" class="ccip-popup-overlay">

  <div class="ccip-popup-box">

    <!-- Botón cerrar -->
    <button
      class="ccip-popup-close"
      id="ccip-popup-close"
      aria-label="Cerrar"
    >
      ×
    </button>

    <!--
      CAMBIÁ EL # POR EL LINK REAL DEL CANAL DE WHATSAPP
    -->
    <a
      href="#"
      target="_blank"
      rel="noopener noreferrer"
      class="ccip-popup-link"
    >
      <img
        src="https://ccip.com.ar/wp-content/uploads/2026/09/Sumate-a-nuestro-canal-ccip.png"
        alt="Sumate a nuestro canal de WhatsApp"
        class="ccip-popup-image"
      >
    </a>

  </div>

</div>


<style>
/* ================================
   POPUP WHATSAPP CCIP
================================ */

.ccip-popup-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.72);

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 20px;

  z-index: 999999;

  opacity: 0;
  visibility: hidden;

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;

  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.ccip-popup-overlay.ccip-active {
  opacity: 1;
  visibility: visible;
}


/* CONTENEDOR */

.ccip-popup-box {
  position: relative;

  width: 100%;
  max-width: 400px;

  transform:
    translateY(25px)
    scale(0.96);

  opacity: 0;

  transition:
    transform 0.35s ease,
    opacity 0.35s ease;
}

.ccip-popup-overlay.ccip-active .ccip-popup-box {
  transform:
    translateY(0)
    scale(1);

  opacity: 1;
}


/* LINK */

.ccip-popup-link {
  display: block;
  line-height: 0;
  text-decoration: none;
}


/* IMAGEN */

.ccip-popup-image {
  display: block;

  width: 100%;
  height: auto;

  border-radius: 14px;

  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.55);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.ccip-popup-link:hover .ccip-popup-image {
  transform: scale(1.015);

  box-shadow:
    0 25px 70px rgba(0, 0, 0, 0.65);
}


/* BOTÓN CERRAR */

.ccip-popup-close {
  position: absolute;

  top: -14px;
  right: -14px;

  width: 38px;
  height: 38px;

  border: none;
  border-radius: 50%;

  background: #df1919;
  color: #ffffff;

  font-size: 27px;
  font-weight: 400;
  line-height: 34px;

  cursor: pointer;

  z-index: 10;

  box-shadow:
    0 5px 18px rgba(0, 0, 0, 0.45);

  transition:
    transform 0.2s ease,
    background 0.2s ease;
}

.ccip-popup-close:hover {
  background: #b90000;
  transform: scale(1.08);
}


/* CELULAR */

@media (max-width: 500px) {

  .ccip-popup-overlay {
    padding: 25px;
  }

  .ccip-popup-box {
    max-width: 340px;
  }

  .ccip-popup-close {
    top: -12px;
    right: -12px;

    width: 36px;
    height: 36px;

    font-size: 25px;
  }

}
</style>


<script>
document.addEventListener("DOMContentLoaded", function () {

  const popup = document.getElementById("ccip-whatsapp-popup");
  const closeButton = document.getElementById("ccip-popup-close");

  /*
   * Tiempo antes de mostrar el popup.
   * 1500 = 1,5 segundos
   */
  const tiempoEspera = 1500;

  setTimeout(function () {
    popup.classList.add("ccip-active");
  }, tiempoEspera);


  // Cerrar con la X
  closeButton.addEventListener("click", function () {
    popup.classList.remove("ccip-active");
  });


  // Cerrar haciendo clic fuera de la imagen
  popup.addEventListener("click", function (event) {

    if (event.target === popup) {
      popup.classList.remove("ccip-active");
    }

  });


  // Cerrar con ESC
  document.addEventListener("keydown", function (event) {

    if (event.key === "Escape") {
      popup.classList.remove("ccip-active");
    }

  });

});
</script>

×