#whatsapp a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #25D366; /* Color de WhatsApp */
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
  transition: transform 0.3s ease;
  animation: pulse-whatsapp 2.3s infinite;
  }

  #whatsapp a:hover {
  transform: scale(1.1);
  }

    #whatsapp i {
    padding-right: 0!important;
    }

  #whatsapp i , .portal-float i{ 
  font-size: 2rem!important;
  padding-right: 15px!important;;  
  color: white;
  }

    .portal-float i {
   
    text-align: center;
    }

  /* Animación de aparición */
  @keyframes fadeIn {
  from {
  opacity: 0;
  transform: translateY(20px);
  }
  to {
  opacity: 1;
  transform: translateY(0);
  }
  }

    .show12 {
  animation: fadeIn 0.5s ease forwards;
  margin-bottom: 2rem;
  position: fixed;
  bottom: 3rem;
right: .5rem;
width: 60px;
height: 60px;
z-index: 2525;
cursor: pointer;

  }
 
.show12 .portal-tooltip {
        position: absolute;
        top: calc(100% + 5px);
    left: 50%;
    right: auto;
    width: 140px;
    max-width: calc(100vw - 1rem);
    background-color: #FFF;
    color: #1a7e65;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: bold;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    opacity: 1;
    transform: translateX(-50%);
    pointer-events: none;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}
 /*div.whatsapp a i{

color:#ffffff;
border-radius: 100%;
font-size: 3rem;
padding:.5rem;
margin-bottom: 2rem;
background: #25D366;
position: fixed;
bottom: 3rem;
right: .5rem;
z-index: 2525;
cursor: pointer;
transition: 0.9s all;
text-align: center;
}


div.whatsapp > a i:hover{

background: #1eaf54;
transition: 0.9s all;

}*/

/*boton de portal clientes
---------------------*/
.portal-float {
    position: fixed;
    bottom: 10rem; /* Ajusta la altura */
    right: .5rem;  /* Ajusta la distancia derecha */
    width: 65px;
    height: 65px;
    /* Gradiente corporativo AltaNet (Morado a Azul) */
    background: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%);
    color: #FFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
    z-index: 2000;
    transition: all 0.3s ease;
    border: 2px solid #FFF; /* Borde blanco para resaltar */
    text-decoration: none; /* Quitar subrayado */
}

.portal-float:hover {
    transform: scale(1.1)!important;
    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.6)!important;
    color: #FFF!important;
}

/* Animación de pulso suave para llamar la atención */
.portal-float {
    animation: pulse-glow 2.3s infinite;
}

#linkClientePago {
    bottom: 12rem;
    right: 2rem;
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
    box-shadow: 0 4px 15px rgba(234, 88, 12, 0.45);
    animation: pulse-payment .8s ease-in-out infinite;
}

#linkCliente {
    bottom: 18rem;
    right: 2rem;
}

#whatsapp {
   
    right: 2rem;
}

@keyframes pulse-glow {
    0% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(124, 58, 237, 0); }
    100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0); }
}

@keyframes pulse-payment {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(234, 88, 12, 0.45);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 0 12px rgba(234, 88, 12, 0);
    }
}

@keyframes pulse-whatsapp {
    0% { box-shadow: 0 0 0 0 rgba(58, 237, 162, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(52, 218, 135, 0); }
    100% { box-shadow: 0 0 0 0 rgba(58, 237, 112, 0); }
}

/* Estilo de la etiqueta (Tooltip) */
.portal-tooltip {
    position: absolute;
    right: 75px; /* A la izquierda del botón */
    width: 140px;
    max-width: calc(100vw - 1rem);
    background-color: #FFF;
    color: #1a237e;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: bold;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    opacity: 0;
    transition: opacity 0.3s;
    transition: color 1s;
    pointer-events: none;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.portal-float .portal-tooltip {
    top: calc(100% + 5px);
    left: 50%;
    right: auto;
    width: 140px;
    max-width: calc(100vw - 1rem);
    opacity: 1;
    transform: translateX(-50%);
}

.portal-float:hover .portal-tooltip {
    opacity: 1;
}