@charset "utf-8";

.container-lee {
  margin: 0 auto;
  text-align: center; /* Centra la imagen adentro si es inline */
}

.container-lee img {
  display: block;
  margin: 0 auto; /* Asegura el centrado del elemento img */
  max-width: 100%; /* Hace la imagen responsiva */
}


.texto-lee {
      text-align: center;
      font-weight: bold;
      color: #01446f;
      font-size: 16px; /* Cambia este valor al tamaño que desees */
    }


/* CSS Document */
.whatsapp-btn-container {
      position: fixed;
      bottom: 80px;
      right: 30px;
      z-index: 9999;
      display: flex;
      align-items: center;
    }

    /* Tooltip / Mensaje flotante */
    .whatsapp-tooltip {
      position: absolute;
      right: 75px;
      background-color: #ffffff;
      color: #333333;
      padding: 8px 16px;
      border-radius: 20px;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      font-size: 14px;
      font-weight: 600;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
      white-space: nowrap;
      opacity: 0;
      visibility: hidden;
      transform: translateX(10px);
      transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
      pointer-events: none;
    }

    /* Flecha del Tooltip */
    .whatsapp-tooltip::after {
      content: '';
      position: absolute;
      top: 50%;
      right: -6px;
      transform: translateY(-50%);
      border-width: 6px 0 6px 6px;
      border-style: solid;
      border-color: transparent transparent transparent #ffffff;
    }

    /* Botón principal */
    .whatsapp-btn {
      width: 60px;
      height: 60px;
      background-color: #25d366;
      color: #ffffff;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      text-decoration: none;
      font-size: 32px;
      box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
      position: relative;
      transition: transform 0.3s ease, background-color 0.3s ease;
    }

    /* Efecto de onda (Pulse) */
    .whatsapp-btn::before,
    .whatsapp-btn::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #25d366;
      border-radius: 50%;
      opacity: 0.7;
      z-index: -1;
      animation: whatsapp-pulse 2s infinite ease-in-out;
    }

    .whatsapp-btn::after {
      animation-delay: 0.5s;
    }

    /* Animación del ícono */
    .whatsapp-btn i {
      transition: transform 0.3s ease;
    }

    /* --- Efectos HOVER (Dinámicos) --- */

    /* Muestra el tooltip al pasar el cursor */
    .whatsapp-btn-container:hover .whatsapp-tooltip {
      opacity: 1;
      visibility: visible;
      transform: translateX(0);
    }

    /* Aumenta el tamaño del botón */
    .whatsapp-btn:hover {
      background-color: #20ba5a;
      transform: scale(1.1);
    }

    /* Rotación sutil del icono al pasar el cursor */
    .whatsapp-btn:hover i {
      transform: rotate(12deg) scale(1.1);
    }

    /* Keyframes para el efecto de pulsación continua */
    @keyframes whatsapp-pulse {
      0% {
        transform: scale(1);
        opacity: 0.75;
      }
      100% {
        transform: scale(1.6);
        opacity: 0;
      }