/* ============================================================================
   page-legal.css — Emma Café Bistrot
   Páginas legais (cookies.php / privacidade.php): texto longo, então aqui a
   legibilidade vence o minimalismo decorativo. Coluna estreita, alinhada à
   esquerda (não centralizada), título de página em vinho, corpo em preto suave,
   títulos de seção em vinho uppercase com tracking largo. Zero card, zero
   caixa, zero borda, zero radius, zero sombra, zero fundo alternado.
   Sobrescreve, só para estas duas páginas, os estilos de .legal-page
   herdados de css/site.css (que ainda usam borda/radius em tabela).
   Consome tokens de design-system.css. Feito por Frame Tecnologia.
   ============================================================================ */

.pagina-legal{
  max-width:640px;
  padding-block:clamp(3rem,8vw,5rem) clamp(4rem,10vw,7rem);
  text-align:left;
}

.pagina-legal__topo{
  margin-bottom:clamp(2.5rem,6vw,4rem);
}
.pagina-legal__titulo{
  margin:0 0 .85rem;
  font-weight:var(--peso-negrito);
  font-size:clamp(1.85rem,4.5vw,2.5rem);
  line-height:1.2;
  letter-spacing:var(--tracking-logo);
  color:var(--vinho);
}
.pagina-legal__intro{
  margin:0;
}

/* ─── Corpo do texto legal ─── */
.legal-page{ max-width:none; }

.legal-atualizacao{
  display:block;
  margin:0 0 clamp(2rem,5vw,3rem);
  color:var(--texto-muted);
  font-size:.78rem;
  font-weight:var(--peso-medio);
  letter-spacing:var(--tracking-rotulo);
  text-transform:uppercase;
}

.legal-page h2{
  margin:clamp(2.5rem,5vw,3.5rem) 0 .9rem;
  font-weight:var(--peso-regular);
  font-size:1.05rem;
  line-height:1.35;
  letter-spacing:var(--tracking-largo);
  text-transform:uppercase;
  color:var(--vinho);
}
.legal-page h2:first-of-type{ margin-top:0; }

.legal-page h3{
  margin:1.75rem 0 .5rem;
  font-weight:var(--peso-medio);
  font-size:1rem;
  color:var(--vinho);
}

.legal-page p,
.legal-page ul,
.legal-page li{ color:var(--texto); }

.legal-page p{ margin:0 0 1.25rem; max-width:68ch; }
.legal-page ul{ margin:0 0 1.25rem; padding-left:1.2rem; max-width:68ch; }
.legal-page li{ margin-bottom:.4rem; }

.legal-page strong{ color:var(--vinho); font-weight:var(--peso-medio); }
.legal-page em{ font-family:var(--fonte-italica); font-style:italic; }
.legal-page a{ color:var(--texto); text-decoration:underline; text-underline-offset:3px; }
.legal-page a:hover{ color:var(--vinho); }

.legal-page code{
  background:transparent;
  padding:0;
  border-radius:0;
  color:var(--vinho);
  font-family:var(--fonte-base);
  font-size:.95em;
}

/* ─── Tabela de cookies — sem borda, sem radius, sem card.
   Sempre em bloco (rótulo em cima, valor embaixo), mesmo no desktop:
   evita a grade com linhas divisórias e funciona igual em qualquer
   largura de tela. Usa os atributos data-label já presentes no HTML. ─── */
.legal-page table{ display:block; width:100%; margin:0 0 1.75rem; border-collapse:collapse; }
.legal-page thead{ display:none; }
.legal-page tbody{ display:block; }
.legal-page tr{ display:block; margin-bottom:1.5rem; }
.legal-page tr:last-child{ margin-bottom:0; }
.legal-page td{
  display:block;
  padding:0 0 .5rem;
  border:0;
  vertical-align:top;
}
.legal-page td:last-child{ padding-bottom:0; }
.legal-page td::before{
  content:attr(data-label);
  display:block;
  margin-bottom:.2rem;
  font-weight:var(--peso-medio);
  font-size:.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--vinho);
}

/* ─── Ação de cookies: link de texto, sem botão pill/sólido ─── */
.legal-page__acao{
  display:inline-block;
  padding:0;
  margin:0;
  border:0;
  background:transparent;
  font-family:var(--fonte-base);
  font-weight:var(--peso-medio);
  font-size:.9rem;
  color:var(--vinho);
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}
.legal-page__acao:hover{ color:color-mix(in srgb, var(--vinho) 78%, black); }