/* Variante independente: somente a cor e o contraste da abertura. */
.hero {
  background: radial-gradient(ellipse at 0 55%,#123c64 0,transparent 48%),var(--deep);
}
.hero h1,
.hero .hero-description-lead,
.hero .hero-description strong {
  color: #ffffff;
}
.hero .hero-copy > .eyebrow,
.hero .hero-description,
.hero .button-note {
  color: #d8e5f5;
}
.hero .button-note svg {
  color: #ffb577;
}
.hero .portrait-word {
  color: rgba(255, 255, 255, 0.055);
}
.hero .portrait-halo {
  border-color: rgba(255, 255, 255, 0.1);
  background: radial-gradient(ellipse at 60% 50%, rgba(157, 193, 237, 0.14), transparent 65%);
}
.hero .portrait-halo::after {
  border-color: rgba(255, 255, 255, 0.07);
}
.hero .hero-copy :focus-visible {
  outline-color: #ffffff;
}

/* Menu e cartões com vidro leve sobre o azul da abertura. */
.header {
  background: linear-gradient(110deg, rgba(255,255,255,.035), rgba(255,255,255,.01)), var(--deep);
  border-bottom-color: rgba(255,255,255,.1);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
  backdrop-filter: blur(12px) saturate(115%);
}
.header .navigation > a { color: #f2f6fc; }
.header .navigation > a:hover { color: #ffb577; }
.header .navigation .nav-cta {
  color: #ffffff;
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.22);
}
.header .navigation .nav-cta:hover {
  color: #ffffff;
  background: rgba(255,255,255,.1);
  border-color: rgba(245,130,43,.6);
}
.header .brand { position: relative; }
.header .brand img { filter: brightness(0) invert(1); }
/* A mesma logo em branco; a máscara preserva o E laranja da marca. */
.header .brand::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--orange);
  -webkit-mask: url('assets/logo-compact.webp') center / 100% 100% no-repeat;
  mask: url('assets/logo-compact.webp') center / 100% 100% no-repeat;
  clip-path: inset(0 57% 22% 24%);
  pointer-events: none;
}
.header :focus-visible { outline-color: #ffb577; }
.hero .portrait-chip,
.hero .portrait-name {
  color: #f5f8fd;
  background: rgba(255,255,255,.085);
  border-color: rgba(255,255,255,.2);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  backdrop-filter: blur(10px) saturate(115%);
  box-shadow: 0 12px 28px rgba(0,12,29,.12), inset 0 1px 0 rgba(255,255,255,.045);
}
.hero .portrait-name strong { color: #ffffff; }
.hero .portrait-name span { color: #d8e5f5; }
.hero .chip-icon {
  color: #ffb577;
  background: rgba(245,130,43,.15);
}
@media (max-width: 700px) {
  /* O painel aberto desfoca a página sem uma camada intermediária. */
  .header {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .header .menu-toggle {
    background: rgba(255,255,255,.065);
    border-color: rgba(255,255,255,.22);
  }
  .header .menu-toggle span { background: #f5f8fd; }
  .header .navigation {
    background: rgba(8,31,61,.92);
    border-bottom-color: rgba(255,255,255,.18);
    -webkit-backdrop-filter: blur(12px) saturate(115%);
    backdrop-filter: blur(12px) saturate(115%);
    box-shadow: 0 16px 30px rgba(0,12,29,.16);
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero .portrait-chip,
  .hero .portrait-name { background: rgba(8,31,61,.92); }
}
@media (prefers-reduced-transparency: reduce) {
  .hero .portrait-chip,
  .hero .portrait-name,
  .header .navigation { background: #102b4c; }
}