/* GOCCE v1.12 — lightweight contact/social buttons. Scoped to avoid touching theme lists. */
.gocce-contact-socials{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:22px 16px 28px;
  margin:0;
  background:#fff;
  box-sizing:border-box;
  clear:both;
}
.gocce-contact-socials ul.example-2{
  list-style:none!important;
  display:flex!important;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:0;
  margin:0!important;
  padding:0!important;
}
.gocce-contact-socials .example-2 .icon-content{
  margin:0 10px;
  padding:0;
  position:relative;
  list-style:none!important;
}
.gocce-contact-socials .example-2 .icon-content .tooltip{
  position:absolute;
  z-index:20;
  top:-30px;
  left:50%;
  transform:translateX(-50%);
  color:#fff;
  background:#111;
  padding:6px 10px;
  border-radius:5px;
  opacity:0;
  visibility:hidden;
  white-space:nowrap;
  font:500 13px/1.2 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  transition:opacity .25s ease,top .25s ease,visibility .25s ease;
  pointer-events:none;
}
.gocce-contact-socials .example-2 .icon-content:hover .tooltip,
.gocce-contact-socials .example-2 .icon-content:focus-within .tooltip{
  opacity:1;
  visibility:visible;
  top:-42px;
}
.gocce-contact-socials .example-2 .icon-content a{
  position:relative;
  overflow:hidden;
  display:flex!important;
  justify-content:center;
  align-items:center;
  width:50px!important;
  height:50px!important;
  min-width:50px!important;
  min-height:50px!important;
  max-width:50px!important;
  max-height:50px!important;
  padding:0!important;
  margin:0!important;
  border-radius:50%!important;
  color:#4d4d4d!important;
  background:#fff!important;
  border:1px solid rgba(0,0,0,.10)!important;
  box-shadow:none!important;
  text-decoration:none!important;
  box-sizing:border-box!important;
  transition:color .3s ease,box-shadow .3s ease,transform .3s ease;
}
.gocce-contact-socials .example-2 .icon-content a:hover,
.gocce-contact-socials .example-2 .icon-content a:focus-visible{
  color:#fff!important;
  box-shadow:3px 2px 45px 0 rgb(0 0 0 / 12%)!important;
  transform:translateY(-2px);
  outline:none;
}
.gocce-contact-socials .example-2 .icon-content a svg{
  position:relative!important;
  z-index:2!important;
  display:block!important;
  width:27px!important;
  height:27px!important;
  min-width:0!important;
  min-height:0!important;
  max-width:27px!important;
  max-height:27px!important;
  margin:0!important;
  padding:0!important;
  color:currentColor!important;
}
.gocce-contact-socials .example-2 .icon-content a .filled{
  position:absolute;
  z-index:1;
  top:auto;
  bottom:0;
  left:0;
  width:100%;
  height:0;
  background:#000;
  transition:height .3s ease-in-out;
}
.gocce-contact-socials .example-2 .icon-content a:hover .filled,
.gocce-contact-socials .example-2 .icon-content a:focus-visible .filled{
  height:100%;
}
.gocce-contact-socials .example-2 .icon-content a[data-social="instagram"] .filled,
.gocce-contact-socials .example-2 .icon-content a[data-social="instagram"] ~ .tooltip{
  background:linear-gradient(45deg,#405de6,#5b51db,#b33ab4,#c135b4,#e1306c,#fd1f1f);
}
.gocce-contact-socials .example-2 .icon-content a[data-social="whatsapp"] .filled,
.gocce-contact-socials .example-2 .icon-content a[data-social="whatsapp"] ~ .tooltip{
  background:#25d366;
}
.gocce-contact-socials .example-2 .icon-content a[data-social="phone"] .filled,
.gocce-contact-socials .example-2 .icon-content a[data-social="phone"] ~ .tooltip{
  background:#111;
}
.gocce-contact-socials .example-2 .icon-content a[data-social="email"] .filled,
.gocce-contact-socials .example-2 .icon-content a[data-social="email"] ~ .tooltip{
  background:#444;
}
@media(max-width:600px){
  .gocce-contact-socials{padding:18px 10px 22px}
  .gocce-contact-socials .example-2 .icon-content{margin:0 7px}
  .gocce-contact-socials .example-2 .icon-content a{width:46px!important;height:46px!important;min-width:46px!important;min-height:46px!important;max-width:46px!important;max-height:46px!important}
  .gocce-contact-socials .example-2 .icon-content a svg{width:24px!important;height:24px!important;max-width:24px!important;max-height:24px!important}
}
@media(prefers-reduced-motion:reduce){
  .gocce-contact-socials *{transition:none!important}
}