/* Botones flotantes de redes sociales: columna vertical al lado derecho */
.social{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:60;display:flex;flex-direction:column;gap:8px;padding:8px 10px 8px 0}
.social__btn{--c:#1f7a34;position:relative;display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;
  background:linear-gradient(135deg,#1f7a34,#3ea33a);color:#fff;font-size:1.15rem;
  box-shadow:0 6px 16px rgba(15,61,30,.35);
  transform:translateX(70px);animation:socin .6s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(.8s + var(--i) * .08s);
  transition:background .25s,transform .25s,box-shadow .25s}
.social__btn:hover,.social__btn:focus-visible{background:var(--c);transform:translateX(-4px) scale(1.12);box-shadow:0 10px 22px rgba(0,0,0,.3)}
/* Etiqueta que aparece a la izquierda al pasar el cursor */
.social__btn span{position:absolute;right:calc(100% + 10px);white-space:nowrap;background:#0f3d1e;color:#fff;font:500 .78rem Poppins,sans-serif;
  padding:5px 11px;border-radius:8px;opacity:0;pointer-events:none;transform:translateX(8px);transition:opacity .2s,transform .2s}
.social__btn:hover span,.social__btn:focus-visible span{opacity:1;transform:none}
@keyframes socin{to{transform:none}}

/* Aire de pulso suave en el primer botón para llamar la atención */
.social__btn:first-child::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #6bbe2e;animation:socping 2.4s ease-out infinite;opacity:0}
@keyframes socping{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.7);opacity:0}}

@media (max-width:560px){
  .social{gap:6px;padding-right:6px}
  .social__btn{width:40px;height:40px;font-size:1rem}
  .social__btn span{display:none}
}
@media (prefers-reduced-motion:reduce){.social__btn{animation:none;transform:none}.social__btn:first-child::after{display:none}}