/* =========================================================
   ARBORTIC
   COMPONENTE SOCIAL FLOAT

   Archivo:
   components/social-float/social-float.css

   RESPONSABILIDAD:
   - posición flotante fija;
   - botón principal;
   - menú desplegable;
   - Instagram;
   - WhatsApp;
   - LinkedIn bloqueado;
   - tooltip;
   - hover;
   - dark mode;
   - responsive;
   - reduced motion.

   NOTA:
   Este componente está diseñado para trabajar con:
   components/social-float/social-float.html
========================================================= */


/* =========================================================
   01. ROOT COMPONENT
========================================================= */

.social-float {
  position: fixed;

  right:
    clamp(
      18px,
      2.25vw,
      34px
    );

  bottom:
    calc(
      clamp(
        18px,
        2.25vw,
        34px
      )
      +
      env(
        safe-area-inset-bottom,
        0px
      )
    );

  z-index: 950;

  width: 54px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: flex-end;

  gap: 10px;

  pointer-events: none;

  isolation: isolate;
}


/* =========================================================
   02. SOCIAL MENU
========================================================= */

.social-float-menu {
  position: relative;

  width: 54px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: flex-end;

  gap: 10px;

  pointer-events: none;
}


/* =========================================================
   03. SOCIAL ITEM
========================================================= */

.social-float-item {
  position: relative;

  width: 46px;
  height: 46px;

  display: grid;

  place-items: center;

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transform:
    translateY(14px)
    scale(0.86);

  transform-origin:
    center bottom;

  transition:
    opacity
    0.24s ease,
    visibility
    0.24s ease,
    transform
    0.34s
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    );
}


/* =========================================================
   04. OPEN STATE
========================================================= */

.social-float[data-social-state="open"]
.social-float-menu {
  pointer-events: auto;
}


.social-float[data-social-state="open"]
.social-float-item {
  opacity: 1;

  visibility: visible;

  pointer-events: auto;

  transform:
    translateY(0)
    scale(1);
}


/* =========================================================
   05. STAGGER ANIMATION
========================================================= */

.social-float[data-social-state="open"]
.social-float-item--instagram {
  transition-delay:
    0.02s;
}


.social-float[data-social-state="open"]
.social-float-item--whatsapp {
  transition-delay:
    0.07s;
}


.social-float[data-social-state="open"]
.social-float-item--linkedin {
  transition-delay:
    0.12s;
}


.social-float[data-social-state="closed"]
.social-float-item--linkedin {
  transition-delay:
    0s;
}


.social-float[data-social-state="closed"]
.social-float-item--whatsapp {
  transition-delay:
    0.035s;
}


.social-float[data-social-state="closed"]
.social-float-item--instagram {
  transition-delay:
    0.07s;
}


/* =========================================================
   06. SOCIAL LINK
========================================================= */

.social-float-link {
  position: relative;

  width: 46px;
  height: 46px;

  display: grid;

  place-items: center;

  padding: 0;

  overflow: hidden;

  border:
    1px solid
    rgba(99, 14, 212, 0.13);

  border-radius: 15px;

  background:
    rgba(255, 255, 255, 0.96);

  color:
    var(
      --primary,
      #630ed4
    );

  box-shadow:
    0 8px 18px
    rgba(33, 20, 58, 0.10),
    inset 0 1px 0
    rgba(255, 255, 255, 0.72),
    inset 0 -1px 0
    rgba(55, 35, 80, 0.06);

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);

  outline: none;

  cursor: pointer;

  text-decoration: none;

  transform:
    translateZ(0);

  transition:
    transform
    0.30s
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    ),
    border-color
    0.26s ease,
    background
    0.28s ease,
    color
    0.28s ease,
    box-shadow
    0.30s ease,
    filter
    0.28s ease;
}


/* =========================================================
   07. SOCIAL LINK INNER DEPTH
========================================================= */

.social-float-link::before {
  content: "";

  position: absolute;

  inset: 0;

  border-radius: inherit;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.20) 0%,
      rgba(255, 255, 255, 0.05) 36%,
      rgba(32, 20, 56, 0.035) 100%
    );

  opacity: 0.72;

  pointer-events: none;

  transition:
    opacity
    0.28s ease;
}


/* =========================================================
   08. SOCIAL ICON
========================================================= */

.social-float-icon {
  position: relative;

  z-index: 2;

  display: grid;

  place-items: center;

  width: 100%;
  height: 100%;

  pointer-events: none;
}


.social-float-icon i {
  font-size: 19px;

  line-height: 1;

  transition:
    transform
    0.34s
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    ),
    color
    0.28s ease;
}


/* =========================================================
   09. KEYBOARD FOCUS
========================================================= */

.social-float-link:focus-visible,
.social-float-toggle:focus-visible {
  outline:
    3px solid
    rgba(124, 58, 237, 0.30);

  outline-offset:
    4px;
}


/* =========================================================
   10. INSTAGRAM
========================================================= */

.social-float-item--instagram
.social-float-link {
  color:
    var(
      --primary,
      #630ed4
    );
}


@media (hover: hover) {

  .social-float-item--instagram
  .social-float-link:hover {
    border-color:
      rgba(225, 48, 108, 0.28);

    background:
      linear-gradient(
        135deg,
        #833ab4 0%,
        #c13584 32%,
        #e1306c 58%,
        #f56040 78%,
        #fcaf45 100%
      );

    color:
      #ffffff;

    box-shadow:
      0 10px 18px
      rgba(193, 53, 132, 0.20),
      inset 0 1px 0
      rgba(255, 255, 255, 0.18),
      inset 0 -2px 3px
      rgba(84, 16, 57, 0.12);

    transform:
      translateY(-3px)
      rotate(-2deg);
  }


  .social-float-item--instagram
  .social-float-link:hover
  .social-float-icon i {
    transform:
      scale(1.08);
  }


  .social-float-item--instagram
  .social-float-link:hover::before {
    opacity:
      0.24;
  }

}


/* =========================================================
   11. WHATSAPP
========================================================= */

.social-float-item--whatsapp
.social-float-link {
  color:
    var(
      --primary,
      #630ed4
    );
}


@media (hover: hover) {

  .social-float-item--whatsapp
  .social-float-link:hover {
    border-color:
      rgba(37, 211, 102, 0.32);

    background:
      #25d366;

    color:
      #ffffff;

    box-shadow:
      0 10px 18px
      rgba(37, 211, 102, 0.20),
      inset 0 1px 0
      rgba(255, 255, 255, 0.18),
      inset 0 -2px 3px
      rgba(4, 104, 41, 0.12);

    transform:
      translateY(-3px)
      rotate(2deg);
  }


  .social-float-item--whatsapp
  .social-float-link:hover
  .social-float-icon i {
    transform:
      scale(1.08);
  }


  .social-float-item--whatsapp
  .social-float-link:hover::before {
    opacity:
      0.20;
  }

}


/* =========================================================
   12. LINKEDIN DISABLED
========================================================= */

.social-float-item--disabled
.social-float-link {
  border-color:
    rgba(95, 90, 106, 0.12);

  background:
    rgba(248, 246, 251, 0.95);

  color:
    rgba(99, 91, 114, 0.58);

  box-shadow:
    0 7px 15px
    rgba(31, 24, 44, 0.07),
    inset 0 1px 0
    rgba(255, 255, 255, 0.65),
    inset 0 -1px 0
    rgba(31, 24, 44, 0.04);

  cursor:
    not-allowed;

  filter:
    saturate(0.56);
}


.social-float-item--disabled
.social-float-link::after {
  content: "";

  position: absolute;

  right: 8px;
  bottom: 8px;

  width: 5px;
  height: 5px;

  border:
    1px solid
    rgba(99, 14, 212, 0.26);

  border-radius: 50%;

  background:
    rgba(99, 14, 212, 0.15);

  pointer-events: none;
}


@media (hover: hover) {

  .social-float-item--disabled
  .social-float-link:hover {
    border-color:
      rgba(95, 90, 106, 0.16);

    background:
      rgba(245, 242, 249, 0.98);

    color:
      rgba(99, 91, 114, 0.68);

    box-shadow:
      0 8px 16px
      rgba(31, 24, 44, 0.08),
      inset 0 1px 0
      rgba(255, 255, 255, 0.72);

    transform:
      translateY(-1px);
  }


  .social-float-item--disabled
  .social-float-link:hover
  .social-float-icon i {
    transform:
      scale(1.03);
  }

}


/* =========================================================
   13. TOOLTIP
========================================================= */

.social-float-tooltip {
  position: absolute;

  top: 50%;
  right:
    calc(
      100% +
      11px
    );

  z-index: 10;

  min-width:
    max-content;

  padding:
    7px 10px;

  border:
    1px solid
    rgba(99, 14, 212, 0.10);

  border-radius: 9px;

  background:
    rgba(12, 16, 34, 0.96);

  color:
    #ffffff;

  font-family:
    var(
      --font-body,
      "Roboto",
      sans-serif
    );

  font-size: 10px;

  font-weight: 700;

  line-height: 1;

  letter-spacing:
    0.025em;

  white-space: nowrap;

  box-shadow:
    0 9px 20px
    rgba(8, 13, 36, 0.16);

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transform:
    translate(
      6px,
      -50%
    )
    scale(0.96);

  transform-origin:
    right center;

  transition:
    opacity
    0.20s ease,
    visibility
    0.20s ease,
    transform
    0.26s
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    );
}


/* =========================================================
   14. TOOLTIP POINTER
========================================================= */

.social-float-tooltip::after {
  content: "";

  position: absolute;

  top: 50%;
  right: -5px;

  width: 9px;
  height: 9px;

  background:
    rgba(12, 16, 34, 0.96);

  transform:
    translateY(-50%)
    rotate(45deg);

  border-top:
    1px solid
    rgba(255, 255, 255, 0.02);

  border-right:
    1px solid
    rgba(255, 255, 255, 0.02);
}


/* =========================================================
   15. TOOLTIP HOVER / FOCUS
========================================================= */

@media (hover: hover) {

  .social-float-item--linkedin:hover
  .social-float-tooltip,
  .social-float-item--linkedin:focus-within
  .social-float-tooltip {
    opacity: 1;

    visibility: visible;

    transform:
      translate(
        0,
        -50%
      )
      scale(1);
  }

}


/* =========================================================
   16. TOOLTIP JS ACTIVE STATE
========================================================= */

.social-float-tooltip.is-visible {
  opacity: 1;

  visibility: visible;

  transform:
    translate(
      0,
      -50%
    )
    scale(1);
}


/* =========================================================
   17. MAIN TOGGLE BUTTON
   3D MATE · SIN EFECTO NEÓN
========================================================= */

.social-float-toggle {
  position: relative;

  width: 54px;
  height: 54px;

  display: grid;

  place-items: center;

  flex: 0 0 auto;

  padding: 0;

  overflow: visible;

  border:
    1px solid
    rgba(255, 255, 255, 0.10);

  border-radius: 18px;

  background:
    linear-gradient(
      145deg,
      #151a3a 0%,
      #0d112b 48%,
      #090d23 100%
    );

  color:
    #ffffff;

  box-shadow:
    0 5px 0
    rgba(4, 7, 21, 0.16),
    0 12px 22px
    rgba(8, 13, 36, 0.19),
    inset 0 1px 0
    rgba(255, 255, 255, 0.08),
    inset 0 -3px 5px
    rgba(0, 0, 0, 0.18);

  cursor: pointer;

  pointer-events: auto;

  transform:
    translateZ(0);

  transition:
    transform
    0.34s
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    ),
    border-color
    0.28s ease,
    background
    0.28s ease,
    box-shadow
    0.30s ease;
}


/* =========================================================
   18. TOGGLE INNER DEPTH
========================================================= */

.social-float-toggle::before {
  content: "";

  position: absolute;

  inset: 1px;

  border-radius:
    16px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.055) 0%,
      rgba(255, 255, 255, 0.015) 40%,
      rgba(0, 0, 0, 0.05) 100%
    );

  pointer-events: none;
}


/* =========================================================
   19. TOGGLE DEPTH LAYER
   Se conserva el elemento del HTML pero SIN brillo.
========================================================= */

.social-float-toggle-glow {
  position: absolute;

  inset:
    3px -3px -7px 3px;

  z-index: -1;

  border-radius:
    18px;

  background:
    rgba(5, 8, 24, 0.20);

  opacity:
    0.55;

  filter:
    blur(4px);

  pointer-events: none;

  transform:
    translateY(2px);

  transition:
    opacity
    0.30s ease,
    transform
    0.34s
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    );
}


/* =========================================================
   20. TOGGLE ICON
========================================================= */

.social-float-toggle-icon {
  position: relative;

  z-index: 2;

  display: grid;

  place-items: center;
}


.social-float-toggle-icon i {
  font-size: 18px;

  line-height: 1;

  color:
    #ffffff;

  text-shadow:
    0 1px 1px
    rgba(0, 0, 0, 0.16);

  transition:
    transform
    0.42s
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    ),
    color
    0.28s ease;
}


/* =========================================================
   21. TOGGLE DOT
   Sin halo luminoso.
========================================================= */

.social-float-toggle-dot {
  position: absolute;

  top: 9px;
  right: 9px;

  z-index: 3;

  width: 6px;
  height: 6px;

  border:
    1px solid
    rgba(255, 255, 255, 0.55);

  border-radius: 50%;

  background:
    var(
      --primary-fixed,
      #bda2ec
    );

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.26),
    0 1px 2px
    rgba(0, 0, 0, 0.22);

  transition:
    transform
    0.30s
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    ),
    background
    0.28s ease,
    box-shadow
    0.28s ease;
}


/* =========================================================
   22. TOGGLE HOVER
   Elevación física, no iluminación.
========================================================= */

@media (hover: hover) {

  .social-float-toggle:hover {
    border-color:
      rgba(255, 255, 255, 0.13);

    background:
      linear-gradient(
        145deg,
        #1b2145 0%,
        #111631 48%,
        #0b1028 100%
      );

    box-shadow:
      0 7px 0
      rgba(4, 7, 21, 0.15),
      0 15px 24px
      rgba(8, 13, 36, 0.20),
      inset 0 1px 0
      rgba(255, 255, 255, 0.09),
      inset 0 -3px 5px
      rgba(0, 0, 0, 0.18);

    transform:
      translateY(-2px)
      rotate(1deg);
  }


  .social-float-toggle:hover
  .social-float-toggle-icon i {
    transform:
      rotate(-7deg)
      scale(1.05);
  }


  .social-float-toggle:hover
  .social-float-toggle-glow {
    opacity:
      0.66;

    transform:
      translateY(4px)
      scale(0.98);
  }

}


/* =========================================================
   23. TOGGLE OPEN STATE
   Violeta institucional mate.
========================================================= */

.social-float[data-social-state="open"]
.social-float-toggle {
  border-color:
    rgba(255, 255, 255, 0.12);

  background:
    linear-gradient(
      145deg,
      #7242c6 0%,
      #5f27b8 52%,
      #4e189e 100%
    );

  box-shadow:
    0 5px 0
    rgba(55, 18, 99, 0.22),
    0 13px 22px
    rgba(46, 18, 87, 0.20),
    inset 0 1px 0
    rgba(255, 255, 255, 0.10),
    inset 0 -3px 5px
    rgba(41, 10, 77, 0.18);

  transform:
    translateY(-1px);
}


.social-float[data-social-state="open"]
.social-float-toggle-icon i {
  transform:
    rotate(90deg)
    scale(0.96);
}


.social-float[data-social-state="open"]
.social-float-toggle-dot {
  background:
    #ffffff;

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.40),
    0 1px 2px
    rgba(0, 0, 0, 0.18);

  transform:
    scale(0.90);
}


.social-float[data-social-state="open"]
.social-float-toggle-glow {
  opacity:
    0.60;

  transform:
    translateY(3px)
    scale(0.98);
}


/* =========================================================
   24. ACTIVE PRESS
========================================================= */

.social-float-link:active {
  transform:
    translateY(1px)
    scale(0.96);
}


.social-float-toggle:active {
  transform:
    translateY(2px)
    scale(0.97);

  box-shadow:
    0 2px 0
    rgba(4, 7, 21, 0.15),
    0 7px 14px
    rgba(8, 13, 36, 0.16),
    inset 0 2px 4px
    rgba(0, 0, 0, 0.17);
}


/* =========================================================
   25. DARK MODE
========================================================= */

html[data-page-theme="dark"]
.social-float-link {
  border-color:
    rgba(210, 187, 255, 0.11);

  background:
    rgba(17, 20, 39, 0.95);

  color:
    #c9adff;

  box-shadow:
    0 8px 18px
    rgba(0, 0, 0, 0.20),
    inset 0 1px 0
    rgba(255, 255, 255, 0.035),
    inset 0 -1px 0
    rgba(0, 0, 0, 0.10);
}


html[data-page-theme="dark"]
.social-float-link::before {
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.035),
      rgba(255, 255, 255, 0.008) 45%,
      rgba(0, 0, 0, 0.05)
    );
}


html[data-page-theme="dark"]
.social-float-item--disabled
.social-float-link {
  border-color:
    rgba(210, 187, 255, 0.07);

  background:
    rgba(24, 26, 45, 0.94);

  color:
    rgba(210, 203, 220, 0.45);

  box-shadow:
    0 7px 15px
    rgba(0, 0, 0, 0.18),
    inset 0 1px 0
    rgba(255, 255, 255, 0.025);
}


html[data-page-theme="dark"]
.social-float-tooltip {
  border-color:
    rgba(210, 187, 255, 0.10);

  background:
    rgba(247, 244, 255, 0.97);

  color:
    #171b2d;

  box-shadow:
    0 9px 20px
    rgba(0, 0, 0, 0.22);
}


html[data-page-theme="dark"]
.social-float-tooltip::after {
  background:
    rgba(247, 244, 255, 0.97);
}


html[data-page-theme="dark"]
.social-float-toggle {
  border-color:
    rgba(255, 255, 255, 0.08);

  background:
    linear-gradient(
      145deg,
      #242a4a 0%,
      #191e39 50%,
      #11162e 100%
    );

  box-shadow:
    0 5px 0
    rgba(0, 0, 0, 0.18),
    0 12px 22px
    rgba(0, 0, 0, 0.26),
    inset 0 1px 0
    rgba(255, 255, 255, 0.055),
    inset 0 -3px 5px
    rgba(0, 0, 0, 0.20);
}


html[data-page-theme="dark"]
.social-float-toggle::before {
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.035),
      rgba(255, 255, 255, 0.008) 40%,
      rgba(0, 0, 0, 0.05)
    );
}


html[data-page-theme="dark"]
.social-float-toggle-glow {
  background:
    rgba(0, 0, 0, 0.26);

  opacity:
    0.52;
}


/* =========================================================
   26. DARK MODE HOVER COLORS
========================================================= */

@media (hover: hover) {

  html[data-page-theme="dark"]
  .social-float-item--instagram
  .social-float-link:hover {
    background:
      linear-gradient(
        135deg,
        #833ab4 0%,
        #c13584 32%,
        #e1306c 58%,
        #f56040 78%,
        #fcaf45 100%
      );

    color:
      #ffffff;
  }


  html[data-page-theme="dark"]
  .social-float-item--whatsapp
  .social-float-link:hover {
    background:
      #25d366;

    color:
      #ffffff;
  }


  html[data-page-theme="dark"]
  .social-float-item--disabled
  .social-float-link:hover {
    border-color:
      rgba(210, 187, 255, 0.10);

    background:
      rgba(29, 32, 53, 0.98);

    color:
      rgba(210, 203, 220, 0.54);
  }


  html[data-page-theme="dark"]
  .social-float-toggle:hover {
    background:
      linear-gradient(
        145deg,
        #2b3154 0%,
        #1e2442 50%,
        #151a34 100%
      );

    box-shadow:
      0 7px 0
      rgba(0, 0, 0, 0.17),
      0 15px 24px
      rgba(0, 0, 0, 0.28),
      inset 0 1px 0
      rgba(255, 255, 255, 0.06),
      inset 0 -3px 5px
      rgba(0, 0, 0, 0.21);
  }

}


/* =========================================================
   27. TABLET
========================================================= */

@media
  (min-width: 768px)
  and
  (max-width: 1023px) {

  .social-float {
    right:
      22px;

    bottom:
      calc(
        24px +
        env(
          safe-area-inset-bottom,
          0px
        )
      );
  }


  .social-float,
  .social-float-menu {
    width:
      52px;
  }


  .social-float-toggle {
    width:
      52px;

    height:
      52px;

    border-radius:
      17px;
  }


  .social-float-toggle::before {
    border-radius:
      15px;
  }


  .social-float-item,
  .social-float-link {
    width:
      44px;

    height:
      44px;
  }


  .social-float-link {
    border-radius:
      14px;
  }

}


/* =========================================================
   28. MOBILE
========================================================= */

@media (max-width: 767px) {

  .social-float {
    right:
      16px;

    bottom:
      calc(
        18px +
        env(
          safe-area-inset-bottom,
          0px
        )
      );

    width:
      50px;

    gap:
      8px;
  }


  .social-float-menu {
    width:
      50px;

    gap:
      8px;
  }


  .social-float-toggle {
    width:
      50px;

    height:
      50px;

    border-radius:
      16px;

    box-shadow:
      0 4px 0
      rgba(4, 7, 21, 0.15),
      0 10px 18px
      rgba(8, 13, 36, 0.18),
      inset 0 1px 0
      rgba(255, 255, 255, 0.075),
      inset 0 -2px 4px
      rgba(0, 0, 0, 0.16);
  }


  .social-float-toggle::before {
    border-radius:
      14px;
  }


  .social-float-toggle-icon i {
    font-size:
      17px;
  }


  .social-float-toggle-dot {
    top:
      8px;

    right:
      8px;
  }


  .social-float-item,
  .social-float-link {
    width:
      42px;

    height:
      42px;
  }


  .social-float-link {
    border-radius:
      13px;
  }


  .social-float-icon i {
    font-size:
      18px;
  }


  .social-float-tooltip {
    right:
      calc(
        100% +
        10px
      );

    padding:
      7px 9px;

    font-size:
      9.5px;
  }

}


/* =========================================================
   29. SMALL MOBILE
========================================================= */

@media (max-width: 479px) {

  .social-float {
    right:
      13px;

    bottom:
      calc(
        15px +
        env(
          safe-area-inset-bottom,
          0px
        )
      );
  }


  .social-float-toggle {
    width:
      48px;

    height:
      48px;

    border-radius:
      15px;
  }


  .social-float-toggle::before {
    border-radius:
      13px;
  }


  .social-float-menu {
    width:
      48px;
  }


  .social-float-item,
  .social-float-link {
    width:
      40px;

    height:
      40px;
  }


  .social-float-link {
    border-radius:
      12px;
  }


  .social-float-icon i {
    font-size:
      17px;
  }

}


/* =========================================================
   30. TOUCH DEVICES
========================================================= */

@media
  (hover: none),
  (pointer: coarse) {

  .social-float-link,
  .social-float-toggle {
    -webkit-tap-highlight-color:
      transparent;
  }


  .social-float-item--instagram
  .social-float-link:active {
    border-color:
      rgba(225, 48, 108, 0.26);

    background:
      linear-gradient(
        135deg,
        #833ab4 0%,
        #c13584 32%,
        #e1306c 58%,
        #f56040 78%,
        #fcaf45 100%
      );

    color:
      #ffffff;
  }


  .social-float-item--whatsapp
  .social-float-link:active {
    border-color:
      rgba(37, 211, 102, 0.28);

    background:
      #25d366;

    color:
      #ffffff;
  }

}


/* =========================================================
   31. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .social-float-item,
  .social-float-link,
  .social-float-tooltip,
  .social-float-toggle,
  .social-float-toggle-glow,
  .social-float-toggle-icon i,
  .social-float-toggle-dot,
  .social-float-icon i {
    transition:
      none;
  }


  .social-float[data-social-state="open"]
  .social-float-item {
    transform:
      none;
  }


  .social-float[data-social-state="open"]
  .social-float-toggle-icon i {
    transform:
      none;
  }


  .social-float-link:hover,
  .social-float-toggle:hover {
    transform:
      none;
  }

}