/* page.css — páginas de texto (/about/, /privacy/)
   Carregado só por essas duas páginas. Não toca em nada da landing page:
   herda `styles.css` (variáveis, cabeçalho, rodapé, .wrap) e acrescenta a
   medida de leitura e o ritmo vertical que um texto corrido precisa. */

.page-plain{
  background: var(--ink);
  color: var(--bone);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.page-plain .site-header{ position: static; }
.page-main{ flex: 1 0 auto; padding: clamp(48px, 9vh, 104px) 0 clamp(56px, 10vh, 120px); }

.page-wrap{ max-width: min(72ch, 100%); }

.page-wrap .eyebrow{
  font: 500 12px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--amber-deep);
  margin: 0 0 18px;
}

.page-title{
  font-size: clamp(30px, 5vw, 52px);
  line-height: 1.06;
  letter-spacing: -.022em;
  margin: 0 0 clamp(20px, 3vh, 32px);
  text-wrap: balance;
}

.page-lede{
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.6;
  color: var(--bone-dim);
  margin: 0 0 clamp(32px, 5vh, 52px);
}

.page-wrap h2{
  font-size: clamp(18px, 2vw, 22px);
  letter-spacing: -.012em;
  margin: clamp(30px, 5vh, 46px) 0 10px;
}
.page-wrap h2::before{
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  background: var(--amber);
  margin-bottom: 14px;
}

.page-wrap p{ font-size: 16px; line-height: 1.72; margin: 0 0 14px; }

.page-updated{
  margin-top: clamp(36px, 6vh, 56px);
  padding-top: 18px;
  border-top: 1px solid var(--ink-3);
  font-size: 13px !important;
  color: var(--bone-faint);
}

.page-cta{ margin-top: clamp(36px, 6vh, 56px); }
.page-btn{
  display: inline-block;
  padding: 13px 24px;
  border-radius: 999px;
  background: var(--amber-deep);   /* 4,8:1 com o branco; o --amber dava 3,3:1 */
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  transition: background .18s ease, transform .18s ease;
}
.page-btn:hover,
.page-btn:focus-visible{ background: #8a4a29; transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce){
  .page-btn{ transition: none; }
  .page-btn:hover,
  .page-btn:focus-visible{ transform: none; }
}

/* Abaixo de 820px o `finish.css` transforma a navegação num painel
   `position:absolute` que só abre com a classe `.is-open`, posta pelo botão
   "Menu" da landing page. Estas páginas não carregam esse JS, por isso um
   simples `display:flex` deixaria o painel aberto por cima do título — foi
   exactamente o que aconteceu à primeira tentativa. São três links curtos:
   em vez de reabrir o painel, desmonta-se o painel e volta a ser uma linha. */
@media (max-width: 820px){
  .page-plain .site-nav{
    display: flex !important;
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    order: 3;
    width: 100%;
    padding: 10px 0 0;
    background: none;
    border-bottom: 0;
    border-top: 1px solid var(--ink-3);
    font-size: 13px;
  }
  .page-plain .site-header .wrap{ flex-wrap: wrap; row-gap: 4px; }
  .page-plain .menu-toggle{ display: none !important; }
}

/* lista do resumo da política de privacidade (2026-10-09) */
.page-list{ list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 12px; }
.page-list li{ position: relative; padding-left: 26px; }
.page-list li::before{
  content: ""; position: absolute; left: 0; top: .72em;
  width: 12px; height: 1px; background: var(--amber, #c8794f);
}
.page-main code{ font: 500 .86em/1 var(--ff-mono, ui-monospace, monospace); padding: 2px 5px; border-radius: 4px; background: rgba(43,39,36,.07); }

/* Acessibilidade (Lighthouse, 2026-10-10): três textos abaixo de 4.5:1
   sobre o creme (eyebrow 4.2, data de atualização e © 2.5) e os idiomas do
   cabeçalho com 11×12px de alvo (mínimo 24×24, WCAG 2.5.8). */
.page-plain .page-wrap .eyebrow{ color: #8a4a29; }
.page-plain .page-updated,
.page-plain .site-footer .fnote{ color: #6b665f; }
.page-plain .lang-switch a{
  min-width: 24px; min-height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Auditoria de 2026-10-21 (WCAG 2.5.8): as ligações do rodapé tinham 12px de
   altura. O preenchimento alarga a área de toque e a margem negativa devolve
   o mesmo espaço ao alinhamento: nada se mexe no desenho. */
.page-plain .site-footer nav a,
.page-plain .site-footer nav .rodape-link-btn{ padding-block: 6px; margin-block: -6px; }