/* O container precisa ser relative para os absolutes não fugirem para o topo da página */
.container-celular {
    position: relative;
    display: inline-block; /* Garante que o container tenha o tamanho da imagem */
}

/* Base do celular */
.imgHeader {
    display: block;
    max-width: 100%;
    height: auto;
    z-index: 1;
}

/* Configuração geral para todos os balões de conversa */
.wpp-chat {
    position: absolute;
    z-index: 2;
    transition: all 0.3s ease; /* Suaviza se você for animar depois */
}

/* Posicionamento Individual (Ajuste os valores de top/left conforme o design) */
.wpp-01 {
    top: 24%;
  left: 330px;
}

.wpp-02 {
    top: 35%;
  right: 261px;
}

.wpp-03 {
    bottom: 25%;
  left: 80px;
}

.wpp-04 {
    bottom: -6%;
  left: 80px;
}

.wpp-05{
  bottom: -26%;
  left: 80px;
}

/* Estado inicial das mensagens */
.wpp-chat {
    position: absolute;
    z-index: 2;
    opacity: 0;
    transform: translateY(20px); /* Começa um pouco abaixo */
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); /* Transição suave */
}

/* Quando aparecem */
.wpp-chat.show {
    opacity: 1;
    transform: translateY(0);
}

/* Quando sobem para o lugar da primeira */
.wpp-chat.subir {
    transform: translateY(-150px); /* Ajuste esse valor (em px ou %) para elas subirem o quanto você desejar */
}

/* Classe para ocultar a 01 e 02 */
.wpp-chat.hide-me {
    opacity: 0;
    transform: translateY(-20px) scale(0.9);
    pointer-events: none;
}
/* Estilo extra: Efeito de "pop" estilo conversa */
@keyframes fadeInPop {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* 1. Esconde a div em telas grandes (Desktop/Notebook) */
.img-wpp-mobile-hide {
    display: none;
}

/* 2. Mostra a div apenas em telas menores (Mobile e Tablet) */
@media (max-width: 991px) {
    .img-wpp-mobile-hide {
        display: block; /* ou flex, dependendo do seu alinhamento */
        text-align: center; /* Centraliza a imagem se necessário */
    }
    
    .img-wpp-mobile-hide img {
        max-width: 100%;
        height: auto;
    }
    .container-celular{
        display: none;
    }
}