/* Daniela Pereira Eventos: layout das páginas. Componentes, cores e medidas vêm de componentes.css e tokens.css
   (gerados do design system por ferramentas/sincronizar-design-system.py). Aqui fica só o que é de página. */

/* As fotos levam width e height no HTML (para reservar o espaço); a altura real vem do CSS de cada componente. */
img { max-width: 100%; height: auto; }
main:focus { outline: none; }
[hidden] { display: none !important; }
body.dp-sem-rolagem { overflow: hidden; }

.dp-pular { position: absolute; top: -100px; left: 16px; z-index: 60; padding: 12px 20px; background: var(--marrom); color: var(--branco); text-decoration: none; }
.dp-pular:focus { top: 16px; }

/* Cabeçalho fixo: as páginas reservam no topo o espaço dele (na home ele fica sobre o destaque,
   e a página Links não tem cabeçalho); âncoras param abaixo da versão compacta. */
html { scroll-padding-top: var(--altura-cabecalho-rolado); }
body { padding-top: var(--altura-cabecalho); }
body.pagina-home, body.pagina-links { padding-top: 0; }
@media (max-width: 1024px) { body { padding-top: var(--altura-cabecalho-tablet); } }
@media (max-width: 767px) { body { padding-top: var(--altura-cabecalho-celular); } html { scroll-padding-top: 80px; } }

/* Home: 30px entre o título Serviços, os cards e o botão */
.dp-servicos-home .dp-secao__pilha { gap: 30px; }

/* Página de uma galeria: 20px acima e abaixo, botão e fotos a 20px */
.dp-secao--galeria { padding-block: 20px; }
.dp-galeria-pagina { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 768px) { .dp-galeria-pagina { padding-inline: 10px; } }

/* Lista de galerias: no celular os cards ocupam a tela toda, como no site atual */
@media (max-width: 767px) {
  .pagina-galerias .dp-grade-galerias { margin-inline: calc(-1 * var(--margem-lateral)); }
}

/* Página de texto (política de privacidade e afins) */
.dp-texto--pagina { max-width: var(--largura-formulario); }
.dp-texto--pagina h2, .dp-texto--pagina h3 { margin: 30px 0 14.4px; font-family: var(--font-ageo); font-weight: 700; color: var(--texto); }
.dp-texto--pagina h2 { font-size: 24px; line-height: 30px; }
.dp-texto--pagina h3 { font-size: 20px; line-height: 26px; }