/* ==========================================================================
   Essence Tântric · barra de contacto fixa (telemóvel)
   Autor: DEVOPS (Coneki) · 27/09/2026 · cliente Essence Tântric

   Pedido do dono, 27/09/2026: «dois botões fixos no bottom, tipo de navegação,
   mas com opções, ligar e falar no whatsapp. Assim teríamos esses CTAs fáceis
   para o usuário».

   Factos que decidem o desenho:

   1. Altura de 60 px por botão — acima dos 44 px de alvo confortável e dos 24 px
      do contrato (o portão mede o que é clicável, não o que parece clicável).
   2. `env(safe-area-inset-bottom)` no fundo da barra e no `padding-bottom` do
      `body`: no iPhone a barra de gestos come os últimos 34 px e, sem isto, o
      botão de WhatsApp ficava debaixo dela.
   3. O `body` ganha esse mesmo afastamento enquanto a barra existe — sem isso o
      último bloco do rodapé (e a faixa legal) ficavam escondidos para sempre atrás
      dela. É o defeito clássico das barras fixas.
   4. Cores medidas: WhatsApp #0f7a5f com texto branco = 5,29:1; telefone no
      bordéus #720917 com creme #F2E4D8 = 9,61:1. Ambos acima de 4,5:1.
   5. `z-index: 70`: acima do cabeçalho (60) e da barra de progresso da home, abaixo
      de nada que seja modal (o visualizador de fotografias usa 100).
   ========================================================================== */

.acoes-fixas { display: none; }

@media (max-width: 1023px) {
  :root {
    --altura-acoes-fixas: 60px;
  }

  .acoes-fixas {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--cor-fundo-escuro);
    border-top: 1px solid var(--cor-acento);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .acoes-fixas { border-top-color: color-mix(in srgb, var(--cor-acento) 55%, transparent); }
  }

  .acoes-fixas__acao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--esp-2);
    min-height: var(--altura-acoes-fixas);
    font-size: var(--fs-corpo);
    font-weight: var(--peso-forte);
    text-decoration: none;
    border: 0;
    cursor: pointer;
  }

  .acoes-fixas__glifo { flex: none; width: 22px; height: 22px; }

  .acoes-fixas__acao--ligar {
    background: var(--cor-marca);
    color: var(--cor-texto-escuro);
  }

  .acoes-fixas__acao--conversa {
    background: var(--cor-conversa);
    color: var(--cor-fundo);
  }

  .acoes-fixas__acao:focus-visible {
    outline: var(--foco-largura) solid var(--cor-foco-escuro);
    outline-offset: calc(-1 * var(--foco-largura));
  }

  /* O último bloco do documento não pode ficar atrás da barra. */
  body { padding-bottom: calc(var(--altura-acoes-fixas) + env(safe-area-inset-bottom, 0px)); }

  /* Em ecrã estreito e baixo (telemóvel deitado) a barra come o ecrã todo em
     altura: encolhe para 48 px, que ainda é alvo de polegar. */
  @media (max-height: 420px) {
    :root { --altura-acoes-fixas: 48px; }

    .acoes-fixas__glifo { width: 18px; height: 18px; }
    .acoes-fixas__acao { font-size: var(--fs-legenda); }
  }
}