.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: 52px; padding: 0 20px; border-radius: var(--raio-botao);
  font: 500 16px/1 var(--f-titulo); letter-spacing: .02em; white-space: nowrap;
  cursor: pointer; transition: background-color .3s, border-color .3s, transform .4s var(--ease);
}
.btn-azul { background: var(--azul); color: #fff; }
.btn-azul::after {
  content: ""; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .45s var(--ease);
}
.btn-azul:hover { background: #1F45E0; }
.btn-azul:hover::after { transform: translateX(3px); }
.btn-pequeno { height: 42px; padding: 0 16px; font-size: 14px; }
.btn-grande { height: 58px; padding: 0 26px; font-size: 17px; }
.link-seta {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 0;
  font: 500 16px/1 var(--f-titulo); letter-spacing: .02em;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size .5s var(--ease), color .3s;
}
.link-seta::after {
  content: ""; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M6 18L18 6M8 6h10v10'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M6 18L18 6M8 6h10v10'/%3E%3C/svg%3E") center / contain no-repeat;
}
.link-seta:hover { color: var(--azul-claro); background-size: 0 1px; background-position: 100% 100%; }
.luz { position: relative; }
.luz::before {
  content: ""; position: absolute; inset: -1px; z-index: 2; border-radius: inherit; padding: 1px; pointer-events: none;
  background: radial-gradient(280px circle at var(--mx, -999px) var(--my, -999px), rgba(108, 139, 255, .75), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .4s;
}
.luz:hover::before { opacity: 1; }
.titulo {
  font: 500 clamp(44px, 6vw, 96px)/1 var(--f-titulo);
  letter-spacing: -.015em; text-wrap: balance;
}
.cabeca {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); column-gap: 40px;
  align-items: end; margin-bottom: clamp(40px, 6vh, 64px);
}
.cabeca-texto { font: 400 19px/1.45 var(--f-titulo); letter-spacing: .02em; color: var(--suave); max-width: 42ch; padding-bottom: 10px; }
.navegador {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--borda-2); border-radius: 14px; background: #0B0B0C;
}
.nav-barra {
  flex: none; height: 44px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 16px; background: #111113; border-bottom: 1px solid var(--borda);
}
.nav-pontos { display: flex; gap: 7px; }
.nav-pontos i { width: 11px; height: 11px; border-radius: 50%; background: #2A2A2F; }
.nav-url {
  grid-column: 2; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-width: min(340px, 36vw); height: 28px; padding: 0 14px; border-radius: 8px;
  background: #0B0B0C; border: 1px solid var(--borda); font: 500 13px/1 var(--f-texto); color: var(--suave);
  white-space: nowrap;
}
.marca { display: inline-flex; align-items: center; gap: 9px; font: 600 20px/1 var(--f-titulo); letter-spacing: .01em; }
.marca-simbolo { flex: none; width: 26px; height: 26px; }
.marca-nome { flex: none; height: 26px; width: calc(26px * 205.3 / 36); overflow: visible; color: var(--texto); }
.raios { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.raios-fonte {
  position: absolute; right: -12%; top: -30%; width: 60%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(108, 139, 255, .30), rgba(47, 91, 255, .08) 40%, transparent 70%);
}
.raios i {
  position: absolute; right: 0; top: -10%; height: var(--w); width: 160%;
  transform-origin: 100% 50%; transform: rotate(var(--a));
  background: linear-gradient(270deg, rgba(190, 205, 255, .26), rgba(108, 139, 255, .10) 35%, transparent 75%);
  filter: blur(14px); mix-blend-mode: screen; opacity: .7;
}
@keyframes gira { to { transform: rotate(360deg); } }
@keyframes raio { from { transform: rotate(var(--a)); opacity: .35; } to { transform: rotate(calc(var(--a) + 5deg)); opacity: .85; } }
@keyframes pulsa { from { opacity: .7; transform: scale(1); } to { opacity: 1; transform: scale(1.08); } }
.titulo-medio { font-size: clamp(32px, 3.1vw, 50px); }
@keyframes marcha { to { stroke-dashoffset: -24; } }
.cabeca-texto b { font-weight: 400; color: var(--texto); }
.assinatura-foto, .hero-foto {
  display: block; border-radius: 50%;
  background: url(../assets/fotos/walace-rosto.webp) center / cover no-repeat, var(--sup-2);
}
@media (prefers-reduced-motion: no-preference) {
  .raios i { animation: raio 9s var(--ease-io) var(--d) infinite alternate; }
  .raios-fonte { animation: pulsa 7s var(--ease-io) infinite alternate; }
}
@media (max-width: 860px) {
  .marca { font-size: 18px; }
  .raios i { width: 260%; }
  .nav-barra { padding: 0 12px; height: 40px; }
  .nav-pontos i { width: 9px; height: 9px; }
  .nav-url { min-width: 0; font-size: 12px; }
  .cabeca { grid-template-columns: 1fr; row-gap: 18px; }
  .cabeca-texto { font-size: 17px; }
  .titulo { font-size: clamp(36px, 10vw, 56px); }
  .titulo-medio { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .link-seta { transition: none; }
}
