/* ═══════════════════════════════════════════════════════════════════
   cookies.css — o aviso de cookies.

   ═══ AS DUAS ESCOLHAS PESAM O MESMO ═══
   O que a lei pede, e que quase ninguém faz, é que recusar seja tão
   fácil como aceitar. Por isso os dois botões têm a MESMA caixa, o
   mesmo corpo e o mesmo alvo para o dedo: o que os separa é a cor de
   fundo, não o tamanho. Um «Aceitar» gordo ao lado de um «recusar» em
   letra pequena não é uma escolha, é um funil.

   ═══ ONDE VIVE ═══
   Fora do palco, como a barra: um `fixed` debaixo do `transform` do
   quadro deixa de se medir pela janela. Encostado em baixo e à
   esquerda, que é onde não tapa nem a barra (topo) nem o botão de
   WhatsApp da casa (canto direito).

   ═══ O TRAJE ═══
   É o painel escuro da casa — o mesmo `#2A1430` do destaque do artigo,
   com a moldura tracejada por dentro. Sobre papel claro lê-se como uma
   peça pousada, não como parte da página.
   ═══════════════════════════════════════════════════════════════════ */

.pocook {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 90;                    /* por cima da página, por baixo da barra (60)… */
  width: min(460px, calc(100vw - 40px));
  font-family: 'Roboto', 'Segoe UI', system-ui, sans-serif;
  font-style: italic;
  text-transform: uppercase;
  color: rgba(242, 242, 242, 0.82);
}
/* …e a barra é 60, por isso sobe-se acima dela de propósito: um aviso
   que tem de ser respondido não pode ficar por baixo de nada. */

.pocook[hidden] { display: none; }

.pocook-caixa {
  position: relative;
  padding: 22px 24px 20px;
  border-radius: 4px;
  background: #2A1430;
  box-shadow: 0 22px 52px rgba(12, 4, 12, 0.5);
}
.pocook-caixa::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1.5px dashed rgba(217, 203, 221, 0.35);
  border-radius: 2px;
  pointer-events: none;
}

.pocook-cab {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: 'Designer', 'Roboto', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 17px;
  letter-spacing: 0.01em;
  color: #FFFFFF;
}
.pocook-pts { display: inline-flex; gap: 4px; }
.pocook-pts i { display: block; width: 8.4px; height: 8.4px; border-radius: 50%; }
.pocook-pts i:nth-child(1) { background: #F1EFF1; }
.pocook-pts i:nth-child(2) { background: #6E7BD8; }
.pocook-pts i:nth-child(3) { background: #7BE0AE; }
.pocook-pts i:nth-child(4) { background: #F06BE0; }

.pocook-txt {
  margin: 12px 0 0;
  font-weight: 500;
  font-size: 13.4px;
  line-height: 1.6;
  letter-spacing: 0.01em;
}
.pocook-txt a {
  color: #FFFFFF;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.45);
}
.pocook-txt a:hover { text-decoration-color: #FFFFFF; }

.pocook-botoes {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}

/* A MESMA CAIXA PARA OS DOIS. `flex: 1 1 0` dá-lhes metade cada, e o
   `min-width` impede que um texto mais comprido roube largura ao
   outro — que é a maneira discreta de fazer o «recusar» parecer
   menor. */
.pocook-b {
  flex: 1 1 0;
  min-width: 168px;
  height: 44px;                   /* o alvo mínimo para o dedo */
  padding: 0 12px;
  border-radius: 4px;
  border: 2px solid rgba(241, 239, 241, 0.38);
  background: transparent;
  color: #F1EFF1;
  font-family: 'Designer', 'Roboto', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background 220ms ease, border-color 220ms ease, color 220ms ease;
}
.pocook-b:hover { border-color: #F1EFF1; }
.pocook-b--sim {
  background: #F1EFF1;
  border-color: #F1EFF1;
  color: #3A1E3C;
}
.pocook-b--sim:hover { background: #FFFFFF; border-color: #FFFFFF; }
.pocook-b:focus-visible { outline: 2px solid #F06BE0; outline-offset: 3px; }

/* ═══════════════════════════════════════════════════════════════════
   A 390, MAIS PEQUENO — E COM A MESMA ESCOLHA

   Medido: 274px de 844. Quase um terço do primeiro ecrã, em todas as
   treze páginas, e no índice a cair em cima da primeira fila de
   produto. Um aviso que tem de ser respondido pode ocupar o seu lugar;
   um terço do ecrã não é o seu lugar.

   Três cortes, e nenhum deles é no que a lei pede:

   1 · O INCISO SAI. «O resto — medir o que se lê e mostrar-te anúncios
       nossos — só se disseres que sim» passa a «O resto só se disseres
       que sim»: duas linhas em vez de quatro, e a mesma promessa. O
       detalhe continua no marcado e a uma ligação de distância, que é
       onde a política dele vive.

   2 · OS BOTÕES LADO A LADO. Empilhados eram 98px com o vão; lado a
       lado são 44. O que os deixava empilhar era o `min-width: 168px`,
       e num aviso de 310px de miolo cabem dois de 150.

       ═══ E CONTINUAM A PESAR O MESMO ═══
       Esta é a regra que não se toca. Os dois têm a MESMA caixa, o
       mesmo corpo, o mesmo alvo e a mesma folga: o que os separa é a
       cor, e nada mais. «Só os necessários» é mais comprido do que
       «Aceitar tudo» — por isso a letra pode dobrar, nos DOIS, com a
       mesma entrelinha. Encolher o de recusar para o de aceitar caber
       numa linha era transformar uma escolha num funil, e é
       exactamente o que isto existe para não fazer.

   3 · MENOS ENCHIMENTO. Vinte e dois para dezasseis em cima, que numa
       caixa de 350 já é ar suficiente.

   Fica em ~160px. Continua encostado em baixo — que é onde o polegar
   chega sem mudar de mão — e continua a tapar menos do que tapava.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 560px) {
  .pocook { left: 20px; right: 20px; bottom: 16px; width: auto; }
  .pocook-caixa { padding: 16px 18px 16px; }

  .pocook-miolo { display: none; }

  .pocook-cab { font-size: 16px; }
  .pocook-txt { margin-top: 9px; font-size: var(--c3); line-height: 1.5; }

  /* A ligação não se parte a meio. Sublinhada e em duas linhas
     («POLÍTICA DE / COOKIES») lia-se como duas ligações; inteira, cai
     para a linha de baixo e continua a ser uma. */
  .pocook-txt a { white-space: nowrap; }
  .pocook-botoes { margin-top: 14px; gap: 8px; }

  .pocook-b {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 8px;
    font-size: var(--c3);
    letter-spacing: 0.01em;
    /* Duas linhas, se a palavra não couber — e a caixa não muda de
       tamanho por isso: os 44px são o CHÃO do alvo, não a altura. */
    white-space: normal;
    line-height: 1.15;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
}

/* Entra a subir, uma vez. Quem pediu para não haver movimento
   recebe-o já pousado — o aviso não é decoração, tem de aparecer na
   mesma. */
@keyframes pocookEntra {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.pocook { animation: pocookEntra 420ms cubic-bezier(.2, .7, .2, 1) both; }

@media (prefers-reduced-motion: reduce) {
  .pocook { animation: none; }
  .pocook-b { transition: none; }
}

/* ═══ DUAS CAMADAS FIXAS NO MESMO CANTO, E UMA TAPAVA A OUTRA ═══
   O aviso está `bottom: 16px` e a barra das duas acções fixas ocupa os
   80px de baixo do ecrã (9+9 de enchimento, 60 de botão, 2 de borda —
   a conta está no `acoes.css`). Nenhum dos dois sabia do outro:
   medido a 390, o aviso ia de 642 a 828 e a barra de 760 a 847, ou
   seja **68px por cima dos botões «Aceitar tudo» e «Só os
   necessários»** — a escolha que o aviso existe para dar estava
   debaixo de uma barra opaca, nas quatro páginas que pedem acções.

   Sobe o aviso a altura da barra. O `:has(.acoes)` é o mesmo laço que
   o `acoes.css` usa para reservar o fundo do corpo, por isso quem não
   pede acções não paga nada. E o corte é o da barra (1023.98), não o
   dos 560 do bloco acima: a barra mostra-se em toda a banda estreita,
   e entre os 561 e os 1023 o aviso usava o `bottom: 20px` da regra
   base — tapado do mesmo jeito. */
@media (max-width: 1023.98px) {
  body:has(.acoes) .pocook { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}