/* ==========================================================================
   contato-flutuante.css — botão flutuante de contato (WhatsApp + Instagram)
   Clínica Dr. Reges Jr.
   --------------------------------------------------------------------------
   FONTE ÚNICA do visual, para os dois lugares onde o widget aparece:
     - blog (drregesjr.blog): <link> para este arquivo + assets/contato-flutuante.js,
       que monta a marcação;
     - home (React): ~/reges-site-react/scripts/sincronizar-tema.mjs copia este
       arquivo para src/styles/tema/ e src/componentes/ContatoFlutuante.jsx
       renderiza a MESMA marcação. Mudou a marcação num, mude no outro.

   Por que todo seletor começa por #contato-flutuante: o tema rebaixa cada
   filho direto do body (e do #raiz, na home) para position:relative com
   especificidade (0,3,0) — só .portal-overlay e .avatar-ia-flutuante escapam
   (liquid-glass.css, seção 2). Com classe, o botão perderia e cairia no fim
   da página. O ID vence sem mexer no tema e ainda blinda o widget contra os
   estilos globais de a/button das páginas.

   Desempenho: o que roda em laço (o pulso) anima só transform e opacity, que
   o navegador compõe fora da thread principal — é o que mantém o celular
   liso. O brilho da borda gira um ângulo registrado com @property; onde
   @property não existe a borda fica parada, sem quebrar nada. A abertura
   anima opacity no PRÓPRIO painel de vidro, nunca num ancestral: opacity < 1
   num ancestral cria uma "backdrop root" e o desfoque some durante o fade,
   voltando de estalo no fim.

   Tipografia: "Quiche Sans" é família comercial e ainda não há arquivo dela
   no projeto (ver liquid-glass.css, "Tipografia"). Ela vem primeiro na pilha;
   enquanto não houver @font-face, o navegador usa Urbanist, já carregada nas
   duas páginas.
   ========================================================================== */

@property --cf-angulo {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

#contato-flutuante {
  --cf-ouro: #ffd700;
  --cf-caramelo: #d4a373;
  --cf-degrade: linear-gradient(135deg, var(--cf-ouro), var(--cf-caramelo));
  --cf-vidro: rgba(0, 0, 0, 0.7);
  --cf-desfoque: blur(24px) saturate(160%);
  --cf-raio: 12px;
  --cf-raio-peca: 8px;
  --cf-fonte: "Quiche Sans", "Urbanist", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --cf-curva: cubic-bezier(0.22, 1, 0.36, 1);
  /* Distâncias da borda direita e do pé da tela. */
  --cf-margem: 30px;
  --cf-base: 30px;

  position: fixed;
  right: calc(var(--cf-margem) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--cf-base) + env(safe-area-inset-bottom, 0px));
  z-index: var(--lg-z-acao, 2000);
  line-height: 1.15;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

#contato-flutuante *,
#contato-flutuante *::before,
#contato-flutuante *::after {
  box-sizing: border-box;
}

/* Declarada em cada elemento, e não só herdada da raiz: o tema aplica
   `html:root body * { font-family: var(--lg-fonte) }` direto em todos, e no
   blog --lg-fonte não inclui "Quiche Sans". */
#contato-flutuante,
#contato-flutuante * {
  font-family: var(--cf-fonte);
}

/* --- Vidro: botão e painel ------------------------------------------------ */

#contato-flutuante .cf-gatilho,
#contato-flutuante .cf-painel {
  position: relative;
  border-radius: var(--cf-raio);
  background: var(--cf-vidro);
  -webkit-backdrop-filter: var(--cf-desfoque);
  backdrop-filter: var(--cf-desfoque);
  box-shadow:
    inset 0 1px 0 rgba(255, 215, 0, 0.12),
    0 20px 48px -16px rgba(0, 0, 0, 0.85);
}

/* Borda de 1px em degradê ouro → caramelo. Um border comum não aceita
   degradê com canto arredondado; a máscara recorta o miolo e sobra o fio. */
#contato-flutuante .cf-gatilho::before,
#contato-flutuante .cf-painel::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--cf-angulo),
    rgba(212, 163, 115, 0.45),
    var(--cf-ouro) 10%,
    rgba(212, 163, 115, 0.45) 22%,
    rgba(212, 163, 115, 0.22) 50%,
    rgba(255, 215, 0, 0.6) 78%,
    rgba(212, 163, 115, 0.45)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* --- Botão ---------------------------------------------------------------- */

#contato-flutuante .cf-gatilho {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  margin: 0;
  padding: 9px 16px 9px 9px;
  border: 0;
  color: var(--cf-ouro);
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition:
    transform 0.35s var(--cf-curva),
    box-shadow 0.35s var(--cf-curva);
}

#contato-flutuante .cf-gatilho::before {
  animation: cf-brilho 6s linear infinite;
}

/* Pulso: um anel que nasce na borda e se desfaz para fora. Escala desigual
   porque o botão é mais largo que alto — assim o halo cresce por igual. */
#contato-flutuante .cf-gatilho::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  border: 1px solid rgba(255, 215, 0, 0.7);
  box-shadow: 0 0 22px 2px rgba(255, 215, 0, 0.28);
  opacity: 0;
  pointer-events: none;
  animation: cf-pulso 2.8s var(--cf-curva) infinite;
  will-change: transform, opacity;
}

#contato-flutuante .cf-gatilho:active {
  transform: scale(0.98);
}

#contato-flutuante .cf-gatilho:focus-visible,
#contato-flutuante .cf-item:focus-visible {
  outline: 2px solid var(--cf-ouro);
  outline-offset: 3px;
}

#contato-flutuante .cf-seta {
  flex: none;
  width: 14px;
  height: 14px;
  margin-left: 2px;
  background: var(--cf-caramelo);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.35s var(--cf-curva);
}

/* --- Menu ----------------------------------------------------------------- */

/* O menu só liga e desliga a visibilidade; quem anima é o painel (ver o
   cabeçalho). O padding-bottom é uma ponte invisível: o mouse vai do botão
   ao menu sem "sair" do widget e disparar o fechamento. */
#contato-flutuante .cf-menu {
  position: absolute;
  right: 0;
  bottom: 100%;
  width: min(272px, calc(100vw - 2 * var(--cf-margem)));
  padding-bottom: 10px;
  visibility: hidden;
  transition: visibility 0s linear 0.4s;
}

#contato-flutuante .cf-painel {
  display: grid;
  gap: 4px;
  padding: 8px;
  opacity: 0;
  transform: translateY(10px) scale(0.97);
  transform-origin: bottom right;
  transition:
    opacity 0.28s var(--cf-curva),
    transform 0.4s var(--cf-curva);
}

#contato-flutuante .cf-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 34px 10px 10px;
  border-radius: var(--cf-raio-peca);
  color: inherit;
  text-decoration: none;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.3s var(--cf-curva),
    transform 0.4s var(--cf-curva),
    background-color 0.2s ease;
}

#contato-flutuante .cf-item--whatsapp {
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.08), rgba(255, 215, 0, 0));
}

/* Seta ↗: avisa que o canal abre fora do site. */
#contato-flutuante .cf-item::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  background: var(--cf-caramelo);
  opacity: 0.7;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 16L16 8M9.5 8H16v6.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 16L16 8M9.5 8H16v6.5'/%3E%3C/svg%3E") center / contain no-repeat;
  transition:
    transform 0.3s var(--cf-curva),
    opacity 0.3s ease;
}

/* --- Aberto --------------------------------------------------------------- */

#contato-flutuante[data-aberto="true"] .cf-menu {
  visibility: visible;
  transition-delay: 0s;
}

#contato-flutuante[data-aberto="true"] .cf-painel,
#contato-flutuante[data-aberto="true"] .cf-item {
  opacity: 1;
  transform: none;
}

/* Os itens sobem a partir do botão: o de baixo primeiro. */
#contato-flutuante[data-aberto="true"] .cf-item:nth-child(2) {
  transition-delay: 0.05s, 0.05s, 0s;
}

#contato-flutuante[data-aberto="true"] .cf-item:nth-child(1) {
  transition-delay: 0.1s, 0.1s, 0s;
}

#contato-flutuante[data-aberto="true"] .cf-seta {
  transform: rotate(180deg);
}

/* Aberto, o pulso já cumpriu o papel dele: chamar o olhar. */
#contato-flutuante[data-aberto="true"] .cf-gatilho::after {
  animation: none;
}

/* --- Ícones --------------------------------------------------------------- */

/* O glifo é uma máscara sobre o degradê ouro → caramelo, então os desenhos
   vivem só aqui e a marcação dos dois lados leva apenas a classe. */
#contato-flutuante .cf-icone {
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 215, 0, 0.32);
  border-radius: var(--cf-raio-peca);
  background: linear-gradient(145deg, rgba(255, 215, 0, 0.12), rgba(212, 163, 115, 0.04));
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

#contato-flutuante .cf-icone::before {
  content: "";
  position: absolute;
  inset: 9px;
  background: var(--cf-degrade);
  -webkit-mask: var(--cf-glifo) center / contain no-repeat;
  mask: var(--cf-glifo) center / contain no-repeat;
}

#contato-flutuante .cf-icone--agenda {
  --cf-glifo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5'/%3E%3Cpath d='M3.5 9.8h17M8 3v4M16 3v4M9 15.2l2 2 4-4.2'/%3E%3C/svg%3E");
}

#contato-flutuante .cf-icone--whatsapp {
  --cf-glifo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.47 14.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.17-.17.2-.35.22-.65.07-.3-.15-1.25-.46-2.38-1.47-.88-.79-1.48-1.76-1.65-2.06-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.07-.15-.67-1.62-.92-2.22-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.8.37-.27.3-1.04 1.02-1.04 2.48s1.07 2.88 1.22 3.08c.15.2 2.1 3.2 5.08 4.49.71.31 1.26.49 1.69.63.71.23 1.36.19 1.87.12.57-.09 1.76-.72 2.01-1.41.25-.7.25-1.29.17-1.41-.07-.12-.27-.2-.57-.35zM12.04 21.79h-.01a9.9 9.9 0 0 1-5.03-1.38l-.36-.21-3.74.98 1-3.65-.24-.37a9.86 9.86 0 0 1-1.51-5.26c0-5.45 4.44-9.88 9.9-9.88a9.82 9.82 0 0 1 6.99 2.9 9.82 9.82 0 0 1 2.9 6.99c-.01 5.45-4.44 9.88-9.9 9.88zm8.42-18.3A11.8 11.8 0 0 0 12.04.13C5.5.13.18 5.44.18 11.98c0 2.09.55 4.13 1.59 5.93L.08 24l6.24-1.64a11.85 11.85 0 0 0 5.72 1.46h.01c6.53 0 11.85-5.31 11.85-11.85a11.78 11.78 0 0 0-3.44-8.48z'/%3E%3C/svg%3E");
}

#contato-flutuante .cf-icone--instagram {
  --cf-glifo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41-.56-.22-.96-.48-1.38-.9-.42-.42-.68-.82-.9-1.38-.16-.42-.36-1.06-.41-2.23-.06-1.27-.07-1.65-.07-4.85s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41 1.27-.06 1.65-.07 4.85-.07M12 0C8.74 0 8.33.01 7.05.07 5.78.13 4.9.33 4.14.63c-.79.3-1.46.72-2.13 1.38C1.35 2.68.93 3.35.63 4.14.33 4.9.13 5.78.07 7.05.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.06 1.27.26 2.15.56 2.91.3.79.72 1.46 1.38 2.13.67.66 1.34 1.08 2.13 1.38.76.3 1.64.5 2.91.56C8.33 23.99 8.74 24 12 24s3.67-.01 4.95-.07c1.27-.06 2.15-.26 2.91-.56.79-.3 1.46-.72 2.13-1.38.66-.67 1.08-1.34 1.38-2.13.3-.76.5-1.64.56-2.91.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.06-1.27-.26-2.15-.56-2.91-.3-.79-.72-1.46-1.38-2.13C21.32 1.35 20.65.93 19.86.63 19.1.33 18.22.13 16.95.07 15.67.01 15.26 0 12 0zm0 5.84A6.16 6.16 0 1 0 18.16 12 6.16 6.16 0 0 0 12 5.84zm0 10.16A4 4 0 1 1 16 12a4 4 0 0 1-4 4zm6.4-11.85a1.44 1.44 0 1 0 1.44 1.44 1.44 1.44 0 0 0-1.44-1.44z'/%3E%3C/svg%3E");
}

/* --- Texto ---------------------------------------------------------------- */

#contato-flutuante .cf-texto {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

#contato-flutuante .cf-titulo {
  color: var(--cf-ouro);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

#contato-flutuante .cf-legenda {
  color: var(--cf-caramelo);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#contato-flutuante .cf-gatilho .cf-titulo {
  background: linear-gradient(90deg, var(--cf-ouro), var(--cf-caramelo));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --- Hover: só onde existe mouse de verdade --------------------------------
   No toque, :hover "gruda" depois do toque e o botão ficaria erguido. */
@media (hover: hover) and (pointer: fine) {
  #contato-flutuante .cf-gatilho:hover {
    transform: translateY(-2px);
    box-shadow:
      inset 0 1px 0 rgba(255, 215, 0, 0.18),
      0 24px 52px -16px rgba(0, 0, 0, 0.9),
      0 0 28px -8px rgba(255, 215, 0, 0.45);
  }

  #contato-flutuante .cf-item:hover {
    background-color: rgba(255, 215, 0, 0.07);
  }

  #contato-flutuante .cf-item:hover .cf-icone {
    border-color: rgba(255, 215, 0, 0.6);
    box-shadow: 0 0 18px -4px rgba(255, 215, 0, 0.5);
  }

  #contato-flutuante .cf-item:hover::after {
    opacity: 1;
    transform: translate(2px, -2px);
  }
}

/* --- Telas menores -------------------------------------------------------- */

@media (max-width: 768px) {
  #contato-flutuante {
    --cf-margem: 20px;
    --cf-base: 20px;
  }

  #contato-flutuante .cf-gatilho {
    gap: 10px;
    min-height: 52px;
    padding: 7px 14px 7px 7px;
  }

  #contato-flutuante .cf-gatilho .cf-icone {
    width: 38px;
    height: 38px;
  }
}

@media (max-width: 380px) {
  #contato-flutuante .cf-gatilho .cf-legenda {
    display: none;
  }
}

/* --- Preferências do visitante -------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  #contato-flutuante .cf-gatilho::before,
  #contato-flutuante .cf-gatilho::after {
    animation: none;
  }

  #contato-flutuante .cf-painel,
  #contato-flutuante .cf-item {
    transform: none;
    transition-duration: 0.15s;
    transition-delay: 0s;
  }
}

@media (prefers-reduced-transparency: reduce) {
  #contato-flutuante {
    --cf-vidro: rgba(10, 10, 10, 0.96);
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #contato-flutuante {
    --cf-vidro: rgba(8, 8, 8, 0.94);
  }
}

@media print {
  #contato-flutuante {
    display: none;
  }
}

/* --- Animações ------------------------------------------------------------ */

@keyframes cf-pulso {
  0% {
    opacity: 0.85;
    transform: scale(1);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(1.1, 1.36);
  }
}

@keyframes cf-brilho {
  to {
    --cf-angulo: 360deg;
  }
}