#floating-banner {
      position: fixed;
      bottom: 20px;
      left: -350px; /* Fuera de pantalla al inicio */
      z-index: 9999;
      width: 100%;
      max-width: 280px;
      /* No animamos desde el estado inicial estático */
      /* La animación controlará TODO el movimiento */
    }

    /* Animación completa: entra → espera → sale */
    @keyframes slideInOut {
      /* 0% – 33.33% → ENTRADA: desliza desde izquierda hasta posición */
      0% {
        left: -350px;
      }
      33.33% {
        left: 20px;
        animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Rebote al entrar */
      }

      /* 33.34% – 66.66% → VISIBLE: se mantiene en su lugar */
      33.34%, 66.66% {
        left: 20px;
      }

      /* 66.67% – 100% → SALIDA: desliza hacia la izquierda */
      66.67% {
        left: 20px;
        animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Rebote al salir */
      }
      100% {
        left: -350px;
      }
    }

    /* Aplicamos la animación al contenedor */
    #floating-banner {
      animation: slideInOut 10s infinite;
    }

    /* Imagen con transparencia inferior */
    #floating-banner img {
      width: 100%;
      height: auto;
      display: block;
      background: transparent;

      /* Transparencia gradual en la parte inferior */
      -webkit-mask-image: linear-gradient(to top, transparent 0%, black 40%);
      mask-image: linear-gradient(to top, transparent 0%, black 40%);
      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
    }

    /* 📱 Responsive: móviles más pequeños */
    @media (max-width: 768px) {
      #floating-banner {
        max-width: 200px;
        bottom: 15px;
        left: -250px;
      }
      @keyframes slideInOut {
        0% { left: -250px; }
        33.33% { left: 15px; }
        33.34%, 66.66% { left: 15px; }
        66.67% { left: 15px; }
        100% { left: -250px; }
      }
      #floating-banner img {
        -webkit-mask-image: linear-gradient(to top, transparent 0%, black 30%);
        mask-image: linear-gradient(to top, transparent 0%, black 30%);
      }
    }

    @media (max-width: 480px) {
      #floating-banner {
        max-width: 160px;
        bottom: 10px;
        left: -200px;
      }
      @keyframes slideInOut {
        0% { left: -200px; }
        33.33% { left: 10px; }
        33.34%, 66.66% { left: 10px; }
        66.67% { left: 10px; }
        100% { left: -200px; }
      }
      #floating-banner img {
        -webkit-mask-image: linear-gradient(to top, transparent 0%, black 25%);
        mask-image: linear-gradient(to top, transparent 0%, black 25%);
      }
    }


    /*====================================================================================================*/
#comunicado-overlay {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99998;
}

#comunicado-contenido {
  background: white;
  max-width: 560px;
  width: 90%;
  padding: 30px;
  border-radius: 10px;
  position: relative;
  text-align: center;
}

#comunicado-contenido h2 {
  margin: 0 0 15px;
  color: #1a5276;
}

#comunicado-contenido p {
  margin: 0;
  font-size: 16px;
  text-align: justify;
  line-height: 1.6;
}

.cerrar-btn {
  position: absolute;
  top: 10px; right: 10px;
  background: none; border: none;
  font-size: 24px; color: #888;
  cursor: pointer;
}

/* === Escritorio: texto un poco más grande === */
@media (min-width: 769px) {
  #comunicado-contenido h2 {
    font-size: 26px; /* +4px */
  }

  #comunicado-contenido p {
    font-size: 18px; /* +2px */
  }
}