/*
  Regras globais realmente compartilhadas.
  Nada específico de uma seção deve viver aqui — ver assets/css/components/*.css.
*/

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--ink);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
}

img, video {
  max-width: 100%;
  display: block;
}

a {
  color: var(--green-hover);
  text-decoration: none;
}

a:hover {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Container estrutural: max-width 1440px + gutters responsivos (aprovado) */
.container {
  max-width: var(--max-w);
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

/*
  Compensa o header flutuante nas âncoras de navegação — exceto #topo:
  "Início" deve levar ao início real da página (scrollY 0), não a uma
  posição deslocada por um offset pensado para as demais âncoras.
*/
#equipamentos, #manutencao, #credibilidade, #contato {
  scroll-margin-top: 100px;
}

/*
  Âncoras dedicadas dos links "Manutenção" e "Credibilidade" do menu: em vez
  de rolar até o topo bruto da seção (o que deixa o Header sobrepondo o
  conteúdo), cada uma aponta para um sentinel de tamanho zero posicionado
  dentro de um ancestral já position:relative. scroll-margin-top usa o token
  real de altura/posição do Header (--header-clearance, em tokens.css) — não
  um número mágico.
*/
.scroll-anchor {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
}

/* Manutenção: sentinel no início do Letreiro -> destino final é Header fixo
   → borda inferior do Header → Letreiro completo → Manutenção logo abaixo,
   sem respiro extra (seções encostadas, conforme aprovado). */
#manutencao-anchor {
  scroll-margin-top: var(--header-clearance);
}

/* Credibilidade: sentinel alinhado ao topo real dos cards (a seção não tem
   padding própria — quem empurra o conteúdo para baixo é o padding-top de
   var(--gutter) do .credibilidade__grid; por isso top:var(--gutter) aqui,
   em vez do top:0 padrão). Destino final: Header fixo → ~28px de respiro →
   início dos cards (24-32px pedido). */
#credibilidade-anchor {
  top: var(--gutter);
  scroll-margin-top: calc(var(--header-clearance) + 28px);
}

/* Acessibilidade básica */
[role="button"]:focus {
  outline: none;
}

[role="button"]:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 6px;
}

/*
  CTA secundário — componente único compartilhado por Hero ("VER CATÁLOGO")
  e Equipamentos ("VER CATÁLOGO"): mesma altura, radius, padding, tipografia
  e dimensão de seta nos dois lugares. Só a cor muda por contexto (o Hero
  fica sobre foto/vídeo, Equipamentos sobre fundo claro) via o modificador
  --on-media. Deliberadamente abaixo dos CTAs primários preenchidos em
  verde (Solicitar orçamento / Falar sobre a linha).
*/
.cta-secondary {
  appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  border-radius: var(--radius-control);
  border: 1px solid var(--green);
  background: var(--bg-page);
  color: var(--green);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.cta-secondary:hover,
.cta-secondary:focus-visible {
  background: rgba(11, 107, 80, 0.06);
  border-color: var(--green-hover);
  color: var(--green);
  text-decoration: none;
}

.cta-secondary__arrow {
  line-height: 1;
}

/* Variante sobre foto/vídeo (Hero) — mesma estrutura, cores de contexto */
.cta-secondary--on-media {
  border-color: rgba(14, 22, 20, 0.24);
  background: rgba(255, 255, 255, 0.78);
  color: var(--ink);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.cta-secondary--on-media:hover,
.cta-secondary--on-media:focus-visible {
  background: #fff;
  border-color: var(--ink);
  color: var(--ink);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*
  prefers-reduced-motion: o Harmonizada só desliga as animações nomeadas
  (universoImgFade, refresqc-marquee) — não todas as transitions do site.
  Essa regra específica fica nos component CSS onde cada keyframe é declarado
  (equipamentos.css e letreiro.css), para não alterar comportamento aprovado
  fora dessas duas animações.
*/