.connect-social .share{

      display: flex;
      flex-direction: row;
      gap: 4.8rem;
      margin-top: 100px; 
    }
.connect-social .social-item{

      position: relative;
      text-decoration: none;
      display: block;
      color: inherit;
    }
.connect-social .btn{

      position: relative;
      width: 3.6rem;
      height: 3.6rem;
      border-radius: 50%;
      background-color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07),
                  0 1px 3px rgba(0, 0, 0, 0.04);
      transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), 
                  background 0.3s ease, 
                  box-shadow 0.3s ease;
      cursor: pointer;
    }
.connect-social .social-item:hover .btn{

      transform: scale(1.12);
    }
.connect-social .tooltip-wrapper{

      position: absolute;
      left: 50%;
      top: -6.2rem;
      transform: translateX(-50%);
      z-index: 10;
      pointer-events: none;

      
      opacity: 0;
      visibility: hidden;
      animation: none;
    }
.connect-social .tooltip{

      position: relative;
      min-width: 7.8rem;
      padding: 0.55rem 0.85rem;
      border-radius: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.35rem;
      pointer-events: auto;
      box-shadow: 0 10px 25px -4px rgba(0, 0, 0, 0.15),
                  inset 0 1px 1px rgba(255, 255, 255, 0.35);
      backdrop-filter: blur(8px);

      
      animation: socialGentleFloat 3.2s ease-in-out infinite;
    }
.connect-social .tooltip::after{

      content: "";
      position: absolute;
      bottom: -6px;
      left: 50%;
      transform: translateX(-50%);
      border-width: 6px 6px 0 6px;
      border-style: solid;
      border-color: transparent;
    }
.connect-social .tooltip .avatar-capsule{

      width: 2.1rem;
      height: 2.1rem;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.95);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
      transition: transform 0.25s ease;
    }
.connect-social .social-item:hover .avatar-capsule{

      transform: scale(1.08);
    }
.connect-social .tooltip .username{

      font-size: 0.68rem;
      font-weight: 600;
      color: #ffffff;
      letter-spacing: 0.2px;
      white-space: nowrap;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
    }
.connect-social .social-item.instagram .btn svg{

      fill: #e1306c;
    }
.connect-social .social-item.instagram:hover .btn{

      background: linear-gradient(135deg, #f09433, #e1306c, #bc1888);
      box-shadow: 0 8px 24px rgba(225, 48, 108, 0.45);
    }
.connect-social .social-item.instagram:hover .btn svg{

      fill: #ffffff;
    }
.connect-social .social-item.instagram .tooltip-wrapper{

      animation-delay: 0.5s;
    }
.connect-social .social-item.instagram .tooltip{

      background: linear-gradient(145deg, #f77737 0%, #e1306c 52%, #bc1888 100%);
      box-shadow: 0 10px 24px -3px rgba(225, 48, 108, 0.38),
                  inset 0 1px 1px rgba(255, 255, 255, 0.4);
      animation-delay: 0.5s; 
    }
.connect-social .social-item.instagram .tooltip::after{

      border-top-color: #bc1888;
    }
.connect-social .social-item.instagram .avatar-capsule svg{

      fill: #e1306c;
    }
.connect-social .social-item.facebook .btn svg{

      fill: #1877f2;
    }
.connect-social .social-item.facebook:hover .btn{

      background-color: #1877f2;
      box-shadow: 0 8px 24px rgba(24, 119, 242, 0.45);
    }
.connect-social .social-item.facebook:hover .btn svg{

      fill: #ffffff;
    }
.connect-social .social-item.facebook .tooltip-wrapper{

      animation-delay: 2.0s;
    }
.connect-social .social-item.facebook .tooltip{

      background: linear-gradient(145deg, #3a8fff 0%, #1877f2 70%, #0c61d4 100%);
      box-shadow: 0 10px 24px -3px rgba(24, 119, 242, 0.38),
                  inset 0 1px 1px rgba(255, 255, 255, 0.4);
      animation-delay: 0.9s; 
      animation-duration: 3.5s;
    }
.connect-social .social-item.facebook .tooltip::after{

      border-top-color: #0c61d4;
    }
.connect-social .social-item.facebook .avatar-capsule svg{

      fill: #1877f2;
    }
.connect-social .social-item.whatsapp .btn svg{

      fill: #25d366;
    }
.connect-social .social-item.whatsapp:hover .btn{

      background-color: #25d366;
      box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45);
    }
.connect-social .social-item.whatsapp:hover .btn svg{

      fill: #ffffff;
    }
.connect-social .social-item.whatsapp .tooltip-wrapper{

      animation-delay: 3.5s;
    }
.connect-social .social-item.whatsapp .tooltip{

      background: linear-gradient(145deg, #2fe671 0%, #25d366 65%, #0f9b58 100%);
      box-shadow: 0 10px 24px -3px rgba(37, 211, 102, 0.38),
                  inset 0 1px 1px rgba(255, 255, 255, 0.4);
      animation-delay: 1.4s; 
      animation-duration: 3.4s;
    }
.connect-social .social-item.whatsapp .tooltip::after{

      border-top-color: #0f9b58;
    }
.connect-social .social-item.whatsapp .avatar-capsule svg{

      fill: #25d366;
    }
@keyframes socialPopUpEntrance{

      0% {
        opacity: 0;
        visibility: hidden;
        transform: translate(-50%, 20px) scale(0.8);
      }
      70% {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, -6px) scale(1.05);
      }
      100% {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0) scale(1);
      }
    }
@keyframes socialGentleFloat{

      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-7px);
      }
    }
/* Keep the uploaded widget responsive within the existing footer. */
.connect-social{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;padding:0 4px;margin:0 auto;max-width:460px}
.connect-social .share{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:125px auto 12px;width:100%}
.connect-social .social-item{justify-self:center}
.connect-social .btn{width:3.6rem;height:3.6rem}
.connect-social .btn svg{stroke:none}
.connect-social .tooltip svg{stroke:none}
.connect-social .tooltip-wrapper{top:-6.2rem}
.connect-social.is-revealed .tooltip-wrapper{animation:socialPopUpEntrance .75s cubic-bezier(.34,1.56,.64,1) both}
.connect-social:not(.is-in-view) .social-item .tooltip{animation-play-state:paused}
.connect-social.is-in-view .social-item .tooltip{animation-play-state:running}
.connect-social .social-item:focus-visible{outline:2px solid var(--wine);outline-offset:8px;border-radius:50%}
.connect-social .social-item:focus-visible .btn{transform:scale(1.12)}
.connect-social .social-item:focus-visible .tooltip-wrapper{opacity:1;visibility:visible;animation:none}
@media(max-width:420px){.connect-social{padding:0;max-width:340px}.connect-social .share{gap:4px}.connect-social .tooltip{min-width:0;width:max-content;padding:.55rem .65rem;border-radius:18px}.connect-social .tooltip .username{font-size:.62rem;letter-spacing:0}.connect-social .btn{width:3.1rem;height:3.1rem}}
@media(prefers-reduced-motion:reduce){.connect-social .social-item .tooltip-wrapper,.connect-social.is-revealed .tooltip-wrapper{animation:none;opacity:1;visibility:visible;transform:translateX(-50%)}.connect-social .social-item .tooltip{animation:none;transform:none}.connect-social .social-item .btn,.connect-social .social-item .avatar-capsule{transition:none}.connect-social .social-item:hover .btn,.connect-social .social-item:focus-visible .btn{transform:none}}