/* Páginas de texto legal (Política de Privacidade e Termos de Utilização):
   leitura confortável numa coluna, cabeçalho flutuante com a marca e
   índice no topo. Mesma direção "liquid glass" do resto da app (ver
   auth.css e people-mobile.css): fundo com manchas de cor desfocadas e
   cartões de vidro translúcido. Texto corrido justificado, com
   hifenização automática para não abrir buracos entre palavras nas
   colunas estreitas do telemóvel. As duas páginas usam <html lang="pt">
   (e não "pt-PT") porque o iOS só hifeniza com o código curto. */

:root {
  /* Valores de glass.css (fonte única do liquid glass). */
  --lg-ink: var(--g-ink);
  --lg-ink-soft: var(--g-ink-soft);
  --lg-secondary: var(--g-secondary);
  --lg-tertiary: var(--g-tertiary);
  --lg-accent: var(--g-accent);
  --lg-accent-deep: var(--g-accent-deep);
  --lg-accent-soft: var(--g-accent-soft);
  --lg-glass-bg: var(--g-surface);
  --lg-glass-bg-strong: var(--g-surface-strong);
  --lg-glass-border: var(--g-edge);
  --lg-hairline: var(--g-hairline);
  --lg-fill: var(--g-fill);
}

/* base.css fixa o body à altura do ecrã e sem scroll, porque as páginas
   da app fazem scroll dentro do próprio layout. Aqui é o documento que
   faz scroll — sem isto o texto ficava cortado no primeiro ecrã. */
body.legal {
  position: relative;
  height: auto;
  min-height: 100vh;
  overflow: auto;
  background: #eef0f4;
  color: var(--lg-ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", var(--font-sans);
}

/* O fundo com manchas de cor vem de glass.css (body::before). */

/* ---------- Cabeçalho flutuante ---------- */

/* Cartão de vidro afastado das margens (e da barra de estado do
   iPhone), que acompanha o scroll. */
.legal__header {
  position: sticky;
  top: calc(var(--sp-3) + env(safe-area-inset-top, 0px));
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: min(640px, calc(100% - 2 * var(--sp-3)));
  margin: calc(var(--sp-3) + env(safe-area-inset-top, 0px)) auto 0;
  padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-5);
  border: 1px solid var(--lg-glass-border);
  border-radius: 24px;
  background: var(--lg-glass-bg-strong);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  box-shadow: 0 14px 34px -20px rgba(20, 30, 60, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.legal__brand img { display: block; height: 26px; width: auto; }

.legal__back {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 38px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--lg-hairline);
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.6);
  color: var(--lg-ink-soft);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast);
}
.legal__back:hover { background: rgba(120, 120, 128, 0.12); color: var(--lg-ink); }

/* ---------- Abertura: marca, título, data e introdução ---------- */

.legal__main {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
  padding: var(--sp-12) var(--sp-4) calc(var(--sp-12) + env(safe-area-inset-bottom, 0px));
}

.legal__title {
  margin: 0 0 var(--sp-4);
  color: var(--lg-ink);
  font-size: clamp(32px, 7vw, 48px);
  font-weight: 750;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.legal__updated {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-5);
  padding: 5px 14px 5px 12px;
  border: 1px solid var(--lg-glass-border);
  border-radius: var(--r-full);
  background: var(--lg-glass-bg);
  color: var(--lg-secondary);
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 6px 16px -12px rgba(20, 30, 60, 0.3);
}
.legal__updated::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34c759;
}

.legal__lead {
  margin: 0 0 var(--sp-8);
  color: var(--lg-secondary);
  font-size: 17px;
  line-height: 1.65;
}

/* ---------- Texto corrido justificado ---------- */

.legal__lead,
.legal__section p,
.legal__section li,
.legal__footer {
  text-align: justify;
  text-justify: inter-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  /* Reparte as palavras pelas linhas do parágrafo todo (e não linha a
     linha), o que evita uma linha cheia de espaços antes de uma palavra
     longa que não se pode partir, como o domínio do site. */
  text-wrap: pretty;
}

/* Emails e endereços longos não têm onde partir: deixá-los quebrar
   evita linhas justificadas com espaços enormes. */
.legal__main a[href^="mailto:"],
.legal__main strong { overflow-wrap: anywhere; }

/* Nomes, domínios e emails não se hifenizam ("adminhotelso-lutions"). */
.legal__main a,
.legal__main strong {
  -webkit-hyphens: manual;
  hyphens: manual;
}

/* ---------- Cartões ---------- */

/* Sem backdrop-filter de propósito: o fundo atrás já está desfocado e
   uma página longa com muitos cartões desfocados fica pesada no scroll
   dos telemóveis mais antigos. */
.legal__card {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-6) var(--sp-6) var(--sp-6);
  border: 1px solid var(--lg-glass-border);
  border-radius: 22px;
  background: var(--lg-glass-bg);
  box-shadow: 0 16px 36px -26px rgba(20, 30, 60, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* ---------- Índice ---------- */

.legal__toc { margin-bottom: var(--sp-8); }

.legal__toc-title {
  margin: 0 0 var(--sp-3);
  color: var(--lg-tertiary);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.legal__toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: legal-toc;
  columns: 2;
  column-gap: var(--sp-4);
}

.legal__toc li {
  counter-increment: legal-toc;
  break-inside: avoid;
}

.legal__toc a {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 7px var(--sp-2);
  border-radius: 12px;
  color: var(--lg-ink-soft);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.legal__toc a::before {
  content: counter(legal-toc);
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--lg-fill);
  color: var(--lg-secondary);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: background var(--t-fast), color var(--t-fast);
}
.legal__toc a:hover { background: var(--lg-fill); color: var(--lg-ink); }
.legal__toc a:hover::before { background: var(--lg-accent); color: #fff; }

/* ---------- Secções ---------- */

.legal__section { scroll-margin-top: 100px; }

.legal__section h2 {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--lg-hairline);
  color: var(--lg-ink);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.legal__num {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--lg-accent-soft);
  color: var(--lg-accent-deep);
  font-size: 0.875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.legal__section h3 {
  margin: var(--sp-5) 0 var(--sp-2);
  color: var(--lg-tertiary);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.legal__section p,
.legal__section li {
  color: var(--lg-ink-soft);
  font-size: 15.5px;
  line-height: 1.7;
}

.legal__section p { margin: 0 0 var(--sp-3); }
.legal__section p:last-child { margin-bottom: 0; }

.legal__section ul {
  margin: 0 0 var(--sp-3);
  padding: 0;
  list-style: none;
}
.legal__section ul:last-child { margin-bottom: 0; }
.legal__section li {
  position: relative;
  padding-left: 20px;
}
.legal__section li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lg-accent);
  opacity: 0.55;
}
.legal__section li + li { margin-top: var(--sp-2); }

.legal__section a { color: var(--lg-accent-deep); }
.legal__section strong { color: var(--lg-ink); font-weight: 650; }

.legal__highlight {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border-radius: 14px;
  background: var(--lg-accent-soft);
}
.legal__section .legal__highlight { color: var(--lg-ink); }

/* ---------- Rodapé ---------- */

.legal__footer {
  margin: var(--sp-8) auto 0;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--lg-hairline);
  color: var(--lg-secondary);
  font-size: 13px;
  line-height: 1.6;
  text-align-last: center;
}

.legal__lead a,
.legal__footer a { color: var(--lg-accent-deep); font-weight: 600; }

/* ---------- Telemóvel ---------- */

@media (max-width: 640px) {
  .legal__main { padding-top: var(--sp-8); }
  .legal__card { padding: var(--sp-5) var(--sp-4); border-radius: 20px; }
  .legal__main { padding-left: var(--sp-3); padding-right: var(--sp-3); }
  .legal__toc ol { columns: 1; }
  .legal__lead { font-size: 16px; }
  .legal__section h2 { font-size: 19px; }
  .legal__section p,
  .legal__section li { font-size: 15px; }
}

@media (max-width: 380px) {
  .legal__brand img { height: 22px; }
  .legal__back { padding: 0 var(--sp-3); font-size: 13px; }
}

/* Nomes de marcas e serviços dentro do texto: nunca se partem com hífen. */
.legal__name {
  -webkit-hyphens: manual;
  hyphens: manual;
  white-space: nowrap;
}