/* Acrescentar Software — Paleta de Marca */
:root{
  --bg: #ffffff;
  --text: #0F172A;
  --muted: #6F859D;
  --brand: #012F60;
  --accent: #012F60;
  --surface: #E1ECF3;
  --border:#e5e7eb;
  --brand-dark: #012F5E;
}

/* Hero com gradiente nas cores da marca */
.hero{
  background:
    radial-gradient(1200px 400px at 20% -10%, color-mix(in oklab, var(--brand) 25%, transparent), transparent 55%),
    radial-gradient(1200px 400px at 100% 0%, color-mix(in oklab, var(--brand-dark) 20%, transparent), transparent 55%);
}

/* Variante: aplicar padronagem com o arquivo bg-plus.jpg */
.hero.pattern{
  background:
    url('bg-plus.jpg') repeat,
    radial-gradient(1200px 400px at 20% -10%, color-mix(in oklab, var(--brand) 25%, transparent), transparent 55%);
  background-size: 280px auto, auto;
}

/* Links do menu ao passar mouse */
nav a:hover,
nav a.active{
  background: color-mix(in oklab, var(--brand) 15%, white);
  color: var(--brand);
}

/* === Legibilidade no hero com padronagem === */
.hero.pattern{
  position: relative;
  color: #fff;
}
.hero.pattern::before{
  content: "";
  position: absolute;
  inset: 0;
  /* sobreposição escura baseada no brand_dark */
  background: linear-gradient(
      to bottom,
      color-mix(in oklab, var(--brand-dark) 70%, transparent) 0%,
      color-mix(in oklab, var(--brand-dark) 70%, transparent) 100%
    );
  opacity: .82; /* força contraste sem apagar o padrão */
  pointer-events: none;
  z-index: 0;
}
.hero.pattern > *{ position: relative; z-index: 1; }
.hero.pattern h2{
  color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
}
.hero.pattern p{
  color: rgba(255,255,255,.88);
}