/* =================================================
   OVERLAY – TELA ESCURECIDA
================================================= */
#sindi-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 9998;
    opacity: 1;
    transition: opacity 0.8s ease;
}

#sindi-overlay.hide {
    opacity: 0;
    pointer-events: none;
}

/* =================================================
   CONTAINER PRINCIPAL (POPUP CENTRAL)
================================================= */
#sindi-container {
    position: fixed;
    z-index: 9999;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.9s ease;
}

/* =================================================
   BOTÃO / IMAGEM
================================================= */
#sindi-btn {
    position: relative;
    display: inline-block;
    text-decoration: none;
}

#sindi-btn img {
    width: 300px;
    max-width: 85vw;
    display: block;
    transition: all 0.9s ease;
}

/* =================================================
   BALÕES – BASE
================================================= */
.sindi-balao {
    position: absolute;
    background: #ffffff;
    color: #333;
    padding: 18px 20px;
    border-radius: 30px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.25);
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    max-width: 340px;
    width: 340px;
    opacity: 0;
    transition: all 0.6s ease;
    box-sizing: border-box;
}

/* =================================================
   BALÃO GRANDE (POPUP)
   → SEMPRE AO LADO DA IMAGEM
================================================= */
.sindi-balao.grande {
    top: 50%;
    right: calc(100% + 20px);
    transform: translateY(-50%);
    opacity: 1;
}

/* Texto bem distribuído */
.sindi-balao.grande p {
    margin: 0;
}

/* =================================================
   BALÃO PEQUENO (REDUZIDO)
================================================= */
.sindi-balao.pequeno {
    bottom: 110%;
    right: 0;
    font-size: 13px;
    padding: 10px 14px;
    border-radius: 16px;

    width: auto;
    max-width: 200px;
    white-space: nowrap;
}


/* =================================================
   ESTADO REDUZIDO – CANTO INFERIOR DIREITO
================================================= */
#sindi-container.reduzido {
    top: auto;
    left: auto;
    right: 20px;
    bottom: 20px;
    transform: none;
}

/* Imagem menor */
#sindi-container.reduzido img {
    width: 90px;
}

/* Troca de balões */
#sindi-container.reduzido .grande {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-40%);
}

#sindi-container.reduzido .pequeno {
    opacity: 1;
    transform: translateY(0);
}

/* =================================================
   ANIMAÇÃO PULSANTE
================================================= */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

#sindi-container.reduzido img {
    animation: pulse 2s infinite;
}

/* =================================================
   RESPONSIVO (MOBILE)
================================================= */
@media (max-width: 600px) {

    #sindi-btn img {
        width: 240px;
    }

    .sindi-balao.grande {
        width: 240px;
        max-width: 240px;
        font-size: 12px;
        right: 50%;
        transform: translate(50%, -50%);
        top: -100px;
    }
}
/* ===============================
   AJUSTE DE ESPAÇO – MOBILE
================================ */
@media (max-width: 600px) {

    /* Desce levemente a Sindi */
    .sindi-float img {
        margin-top: 200px; /* ajuste fino aqui: 20 a 30px */
    }

    /* Sobe o balão */
    .sindi-balao-simples {
        bottom: 180%; /* aumenta a distância do balão */

    }
}