# The Cookie Factory — Notas Técnicas

## Botão WhatsApp fixo no mobile

Usar `left: calc(100vw - 86px)` em vez de `right: 28px`.  
`100vw` é sempre a largura exata do viewport. `right` pode ser calculado a partir do documento quando há overflow, jogando o botão para fora do ecrã.

Forçar camada GPU própria para evitar artefactos ao fazer scroll:
```css
transform: translateZ(0);
-webkit-transform: translateZ(0);
```

## Banner de cookies fixo no mobile

Usar `width: 100vw` em vez de depender de `left: 0; right: 0`.  
Com overflow no documento, `right: 0` pode expandir o banner além do viewport.

```css
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  overflow: hidden;
  box-sizing: border-box;
}
```

## Overflow horizontal e position:fixed — regra principal

**Nunca usar `overflow-x: hidden` no `html` ou `body`** quando há elementos `position: fixed`.  
Cria um scroll container que quebra o fixed no mobile.

**Solução:**
- `html { overflow-x: clip }` — corta overflow sem criar scroll container
- Wrapper interno `.page-clip { overflow-x: clip }` para o conteúdo
- Elementos fixed ficam **fora** do wrapper, filhos diretos do `<body>`

## Nav mobile — não usar translateX

`transform: translateX(100%)` para esconder a nav duplica a largura do documento (ex: 860px num viewport de 430px), causando overflow horizontal.

**Usar fade em vez de slide horizontal:**
```css
.header__nav {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s, visibility 0s linear 0.35s;
}
.header__nav.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s, visibility 0s linear 0s;
}
```

## position:sticky no header

`position: sticky` quebra quando o elemento está dentro de um pai com `overflow` definido.  
O header deve ficar **fora** de qualquer wrapper com `overflow-x: clip/hidden`.
