/* Join WhatsApp by Lypsum Studio */
:root {
  --jw-primary: #db304f;  /* marca */
  --jw-accent:  #28bfb3;  /* marca */
  --jw-bg: #ffffff;
  --jw-text: #0b1b16;
  --jw-shadow: 0 10px 30px rgba(11,27,22,.25);
  --jw-radius: 18px;
}

/* Asegura que cualquier [hidden] no se muestre */
.lypsum-jw [hidden] { display: none !important; }

/* El contenedor queda pegado al borde y el panel aparece por encima del botón */
.lypsum-jw {
  position: fixed;
  z-index: 9999;
  bottom: 18px;
  display: flex;
  flex-direction: column-reverse; /* panel arriba, botón abajo */
  gap: 10px;
  pointer-events: none;
}

.lypsum-jw.jw-right { right: 18px; }
.lypsum-jw.jw-left  { left:  18px; }

.lypsum-jw.jw-right .jw-panel { transform-origin: bottom right; }
.lypsum-jw.jw-left  .jw-panel { transform-origin: bottom left; }

.lypsum-jw .jw-toggle {
  pointer-events: auto;
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 999px;
  background: var(--jw-toggle-bg);
  color: #fff;
  box-shadow: var(--jw-shadow);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease;
  position: relative;
  isolation: isolate;
  margin:0;
}

.lypsum-jw .jw-toggle::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  box-shadow: 0 0 0 0 var(--jw-pulse, rgba(40,191,179,.35));
  animation: jw-pulse 2s infinite;
  z-index:-1;
}

@keyframes jw-pulse {
  0% { box-shadow: 0 0 0 0 rgba(40,191,179,.35); }
  70% { box-shadow: 0 0 0 18px rgba(40,191,179,0); }
  100% { box-shadow: 0 0 0 0 rgba(40,191,179,0); }
}

.lypsum-jw .jw-toggle:hover { transform: translateY(-2px); }

.lypsum-jw .jw-icon {
  width: 26px; height: 26px; fill: #fff;
}

.lypsum-jw .jw-panel {
  pointer-events: auto;
  width: min(92vw, 320px);
  background: var(--jw-bg);
  border-radius: calc(var(--jw-radius) + 2px);
  box-shadow: var(--jw-shadow);
  padding: 12px;
  display: grid;
  gap: 10px;
  position: relative;
  animation: jw-pop .18s ease;
  margin-bottom: 8px;
}

/* Origen de animación según lado */
.lypsum-jw.jw-right .jw-panel{ transform-origin: bottom right; }
.lypsum-jw.jw-left  .jw-panel{ transform-origin: bottom left; }

@keyframes jw-pop {
  from { transform: translateY(8px) scale(.98); opacity: 0; }
  to   { transform: translateY(0)   scale(1);    opacity: 1; }
}

/* Bafarada del PANEL (cola del bocadillo) */
.jw-panel.is-right::after,
.jw-panel.is-left::after{
  content:""; position:absolute; bottom:-20px; width:0; height:0;
  border:10px solid transparent; filter:drop-shadow(0 -1px 0 rgba(0,0,0,.06));
}
.jw-panel.is-right::after{ right:20px; border-top-color:#bec2c1; }
.jw-panel.is-left::after { left:20px;  border-top-color:#bec2c1; }

/* “burbuja” estilo chat */
.lypsum-jw .jw-bubble {
  background: linear-gradient(180deg, #f7faf9, #ffffff);
  color: var(--jw-text);
  border-radius: 16px;
  padding: 10px 12px;
  line-height: 1.25;
  font-size: 14px;
  position: relative;
  border: 1px solid rgba(0,0,0,.06);
}
.lypsum-jw .jw-bubble::after{
  content:"";
  position:absolute;
  bottom: -8px;
  right: 24px;
  border: 8px solid transparent;
  border-top-color: #fff;
  filter: drop-shadow(0 -1px 0 rgba(0,0,0,.06));
}

.lypsum-jw.jw-left .jw-bubble::after{
  right: auto; left: 24px;
}

.lypsum-jw .jw-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  background: var(--jw-btn-bg); /* color plano */
  color: #fff;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .2px;
  transition: transform .15s ease, filter .2s ease;
  box-shadow: var(--jw-shadow);
}

.lypsum-jw .jw-btn:hover { transform: translateY(-1px); filter: saturate(1.05); }
.lypsum-jw .jw-btn:active{ transform: translateY(0); }

.lypsum-jw .jw-btn-text { white-space: nowrap; }

/* Pegado al borde según lado + alineación de items */
.lypsum-jw.jw-right{ right:18px; align-items:flex-end; }
.lypsum-jw.jw-left { left:18px;  align-items:flex-start; }

/* Pico/bafarada del BOTÓN apuntando al panel */
.jw-right.is-right.jw-toggle::before,
.jw-left.is-left.jw-toggle::before{ content:""; position:absolute; width:16px; height:12px; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.08); border-radius:10px; z-index:-1; }
.jw-right.is-right.jw-toggle::before{ right:40px; bottom:18px; transform:rotate(35deg); }
.jw-left.is-left.jw-toggle::before { left:40px;  bottom:18px; transform:rotate(-35deg); }


/* responsive tweaks */
@media (max-width: 480px){
  .lypsum-jw { bottom: 12px; }
  .lypsum-jw .jw-toggle{ width:52px; height:52px; }
  .lypsum-jw .jw-panel{ width: min(94vw, 320px); }
  .lypsum-jw .jw-bubble{ font-size: 13px; }
}