/* ================= BUTTONS ================= */
/* Componente de botão reutilizado em nav, hero, contato e rodapé. */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1.75rem;
  border-radius: 999px;
  font-family: var(--font-sub);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: all .25s var(--ease-out);
  position: relative;
  overflow: hidden;
}
/* Reset para quando .btn é aplicado a um <button> (ex.: envio de formulário)
   em vez de um <a> — remove a borda/cursor/fonte padrão do navegador. */
button.btn {
  border: none;
  cursor: pointer;
  font-family: var(--font-sub);
}

.btn--red {
  background: var(--red);
  color: #fff;
}
.btn--red::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .12);
  transform: translateX(-100%) skewX(-15deg);
  transition: transform .4s var(--ease-out);
}
.btn--red:hover::before {
  transform: translateX(120%) skewX(-15deg);
}
.btn--red:hover {
  box-shadow: 0 0 28px var(--red-glow), 0 4px 12px rgba(0, 0, 0, .4);
  transform: translateY(-1px);
}

.btn--ghost {
  border: 1px solid rgba(255, 255, 255, .15);
  color: #fff;
  background: rgba(255, 255, 255, .04);
}
.btn--ghost:hover {
  border-color: rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .08);
}

/* ================= SKIP LINK ================= */
/* Fica fora da tela até receber foco de teclado — não altera o layout
   visual padrão, apenas oferece um atalho de acessibilidade ao navegar via Tab. */
.skip-link {
  position: absolute;
  top: -999px;
  left: 0;
  z-index: 1000;
  padding: .85rem 1.5rem;
  background: var(--red);
  color: #fff;
  font-family: var(--font-sub);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus {
  top: 0;
}

/* ================= FOCUS VISIBLE ================= */
/* Contorno de foco consistente para navegação por teclado, sem afetar
   o clique com mouse (:focus-visible não é acionado por ponteiro). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}