/* =========================================================
   Component — Botões flutuantes de contato rápido
   Desktop: centralizados verticalmente na borda direita, acompanham a rolagem.
   Mobile (≤768): viram uma barra fixa na base da tela (ver bloco no fim).
   Esferas de 60×60; no hover expandem em "pill" com rótulo.
   ========================================================= */

.floating-contacts {
  position: fixed;
  right: clamp(1.25rem, 2.5vw, 2rem);   /* margem de segurança da borda direita */
  top: 50%;
  transform: translateY(-50%);     /* centralizados verticalmente */
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  gap: 16px;                       /* 16px entre os botões */
  align-items: flex-end;           /* ancorados à direita (expandem p/ a esquerda) */
}

.fab {
  --fab-bg: var(--color-sage);            /* verde do CTA principal */
  --fab-bg-icon: var(--color-sage-hover);
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  max-width: 60px;                 /* recolhido = só a esfera */
  border-radius: var(--radius-pill);
  color: var(--color-white);
  text-decoration: none;
  background: transparent;
  /* Reset p/ renderizar igual como <button> (gatilho de modal): sem borda/fundo/fonte nativos */
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  transition: max-width var(--dur-base) var(--ease-std),
              background-color var(--dur-base) var(--ease-std);
}

.fab--whatsapp {
  --fab-bg: #25D366;               /* verde do WhatsApp */
  --fab-bg-icon: #1EBE5D;
  display: none;                   /* oculto por ora (não usaremos o WhatsApp lateral) */
}

.fab__label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  text-align: left;
  line-height: 1.12;
  padding: 0;
  transition: max-width var(--dur-base) var(--ease-std),
              opacity var(--dur-base) var(--ease-std),
              padding var(--dur-base) var(--ease-std);
}

/* chamada menor, caixa-alta */
.fab__kicker {
  font-size: 0.625rem;             /* ~10px */
  font-weight: var(--fw-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
}
/* ação em destaque, bold */
.fab__title {
  font-size: 1.0625rem;            /* ~17px */
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
}

.fab__icon {
  position: relative;
  isolation: isolate;              /* contém o z-index do pulse */
  flex: none;
  width: 60px;
  height: 60px;                    /* esfera 60×60 */
  border-radius: 50%;              /* 100% corner radius */
  background: transparent;         /* a esfera verde vai no ::before (p/ o pulse ficar atrás) */
  display: grid;
  place-items: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
/* Esfera verde — camada de baixo (o pulse fica por cima dela; o ícone por cima de tudo) */
.fab__icon::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--fab-bg);
  z-index: 1;
  transition: background-color var(--dur-base) var(--ease-std);
}
.fab__icon img,
.fab__icon svg {
  position: relative;
  z-index: 3;                      /* ícone sempre por cima de tudo */
  width: 28px;
  height: 28px;
  display: block;
}
/* WhatsApp um pouco maior */
.fab--whatsapp .fab__icon img {
  width: 30px;
  height: 30px;
}

/* Efeito de pulsar (somente no WhatsApp) — disco BRANCO PREENCHIDO por cima da
   esfera verde (vem "de cima", igual ao mobile). Emana p/ fora e some;
   o ícone fica acima (z-index 3), então nunca é coberto. */
.fab__pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--color-white);
  z-index: 2;                      /* por cima da esfera verde (::before) */
  animation: pulsar 2s infinite;
}
@keyframes pulsar {
  0%   { transform: scale(0);   opacity: 0.6; }  /* nasce no centro e cresce p/ fora */
  100% { transform: scale(1.9); opacity: 0;   }
}

/* Hover/foco → vira "pill" e revela o rótulo */
.fab:hover,
.fab:focus-visible {
  max-width: 22rem;
  background: var(--fab-bg);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.fab:hover .fab__label,
.fab:focus-visible .fab__label {
  max-width: 18rem;
  opacity: 1;
  padding-inline: 1rem 0.75rem;
}
.fab:hover .fab__icon::before,
.fab:focus-visible .fab__icon::before {
  background: var(--fab-bg-icon);  /* esfera levemente mais escura, como na referência */
}
.fab:hover .fab__icon,
.fab:focus-visible .fab__icon { box-shadow: none; }

/* Em telas de toque (sem hover) mantém só as esferas */
@media (hover: none) {
  .fab { max-width: 60px; }
  .fab__label { display: none; }
}

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

/* ---------------------------------------------------------
   Mobile (≤768px): vira uma BARRA fixa na base da tela,
   full-width, segmentos de largura igual, só ícone.
   (Precisa vir depois do bloco hover:none para sobrescrever
   o max-width das esferas.)
   --------------------------------------------------------- */
@media (max-width: 768px) {
  .floating-contacts {
    inset: auto 0 0 0;             /* colada na base, de ponta a ponta */
    flex-direction: row;
    gap: 0;
    align-items: stretch;
    padding-block-end: env(safe-area-inset-bottom, 0px);  /* respeita a home bar do iOS */

    /* Escondida abaixo da tela até a 2ª seção tocar o topo (ver contacts.js) */
    transform: translateY(110%);
    transition: transform var(--dur-slow) var(--ease-out);
  }
  .floating-contacts.is-revealed { transform: translateY(0); }   /* sobe até a base */

  .fab {
    flex: 1 1 0;                   /* segmentos de largura igual */
    max-width: none;
    min-height: 56px;
    justify-content: center;       /* ícone centralizado no segmento */
    border-radius: 0;
    background: var(--fab-bg);     /* a cor preenche o segmento inteiro */
    box-shadow: none;
  }
  .fab + .fab { border-inline-start: 1px solid rgba(255, 255, 255, 0.25); }

  .fab:hover,
  .fab:focus-visible { max-width: none; background: var(--fab-bg); box-shadow: none; }

  .fab__label { display: none; }   /* sem rótulo na barra (o pulse do WhatsApp continua) */

  .fab__icon {
    width: auto; height: auto;
    background: transparent;       /* deixa a cor do segmento aparecer */
    border-radius: 0;
    box-shadow: none;
  }
  .fab:hover .fab__icon,
  .fab:focus-visible .fab__icon { background: transparent; }
}

/* Conteúdo não fica escondido atrás da barra fixa */
@media (max-width: 768px) {
  .site-footer { padding-block-end: calc(56px + env(safe-area-inset-bottom, 0px)); }
}