/* ============================================================================
   O BOTÃO FLUTUANTE DO WHATSAPP (`.zap`)

   Mora num arquivo próprio porque ele existe em TODA página, e este site não
   tem template nem include: cada `.html` é uma ilha. Uma folha só evita que a
   peça vire duas peças diferentes na segunda página.

   NÃO É A BOLHA VERDE PADRÃO. Aquela é a peça que qualquer gerador entrega, e
   num site com esta direção de arte ela lê como plugin colado por cima. Aqui a
   chapa é o CREME da marca — o mesmo papel do rodapé e da cena 03 — e quem
   carrega o reconhecimento é o GLIFO, que é o desenho oficial do WhatsApp na
   cor dele. Cor é reconhecimento; forma é pertencimento.

   A MATÉRIA SEGUE A REGRA DA CASA: sombra em dois tempos (contato curta e
   ambiente larga), aresta em duas tintas, chapa com meio ponto de gradiente na
   direção da luz, e um `:active` que afunda. Botão que só troca de cor no
   hover é forma preenchida.
   ========================================================================== */
.zap{
  /* 60 no dedo e no ponteiro: o piso de alvo de toque é 44, e a peça flutua
     sobre conteúdo, então ela precisa de folga para não pedir mira */
  --d:clamp(56px, 4.4vw, 62px);
  --verde:#25D366;

  position:fixed;
  right:max(calc(16px + env(safe-area-inset-right, 0px)), 2.2vw);
  bottom:max(calc(16px + env(safe-area-inset-bottom, 0px)), 2.2vw);
  z-index:900;

  display:flex;align-items:center;gap:0;
  height:var(--d);
  padding:0;
  border-radius:calc(var(--d) / 2);
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;

  /* CHAPA CREME, o papel da marca, com meio ponto de gradiente na direção da
     luz. O verde é o do WhatsApp e fica só no glifo: chapa verde seria a
     bolha de plugin, e sobre creme o verde oficial tem contraste de sobra. */
  background:
    linear-gradient(180deg, #FFFDF7 0%, var(--creme, #F1E7D5) 62%, #E9DCC4 100%);
  box-shadow:
    /* ambiente: larga, quase invisível, dá volume em volta */
    0 18px 38px rgba(4,4,4,.30),
    /* contato: curta, colada na base, é ela que pousa a peça */
    0 3px 9px rgba(4,4,4,.26),
    /* aresta em duas tintas: luz em cima, sombra embaixo */
    inset 0  1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(4,4,4,.14),
    /* contorno, senão a peça sangra quando passa sobre seção clara */
    inset 0 0 0 1px rgba(4,4,4,.10);

  transition:
    box-shadow .28s cubic-bezier(.22,1,.36,1),
    transform  .28s cubic-bezier(.22,1,.36,1),
    opacity    .24s linear;
}

/* o glifo mora numa caixa quadrada do tamanho da peça: assim o ícone fica
   centrado no círculo quando o rótulo está fechado, e continua ancorado à
   esquerda quando ele abre */
.zap-glifo{
  flex:none;
  width:var(--d);height:var(--d);
  display:grid;place-items:center;
}
.zap-glifo svg{
  width:calc(var(--d) * .46);height:calc(var(--d) * .46);
  display:block;
  fill:var(--verde);
  /* a marca oficial é chapada; a sombra curtíssima assenta o glifo no papel */
  filter:drop-shadow(0 1px 1px rgba(4,4,4,.22));
}

/* O RÓTULO ABRE NO PONTEIRO. Fechado ele tem largura zero e não ocupa canto de
   tela; aberto, diz o que a peça faz sem depender de o ícone ser entendido.
   `max-width` e não `width`, para a medida sair do texto e não de um número
   chutado que quebra quando a frase mudar. */
.zap-rotulo{
  max-width:0;overflow:hidden;white-space:nowrap;
  opacity:0;
  font-family:"Inter Display","Inter",system-ui,sans-serif;
  font-size:clamp(13px, 1.05vw, 15px);
  font-weight:700;letter-spacing:-.01em;
  color:#141210;
  transition:max-width .34s cubic-bezier(.22,1,.36,1),
             opacity .22s linear,
             padding .34s cubic-bezier(.22,1,.36,1);
}
.zap:hover .zap-rotulo,
.zap:focus-visible .zap-rotulo{
  max-width:calc(var(--d) * 4);
  opacity:1;
  padding-right:calc(var(--d) * .40);
}

.zap:hover{
  transform:translateY(-2px);
  box-shadow:
    0 24px 46px rgba(4,4,4,.34),
    0 4px 11px rgba(4,4,4,.28),
    inset 0  1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(4,4,4,.14),
    /* no hover o contorno vira o verde da marca: é o único momento em que a
       cor sai do glifo, e ela sai como aresta, não como chapa */
    inset 0 0 0 1px rgba(37,211,102,.85);
}
/* O ESTADO QUE FALTA EM 90% DOS CASOS: a peça afunda e a sombra encolhe junto.
   Sem isso o hover parece adesivo escorregando. */
.zap:active{
  transform:translateY(1px);
  box-shadow:
    0 6px 14px rgba(4,4,4,.26),
    inset 0 1px 3px rgba(4,4,4,.26),
    inset 0 0 0 1px rgba(4,4,4,.12);
}
.zap:focus-visible{
  outline:3px solid var(--verde);
  outline-offset:3px;
}

/* ELE NÃO APARECE SOBRE O HERO.

   Medido com a sonda da matriz de aparelhos: os botões do carrossel do palco
   ocupam de y=9 a y=818 num 390x844, ou seja a altura inteira da primeira
   tela. Não existe vão para onde mover a peça — em qualquer canto ela cobre um
   controle, e a sonda acusou o "KIDS DAY" morto em 320, 390 e 430.

   E ela é redundante ali: o hero já tem o botão grande de WhatsApp e a linha
   com o telefone. O atalho existe para as seções que NÃO têm pedido à mão.

   Sem JavaScript ele simplesmente fica sempre visível, que é o comportamento
   de antes: o atributo só é escrito por quem observa o palco. */
.zap[data-recolhido]{
  opacity:0;
  transform:translateY(12px) scale(.92);
  pointer-events:none;
}

/* no dedo não existe hover: o rótulo nunca abre e a peça fica redonda */
@media (hover: none){
  .zap:hover .zap-rotulo{max-width:0;opacity:0;padding-right:0}
  .zap:hover{transform:none}
}

@media (prefers-reduced-motion: reduce){
  .zap,.zap-rotulo{transition:none}
  .zap:hover{transform:none}
  .zap[data-recolhido]{transform:none}
}

/* IMPRESSÃO: a peça é um atalho de tela, não existe no papel. */
@media print{ .zap{display:none} }