/* Página "Política de Privacidade" — Figma: "Política de Privacidade - Desktop" (318:106) e "Política de Privacidade - Mobile 375" (322:29).
   Tudo aqui vale só nesta página (body.page-policy): a Home não muda.
   Desktop (≥ 1024px, o mesmo ponto em que o header da Home vira desktop): duas colunas — esquerda "sticky", direita rola.
   Mobile: uma coluna, topo centralizado. Tamanhos do Figma, sem escala fluida. */

/* O header fixo e o espaçamento para ele (padding-top do body, scroll-padding-top) já são
   globais — ver base.css e header.css. --header-h também é global (tokens.css). Aqui fica só
   o que é específico da coluna esquerda "sticky" desta página. */
.page-policy {
  --policy-sticky-top: calc(var(--header-h) + 24px);
}

.policy {
  padding-block: 40px 48px;
}

/* Abaixo de 1024px o Figma só tem o mobile de 375px: coluna de até 600px, à esquerda como as outras sections */
.policy__inner {
  max-width: 600px;
}

/* ---------- Topo: data, título e contato (alinhado à esquerda também no mobile) ---------- */

.policy__side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}

.policy__title-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.policy__updated {
  color: var(--texto-apoio);
  font-size: 16px;
  line-height: 24px;
}

.policy__title {
  color: var(--texto-titulo);
  font-family: var(--fonte-titulo);
  font-size: 36px;
  font-weight: 600;
  line-height: 44px;
  letter-spacing: -0.01em;
}

.policy__contact-block {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.policy__contact-text {
  color: var(--texto-corpo);
  font-size: 18px;
  line-height: 28px;
}

/* O texto do parágrafo de contato é diferente no mobile e no desktop (Figma) */
.policy__contact-desktop {
  display: none;
}

.policy__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  color: var(--texto-apoio);
  font-size: 18px;
  line-height: 28px;
}

.policy__contact li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.policy__contact img {
  flex: none;
  width: 20px;
  height: 20px;
}

/* Filete: no mobile é horizontal; no desktop vira o filete vertical entre as colunas */
.policy__rule {
  height: 1px;
  margin-top: 40px;
  background: color-mix(in srgb, var(--borda-padrao) 60%, transparent);
}

/* ---------- Política (uma coluna) ---------- */

.policy__body {
  margin-top: 40px;
  color: var(--texto-corpo);
  font-size: 18px;
  line-height: 28px;
}

.policy__body p,
.policy__body ul,
.policy__lines {
  margin-top: 20px;
}

.policy__body .policy__intro p:first-child {
  margin-top: 0;
}

.policy__body h2 {
  margin-top: 40px;
  color: var(--texto-titulo);
  font-family: var(--fonte-titulo);
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: -0.005em;
}

/* Itens colados uns nos outros, com marcador de 6px (como no Figma) */
.policy__body li {
  position: relative;
  padding-left: 20px;
}

.policy__body li::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--texto-corpo);
}

.policy__body strong {
  font-weight: 600;
}

.policy__body .policy__lines p {
  margin-top: 8px;
}

.policy__body .policy__lines p:first-child {
  margin-top: 0;
}

/* ---------- Desktop (≥ 1024px): esquerda sticky | filete | direita ---------- */

@media (min-width: 1024px) {
  .page-policy {
    /* As colunas começam 64px abaixo do header; a coluna esquerda fica presa exatamente onde começa */
    --policy-sticky-top: calc(var(--header-h) + 64px);
  }

  .policy {
    padding-block: 64px 128px;
  }

  .policy__contact-mobile {
    display: none;
  }

  .policy__contact-desktop {
    display: inline;
  }

  /* 344 | 64 | 1 | 64 | resto (Figma: 631 na base de 1104). A coluna de texto vai até a borda direita do
     container, o mesmo eixo do botão "Fale com a Alado" do Header (como na referência), e encolhe em
     containers menores (1024px). Em 1200px continua sendo os 631px do Figma. */
  .policy__inner {
    display: grid;
    grid-template-columns: 344px 1px minmax(0, 1fr);
    column-gap: 64px;
    align-items: start;
    max-width: none;
  }

  /* Largura máxima do texto: o que sobra no container de 1344px depois de 344 + 64 + 1 + 64 */
  .policy__body {
    max-width: calc(var(--container-max) - 473px);
  }

  /* Sticky (não fixed): fica presa dentro da grade, que termina onde termina o texto,
     então para antes do rodapé e nunca o cobre. */
  .policy__side {
    position: sticky;
    top: var(--policy-sticky-top);
    gap: 48px;
  }

  .policy__title {
    font-size: 56px;
    line-height: 64px;
    letter-spacing: -0.015em;
  }

  /* Filete vertical: começa 12px abaixo do topo das colunas e tem 1200px de altura (Figma);
     em telas mais altas que isso acompanha a altura da janela */
  .policy__rule {
    position: sticky;
    top: calc(var(--policy-sticky-top) + 12px);
    width: 1px;
    height: max(1200px, calc(100vh - var(--policy-sticky-top) - 12px));
    margin-top: 12px;
  }

  .policy__body {
    margin-top: 0;
    font-size: 20px;
    line-height: 32px;
  }

  .policy__body p,
  .policy__body ul,
  .policy__lines {
    margin-top: 24px;
  }

  .policy__body h2 {
    margin-top: 48px;
    font-size: 32px;
    line-height: 40px;
  }

  .policy__body li {
    padding-left: 24px;
  }

  .policy__body li::before {
    top: 13px;
  }
}

/* Janelas muito baixas: a coluna fixa não caberia inteira e ficaria cortada; volta ao fluxo normal */
@media (min-width: 1024px) and (max-height: 640px) {
  .policy__side,
  .policy__rule {
    position: static;
  }

  .policy__rule {
    align-self: stretch;
    height: auto;
  }
}