.fab{
  position:fixed;
  right:max(16px, env(safe-area-inset-right, 0px));
  bottom:max(20px, env(safe-area-inset-bottom, 0px));
  z-index:900;
  display:flex;
  align-items:center;
  height:58px;
  padding:0;
  border:0;
  border-radius:999px;
  background:linear-gradient(135deg,#5b73d6,#3f56b8);
  color:#fff;
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:13px;
  cursor:pointer;
  box-shadow:0 10px 30px rgba(63,86,184,.55);
  -webkit-tap-highlight-color:transparent;
  animation:fabIn .6s .8s cubic-bezier(.2,.8,.2,1) both;
  transition:transform .25s ease, box-shadow .25s ease, opacity .25s ease;
}

/* Pulso */
.fab::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  animation:fabPulse 2.6s ease-out infinite;
}

.fab:hover,
.fab:focus-visible{
  transform:translateY(-3px);
  box-shadow:0 14px 38px rgba(91,115,214,.75);
  outline:none;
}
.fab:focus-visible{
  outline:2px solid #fff;
  outline-offset:3px;
}
.fab:active{ transform:scale(.96); }

/* Ícono */
.fab__icon{
  flex:none;
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
}
.fab__icon svg{
  width:28px;
  height:28px;
  fill:currentColor;
}

/* Etiqueta que se despliega */
.fab__label{
  max-width:0;
  opacity:0;
  overflow:hidden;
  white-space:nowrap;
  transition:max-width .35s ease, opacity .25s ease, padding .35s ease;
}
.fab:hover .fab__label,
.fab:focus-visible .fab__label,
.fab.is-peek .fab__label{
  max-width:160px;
  opacity:1;
  padding-right:22px;
}

@keyframes fabIn{
  from{ opacity:0; transform:translateY(24px) scale(.8); }
  to{ opacity:1; transform:none; }
}
@keyframes fabPulse{
  0%{ box-shadow:0 0 0 0 rgba(91,115,214,.55); }
  70%,100%{ box-shadow:0 0 0 18px rgba(91,115,214,0); }
}

/* Móvil: más compacto, sin etiqueta */
@media (max-width:700px){
  .fab,
  .fab__icon{ height:54px; }
  .fab__icon{ width:54px; }
  .fab__label{ display:none; }
}

/* Si el aviso de cookies está abierto en móvil, se oculta para no taparlo */
@media (max-width:560px){
  body:has(.ck.is-in) .fab{
    opacity:0;
    pointer-events:none;
  }
}

@media (prefers-reduced-motion:reduce){
  .fab{ animation:none; transition:none; }
  .fab::before{ animation:none; }
  .fab__label{ transition:none; }
}