.channel-card{
  position:relative;
  overflow:visible;
  grid-template-columns:58px 42px 1fr auto auto;
  transform-origin:center;
  transition:transform .3s cubic-bezier(.2,.8,.25,1),background .3s,border-color .3s,box-shadow .3s;
  animation:channelCardGlow 6.2s ease-in-out infinite
}
.channel-card:nth-child(2){animation-delay:-1.55s}
.channel-card:nth-child(3){animation-delay:-3.1s}
.channel-card:nth-child(4){animation-delay:-4.65s}
.channel-icon{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  color:var(--cyan2);
  opacity:.82;
  transition:transform .28s cubic-bezier(.2,.8,.25,1),color .28s,opacity .28s,filter .28s
}
.channel-icon svg{display:block;width:100%;height:100%}
.channel-icon-linkedin{color:var(--cyan)}
.channel-icon-telegram{color:#63d7ff}
.channel-icon-whatsapp{color:#64e2b4}
.channel-icon-x{color:#fff}
.active-card .channel-status b{animation:linkedinStatusPulse 2.4s ease-in-out infinite}
@keyframes linkedinStatusPulse{0%,100%{opacity:.65;box-shadow:0 0 6px rgba(0,178,255,.42)}50%{opacity:1;box-shadow:0 0 15px rgba(0,178,255,.95)}}
.channel-card::after{
  content:"";
  position:absolute;
  left:58px;
  right:0;
  bottom:-1px;
  height:2px;
  background:linear-gradient(90deg,var(--cyan),transparent);
  opacity:0;
  transform:scaleX(.08);
  transform-origin:left center;
  transition:transform .3s,opacity .3s;
  pointer-events:none
}
.channel-card:hover,
.channel-card:focus-visible{
  z-index:4;
  border-color:rgba(99,215,255,.82);
  background:linear-gradient(90deg,rgba(8,43,84,.78),rgba(8,43,84,.22));
  transform:translateX(14px) scale(1.2);
  box-shadow:0 22px 42px rgba(0,0,0,.3),0 0 34px rgba(0,178,255,.22);
  animation:channelCardActive 1.55s ease-in-out infinite
}
.channel-card:focus-visible{outline:2px solid var(--cyan2);outline-offset:4px}
.channel-card:hover::after,
.channel-card:focus-visible::after{
  opacity:1;
  transform:scaleX(.8);
  animation:channelCardLine 1.55s ease-in-out infinite
}
.channel-card:hover .channel-icon,
.channel-card:focus-visible .channel-icon{
  opacity:1;
  filter:drop-shadow(0 0 8px currentColor)
}
.channel-card:hover .channel-icon-linkedin,
.channel-card:focus-visible .channel-icon-linkedin{transform:scale(1.2) rotate(-6deg)}
.channel-card:hover .channel-icon-telegram,
.channel-card:focus-visible .channel-icon-telegram{transform:translateY(-2px) scale(1.2) rotate(-8deg)}
.channel-card:hover .channel-icon-whatsapp,
.channel-card:focus-visible .channel-icon-whatsapp{transform:scale(1.2) rotate(7deg)}
.channel-card:hover .channel-icon-x,
.channel-card:focus-visible .channel-icon-x{transform:scale(1.2) rotate(-7deg)}
@keyframes channelCardGlow{
  0%,100%{box-shadow:0 0 0 rgba(0,178,255,0);border-color:var(--line)}
  50%{box-shadow:0 7px 22px rgba(0,178,255,.07);border-color:rgba(99,215,255,.34)}
}
@keyframes channelCardActive{
  0%,100%{box-shadow:0 22px 42px rgba(0,0,0,.3),0 0 34px rgba(0,178,255,.22);border-color:rgba(99,215,255,.82)}
  50%{box-shadow:0 30px 62px rgba(0,0,0,.4),0 0 52px rgba(0,178,255,.48);border-color:var(--cyan2)}
}
@keyframes channelCardLine{
  0%,100%{transform:scaleX(.45);opacity:.54}
  50%{transform:scaleX(1);opacity:1}
}
@media(max-width:820px){
  .channel-card{grid-template-columns:38px 32px 1fr auto;gap:10px}
  .channel-icon{width:24px;height:24px}
  .channel-status{grid-column:3;grid-row:2;margin-top:-28px}
  .channel-arrow{grid-column:4;grid-row:1/3}
  .channel-card::after{left:38px}
  .channel-card:hover,.channel-card:focus-visible{transform:translateX(6px) scale(1.08)}
}
@media(min-width:821px) and (max-width:900px){
  .channel-card:hover,.channel-card:focus-visible{transform:scale(1.1)}
}
@media(prefers-reduced-motion:reduce){
  .channel-card,.channel-card::after,.channel-icon,.active-card .channel-status b{animation:none!important;transition:none!important}
  .channel-card:hover,.channel-card:focus-visible{transform:scale(1.04)}
}