/* Topo das páginas: cabeçalho fixo, bloco escuro inicial e ajustes de celular.
   Os estilos das páginas são inline, por isso as regras abaixo usam !important. */

:root {
  /* altura do cabeçalho fixo no carregamento: logo 64px (computador) ou botão de menu 48px (celular), + 2×16px + 3px da barra de progresso */
  --hdr: 99px;
  --safe-top: env(safe-area-inset-top, 0px);
  --topo-gap: 97px;                      /* espaço entre o cabeçalho e o início do texto */
  --topo-bottom: clamp(64px, 7vw, 96px); /* margem inferior do bloco escuro */
  --topo-min: 660px;                     /* altura mínima dos topos internos (cabe o conteúdo mais alto, Serviços) */
}
@media (max-width: 899.98px) {
  :root { --hdr: 83px; --topo-gap: 48px; --topo-bottom: 56px; --topo-min: 560px; }
}

/* cabeçalho respeita a área segura do aparelho */
[data-header] { padding-top: var(--safe-top) !important; }

/* topos internos: mesma altura mínima e o texto sempre começa na mesma posição */
[data-top] { min-height: var(--topo-min) !important; justify-content: flex-start !important; }
[data-top-inner] {
  padding-top: calc(var(--hdr) + var(--safe-top) + var(--topo-gap)) !important;
  padding-bottom: var(--topo-bottom) !important;
}

@media (max-width: 899.98px) {
  /* a arte das barras some no celular; o texto usa a largura toda */
  [data-top-inner] h1, [data-top-inner] p, [data-hero-text] h1, [data-hero-text] p { max-width: 100% !important; }
  /* Home: topo mais alto, mas o texto também começa abaixo do cabeçalho */
  [data-hero-text] { padding-top: calc(var(--hdr) + var(--safe-top) + var(--topo-gap)) !important; padding-bottom: var(--topo-bottom) !important; }
}

@media (max-width: 479.98px) {
  [data-top-inner] h1, [data-hero-text] h1 { font-size: clamp(26px, 7.6vw, 30px) !important; line-height: 1.15 !important; margin-bottom: 20px !important; }
  [data-top-inner] h1 + p[style*="font-size: 17px"], [data-hero-text] h1 + p { font-size: 15px !important; line-height: 1.65 !important; margin-bottom: 28px !important; }

  /* botão "Pedir orçamento" do cabeçalho inteiro dentro da tela */
  [data-header] > div:last-child { gap: 12px !important; }
  [data-cta] { font-size: 13px !important; padding: 12px 14px !important; white-space: nowrap; }
}

/* área segura do aparelho (viewport-fit=cover): elementos fixos não ficam sob o entalhe nem sob a barra inferior */
:root {
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}
[data-header] > div:last-child {
  padding-left: max(clamp(24px, 6vw, 120px), var(--safe-left)) !important;
  padding-right: max(clamp(24px, 6vw, 120px), var(--safe-right)) !important;
}
[data-menu] {
  padding-top: calc(24px + var(--safe-top)) !important;
  padding-bottom: calc(24px + var(--safe-bottom)) !important;
  padding-left: max(clamp(24px, 6vw, 120px), var(--safe-left)) !important;
  padding-right: max(clamp(24px, 6vw, 120px), var(--safe-right)) !important;
}
/* faixa de atalhos (Serviços, Privacidade) presa logo abaixo do cabeçalho */
[data-strip] { top: calc(var(--hdr) + var(--safe-top)) !important; }
/* botão flutuante do WhatsApp */
a[href^="https://wa.me"][style*="position: fixed"] {
  right: calc(24px + var(--safe-right)) !important;
  bottom: calc(24px + var(--safe-bottom)) !important;
}
#rodape > div:last-child { padding-bottom: calc(64px + var(--safe-bottom)) !important; }