/* ---- Layout ---- */
.wrap { width: min(1200px, 100% - var(--gutter) * 2); margin-inline: auto; }
.wrap--narrow { width: min(820px, 100% - var(--gutter) * 2); }
main > section { padding-block: var(--section); position: relative; z-index: 1; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--gold); color: #0B0B0B; padding: .75rem 1.25rem; border-radius: 0 0 10px 0;
}
.skip:focus { left: 0; }


/* ---- Superfície de vidro ---- */
.glass {
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  /* a sombra vem do tema: sutil e azulada no claro, profunda com brilho interno no navy */
  box-shadow: var(--shadow-card);
}
.glass--hover { transition: border-color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease); }
.glass--hover:hover { border-color: var(--line-strong); background: color-mix(in srgb, var(--surface-2) 82%, transparent); }

/* ---- Tipografia utilitária ---- */
.h-grad {
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand) 46%, var(--brand-lift) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.eyebrow {
  font-size: var(--step--1); font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-ink);
}
.lead { font-size: var(--step-1); color: var(--muted); font-weight: 400; }
.muted { color: var(--muted); }

.badge {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .5rem 1rem; border-radius: 999px;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 80%, transparent);
  backdrop-filter: blur(10px);
  font-size: var(--step--1); color: var(--muted); font-weight: 500;
}
.badge__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex: none; }

/* ---- Botões ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .95rem 1.6rem; border-radius: 999px; border: 1px solid transparent;
  font-weight: 600; font-size: var(--step-0); cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              background .25s var(--ease), border-color .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--gold {
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  color: #17130A;   /* contraste 11.4:1 sobre o dourado */
  box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--gold) 55%, transparent);
}
.btn--gold:hover { box-shadow: 0 14px 32px -10px color-mix(in srgb, var(--gold) 70%, transparent); }

.btn--ghost { background: transparent; border-color: var(--line-strong); color: var(--brand); }
.btn--ghost:hover { border-color: var(--brand); background: var(--brand-soft); }
.navy .btn--ghost { color: var(--ink); }
.navy .btn--ghost:hover { border-color: var(--gold); background: transparent; color: var(--gold); }

/* ---- Reveal ---- */
.js .reveal { opacity: 0; transform: translateY(12px); }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal.is-in { opacity: 1; transform: none; transition: none; }
}