/* assets/rrss.css
   Burbujas flotantes RRSS (WhatsApp + Instagram)
   No altera estructura: usa position: fixed
*/

:root{
  --rrss-right: 16px;
  --rrss-bottom: 16px;
  --rrss-size: 54px;
  --rrss-gap: 12px;
  --rrss-z: 60;
  --rrss-shadow: 0 12px 26px rgba(0,0,0,.22);
  --rrss-focus: 0 0 0 3px rgba(59,130,246,.25);
}

.float-social{
  position: fixed;
  right: var(--rrss-right);
  bottom: var(--rrss-bottom);
  display: flex;
  flex-direction: column;
  gap: var(--rrss-gap);
  z-index: var(--rrss-z);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.float-social a{
  width: var(--rrss-size);
  height: var(--rrss-size);
  border-radius: 999px;
  display: grid;
  place-items: center;
  text-decoration: none;
  box-shadow: var(--rrss-shadow);
  transform: translateZ(0);
  transition: transform .15s ease, filter .15s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.float-social a:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
}

.float-social a:active{
  transform: translateY(0px) scale(.98);
}

.float-social a:focus-visible{
  outline: none;
  box-shadow: var(--rrss-shadow), var(--rrss-focus);
}

.float-social .fab-wa{
  background: #25D366;
  color: #fff;
}

.float-social .fab-ig{
  color: #fff;
  background: radial-gradient(circle at 30% 110%,
    #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

.float-social svg{
  width: 26px;
  height: 26px;
  display: block;
}

.float-social .fab-ig svg{
  width: 24px;
  height: 24px;
}

@media (max-width: 420px){
  :root{ --rrss-size: 50px; }
}

@media (prefers-reduced-motion: reduce){
  .float-social a{ transition: none; }
}