/* ===== Botón flotante WhatsApp ===== */

.ps-whatsapp-floating {

  position: fixed;

  right: 18px;

  bottom: 18px;

  z-index: 9999;

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  font-family: 'Sora', system-ui, sans-serif;

}



/* Panel oculto */

.ps-whatsapp-panel {

  display: flex;

  gap: 8px;

  margin-bottom: 6px;



  opacity: 0;

  visibility: hidden;

  transform: translateY(4px);

  transition: all .2s ease;

}



/* Panel visible cuando el usuario hace click */

.ps-whatsapp-panel.ps-wa-open {

  opacity: 1;

  visibility: visible;

  transform: translateY(0);

}



.ps-wa-btn {

  padding: 8px 14px;

  border-radius: 999px;

  font-size: 13px;

  font-weight: 600;

  text-decoration: none;

  background: #25D366;

  color: #fff;

  box-shadow: 0 6px 14px rgba(0,0,0,.18);

  transition: background .15s ease, transform .15s ease;

}



.ps-wa-btn:hover {

  background: #1ebe57;

  transform: translateY(-1px);

}



/* Ícono principal */

.ps-wa-main {

  width: 56px;

  height: 56px;

  border-radius: 50%;

  border: none;

  background: #25D366;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: 0 10px 25px rgba(0,0,0,.25);

  transition: transform .15s ease, background .15s ease;

}



.ps-wa-main:hover {

  transform: translateY(-2px);

  background: #1ebe57;

}



.ps-wa-icon {

  width: 28px;

  height: 28px;

}



/* Mobile: botones en columna */

@media (max-width: 767px) {

  .ps-whatsapp-panel {

    flex-direction: column;

    align-items: flex-end;

  }

}



/* Aumentar MUCHO el tamaño del icono interno */

.ps-wa-icon {

  width: 48px !important;

  height: 48px !important;

}



@media (max-width: 767px) {

  .ps-wa-icon {

    width: 54px !important;

    height: 54px !important;

  }

}



/* Botón principal (mantén los valores que ya te gusten) */

.ps-wa-main {

  width: 72px;   /* o 78px si lo querés más grande */

  height: 72px;

  border-radius: 50%;

  border: none;

  background: #25D366; /* verde WhatsApp */

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: 0 10px 25px rgba(0,0,0,.25);

  transition: transform .15s ease, background .15s ease;

}



.ps-wa-main:hover,

.ps-wa-main:focus-visible {

  background: #1ebe57; /* mismo tono más oscuro */

  transform: translateY(-2px);

}



/* Icono interno: solo el logo, en blanco puro */

.ps-wa-icon {

  width: 40px;   /* probá 44 o 48 si lo querés aún más grande */

  height: 40px;

  display: block;

  color: #ffffff; /* para usar currentColor si lo quisieras */

}



.ps-wa-icon path {

  fill: #ffffff; /* blanco sólido, sin verdes raros */

}



/* Opcional: ajustar en mobile */

@media (max-width: 767px) {

  .ps-wa-main {

    width: 66px;

    height: 66px;

  }



  .ps-wa-icon {

    width: 44px;

    height: 44px;

  }

}



.ps-wa-main {

  width: 60px;

  height: 60px;

  border-radius: 50%;

  background: #25D366;

  border: none;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  box-shadow: 0 10px 25px rgba(0,0,0,.25);

  transition: transform .15s ease, background .15s ease;

}



.ps-wa-main:hover {

  background: #1ebe57;

  transform: translateY(-2px);

}



.ps-wa-icon {

  width: 38px;

  height: 38px;

  display: block;

}