.skip-link{
position:absolute;
top:-100px;
left:16px;
z-index:9999;
background:var(--gold);
color:var(--ink);
padding:10px 20px;
border-radius:var(--r-sm);
font-weight:600;
font-size:14px;
text-decoration:none;
transition:top 0.2s;
}
.skip-link:focus{
top:16px;
}
:focus-visible{
outline:2px solid var(--gold);
outline-offset:3px;
border-radius:4px;
}
.float-social{
position:fixed;
right:0;
bottom:120px;
z-index:990;
display:flex;
flex-direction:column;
gap:0;
align-items:flex-end;
pointer-events:none;
}
.float-btn{
pointer-events:all;
display:flex;
align-items:center;
gap:10px;
padding:13px 14px 13px 16px;
border-radius:40px 0 0 40px;
text-decoration:none;
font-family:var(--ff-sans);
font-size:13px;
font-weight:600;
letter-spacing:0.02em;
color:#fff;
box-shadow:-3px 3px 18px rgba(0,0,0,0.22);
transform:translateX(calc(100% - 52px));
transition:transform 0.32s cubic-bezier(0.34,1.56,0.64,1),
box-shadow 0.25s ease;
position:relative;
margin-bottom:8px;
will-change:transform;
overflow:hidden;
}
.float-btn svg{
flex-shrink:0;
width:24px;
height:24px;
transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.float-btn__label{
white-space:nowrap;
opacity:0;
transform:translateX(6px);
transition:opacity 0.22s ease 0.05s,transform 0.22s ease 0.05s;
}
.float-btn:hover,
.float-btn:focus-visible{
transform:translateX(0);
box-shadow:-4px 4px 24px rgba(0,0,0,0.28);
}
.float-btn:hover .float-btn__label,
.float-btn:focus-visible .float-btn__label{
opacity:1;
transform:translateX(0);
}
.float-btn:hover svg,
.float-btn:focus-visible svg{
transform:scale(1.12) rotate(-5deg);
}
.float-btn--wa{
background:linear-gradient(135deg,#25D366 0%,#128C7E 100%);
}
.float-btn--wa::before{
content:'';
position:absolute;
inset:0;
background:linear-gradient(135deg,rgba(255,255,255,0.12) 0%,transparent 60%);
pointer-events:none;
}
.float-btn--ig{
background:linear-gradient(135deg,#f58529 0%,#dd2a7b 40%,#8134af 75%,#515bd4 100%);
}
.float-btn--ig::before{
content:'';
position:absolute;
inset:0;
background:linear-gradient(135deg,rgba(255,255,255,0.1) 0%,transparent 60%);
pointer-events:none;
}
@keyframes waPulse{
0%{box-shadow:-3px 3px 18px rgba(0,0,0,0.22),0 0 0 0 rgba(37,211,102,0.5)}
70%{box-shadow:-3px 3px 18px rgba(0,0,0,0.22),0 0 0 10px rgba(37,211,102,0)}
100%{box-shadow:-3px 3px 18px rgba(0,0,0,0.22),0 0 0 0 rgba(37,211,102,0)}
}
.float-btn--wa{
animation:waPulse 2.8s ease-in-out infinite;
animation-delay:2s;
}
.float-btn--wa:hover,
.float-btn--wa:focus-visible{
animation:none;
box-shadow:-4px 4px 24px rgba(37,211,102,0.4);
}
@media (max-width:768px){
.float-social{
bottom:80px;
right:0;
}
.float-btn{
padding:11px 12px 11px 13px;
transform:translateX(calc(100% - 46px));
margin-bottom:6px;
}
.float-btn svg{
width:22px;
height:22px;
}
.float-btn__label{
font-size:12px;
}
}
@media (max-width:480px){
.float-btn{
transform:translateX(calc(100% - 42px));
}
}