/* ═══════════════════════════════════════════════════════════════════
   acoes.css — as duas acções fixas ao fundo, na banda estreita.

   ═══ PORQUE É QUE ISTO NÃO VIVE NO ARTBOARD ═══
   Tudo o resto do sítio é o quadro de 390 escalado por `transform`.
   Uma peça `position: fixed` DENTRO de um elemento transformado deixa
   de ser fixa ao ecrã e passa a ser fixa ao quadro — a regra do CSS é
   que um `transform` cria um novo bloco de contenção, e o quadro tem
   um. A barra ficaria pousada algures a meio dos 7300px e a rolar com
   a página.

   Por isso vive FORA do palco, como as portas e o aviso de cookies, e
   nas suas próprias unidades: aqui um pixel é um pixel, não uma
   unidade de artboard multiplicada pela escala da banda.

   ═══ SÓ NA BANDA ESTREITA, E SÓ ONDE FOI PEDIDA ═══
   Acima dos 1024 o sítio mostra o quadro de 1440, que tem a barra do
   topo com a pastilha do orçamento à direita — duas barras a dizer o
   mesmo. Some. E o marcado só é escrito nas páginas que o pedem
   (`acoes: true` no registo do `gerar.mjs`), por isso quem não o pedir
   nem carrega o elemento.
   ═══════════════════════════════════════════════════════════════════ */
.acoes {
  position: fixed;
  /* Desce 3px abaixo da margem do ecrã. Uma faixa fixa com fundo
     translúcido e `backdrop-filter` deixa, no Chrome, um fio claro de
     1px onde encosta ao rebordo do ecrã — o desfoque não tem o que
     amostrar por baixo e clareia a aresta. Pondo a aresta FORA do
     ecrã, o fio fica fora com ela. O `padding-bottom` recupera os 3px
     para os botões não descerem. */
  inset: auto 0 -3px 0;
  z-index: 60;
  display: flex;
  gap: 8px;
  padding: 9px 12px;
  /* O `env()` é zero num browser que não tenha entalhe, e é a altura
     da barra de gestos no que tem. Sem ele, no iPhone a linha de baixo
     dos botões fica debaixo do risco de arrastar. Os 3px são os do
     `inset` acima. */
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));

  /* A mesma língua da faixa da barra do topo: a cor da casa quase
     cheia, com o desfoque só a dar sinal de vida por baixo. */
  background: rgba(58, 30, 60, .93);
  background: color-mix(in srgb, #3A1E3C 93%, transparent);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  border-top: 2px solid #713773;
  box-shadow: 0 -8px 22px rgba(43, 18, 42, .22);
}

@media (min-width: 1024px) {
  .acoes { display: none; }
}

/* O RODAPÉ TEM DE PODER ACABAR. A barra está por cima da página, e sem
   isto os últimos 66px do rodapé — que é onde está o © — ficavam
   tapados para sempre, em vez de tapados enquanto se rola. O valor é a
   altura da barra: 9+9 de enchimento, 60 de botão, 2 de borda. */
@media (max-width: 1023.98px) {
  body:has(.acoes) { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}

.acoes-b {
  flex: 1;
  display: flex;
  align-items: center;
  /* O rótulo e o ícone andam JUNTOS, ao meio. Com `space-between` o
     nome ficava colado à esquerda e o ícone à direita, e no botão
     largo sobravam 60px de nada no meio — dois pedaços em vez de um
     botão. */
  justify-content: center;
  gap: 10px;
  min-width: 0;
  height: 60px;              /* Bem acima dos 44 de alvo ao dedo: é a
                                peça que está sempre no ecrã, e a que
                                mais vezes se toca com o polegar. */
  padding: 0 10px;
  border-radius: 4px;
  text-decoration: none;
  font-family: 'Designer', 'Roboto', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: var(--c2);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* MEDIDO, NAO SUPOSTO: com 13,5px e a seta a 34, «Pedir orçamento»
   cortava-se em «Pedir orçam…» a 390. As medidas abaixo saem de o
   fazer caber com folga — ver a sonda no fim deste ficheiro.
   O nome encolhe antes de a seta desaparecer: numa banda de 320 é
   preferível ler «Pedir orçam…» com a seta do que perder o sinal de
   que aquilo leva a algum lado. */
.acoes-b span { overflow: hidden; text-overflow: ellipsis; }

.acoes-b i {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 4px;
}

/* ═══ A ACÇÃO DA CASA ═══ */
.acoes-b--forte {
  flex: 1.45;                /* Mais larga, e não só mais escura: o
                                peso lê-se antes da cor, e lê-se mesmo
                                de relance. */
  background: #4A294B;
  border: 2px solid #713773;
  color: #FFFFFF;
}
.acoes-b--forte i { background: #F1EFF1; }

/* ═══ A SAÍDA RÁPIDA ═══ */
.acoes-b--suave {
  background: #F1EFF1;
  border: 2px solid #713773;
  color: #3A1E3C;
}
.acoes-b--suave i { color: #5C3A5C; }

/* ═══ AS BANDAS ESTREITAS ═══
   A 320 e a 360 não há espaço para o botão da casa ser 45% mais largo:
   com essa proporção, o «Contacto» fica com 62px de rótulo para uma
   palavra de 81. Aqui os dois pesam o mesmo e a caixa aperta-se — a
   diferença entre eles passa a ser só a cor, que a esta largura chega. */
@media (max-width: 380px) {
  .acoes { gap: 6px; padding-left: 10px; padding-right: 10px; }
  .acoes-b { padding: 0 6px; gap: 6px; }
  .acoes-b i { width: 28px; height: 28px; }
  .acoes-b--forte { flex: 1; }
}

/* O toque responde. Sem `:hover` — num telemóvel o hover fica colado
   depois do toque, e um botão que fica aceso é um botão que parece
   estar a carregar. */
.acoes-b:active { transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
  .acoes-b:active { transform: none; }
}