/* mesma troca da home (css/fim.css): o display da casa é Fraunces */
:root { --font-display: "Fraunces", Georgia, serif; }

/* ARTEN — páginas de ponto (/ponto/{slug}).
   Layout editorial simples sobre fundo escuro, o mesmo par do provador
   (surface-inverse / text-inverse). Nada de cor nova: só tokens.
   Sem JS: a página é HTML e imagem, nada aqui espera script. */

.ponto {
  background: var(--surface-inverse);
  color: var(--text-inverse);
  min-height: 100vh;
}

/* ---- Topo: só a volta pra casa. Alvo de toque de 44px ---------------- */
.ponto__topo {
  padding: var(--space-4) var(--gutter);
}
.ponto__voltar {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  color: var(--text-inverse);
  text-decoration: none;
  font-size: var(--text-subtitle);
}

/* ---- Miolo: coluna larga, com o filete camelo da casa no alto ------- */
.ponto__miolo {
  padding: var(--space-8) var(--gutter) var(--section-y);
}
.ponto__envelope {
  max-width: var(--container);
  margin-inline: auto;
  padding-top: var(--space-3);
  border-top: var(--rule-camelo) solid var(--accent);
}
.ponto__titulo {
  font-size: var(--text-display);
  line-height: var(--leading-display);
  margin-block: var(--space-8) var(--space-6);
}
.ponto__texto {
  display: grid;
  gap: var(--space-4);
  max-width: var(--measure);
  font-size: var(--text-subtitle);
  line-height: var(--leading-body);
}
.ponto__texto p { color: var(--text-muted-inverse); }
/* o primeiro parágrafo é o do ponto; ele sobe um degrau de contraste */
.ponto__texto p:first-child { color: var(--text-inverse); }

.ponto__secao { margin-top: var(--space-16); }
.ponto__subtitulo {
  font-size: var(--text-title);
  margin-bottom: var(--space-6);
}
.ponto__linha {
  margin-bottom: var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-muted-inverse);
}
h3.ponto__linha { font-weight: var(--weight-medium); }
.ponto__grupo + .ponto__grupo { margin-top: var(--space-12); }

/* ---- Grades: 2 colunas no celular, 4 no desktop ----------------------- */
.ponto__cores,
.ponto__detalhes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
.ponto__cor figure,
.ponto__detalhe figure { margin: 0; }
/* as fotos de still têm fundo claro: sem moldura, a peça é o quadro */
.ponto__cor img,
.ponto__detalhe img {
  width: 100%;
  height: auto;
}
.ponto__cor figcaption,
.ponto__detalhe figcaption {
  padding-top: var(--space-2);
  font-size: var(--text-caption);
  color: var(--text-muted-inverse);
}

/* ---- Pedido ----------------------------------------------------------- */
.ponto__preco {
  font-family: var(--font-display);
  font-size: var(--text-title);
}
.ponto__tamanhos {
  margin-top: var(--space-2);
  color: var(--text-muted-inverse);
}
.ponto__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: var(--space-6);
  padding: var(--space-3) var(--space-6);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  transition: opacity var(--duration-hover) var(--ease-editorial);
}
.ponto__cta:hover { opacity: .78; }

/* ---- Rodapé ----------------------------------------------------------- */
.ponto__rodape {
  padding: var(--space-8) var(--gutter) var(--space-12);
  border-top: var(--rule-camelo) solid var(--accent);
  max-width: var(--container);
  margin-inline: auto;
  font-size: var(--text-caption);
  color: var(--text-muted-inverse);
}
.ponto__outros-titulo { margin-bottom: var(--space-2); }
.ponto__outros ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
}
.ponto__rodape a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-inverse);
}
.ponto__legal { margin-top: var(--space-4); }

@media (min-width: 810px) {
  .ponto__cores,
  .ponto__detalhes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}