*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--noite);
  color: var(--marfim);
  font: 400 var(--t-16)/1.6 var(--fonte-texto);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, canvas { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration-color: var(--linha); text-underline-offset: .25em; }
h1, h2, h3, p, ul, ol, figure, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
::selection { background: var(--champanhe); color: var(--noite); }

:focus-visible { outline: 2px solid var(--champanhe); outline-offset: 3px; border-radius: 4px; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pular {
  position: fixed; left: var(--e-16); top: -100px; z-index: calc(var(--z-toast) + 1);
  background: var(--champanhe); color: var(--noite); padding: var(--e-12) var(--e-16); border-radius: var(--pilula);
}
.pular:focus { top: var(--e-16); }

.display {
  font-family: var(--fonte-display);
  font-weight: 400;
  line-height: .95;
  letter-spacing: .01em;
}
.rotulo {
  font-size: var(--t-12);
  font-weight: 500;
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--champanhe);
}
.apoio { color: var(--taupe); }
.conteudo { width: min(1240px, 100% - 2 * var(--margem)); margin-inline: auto; }

/* botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-8);
  min-height: var(--alvo); padding: 0 var(--e-24);
  border-radius: var(--pilula); border: 1px solid var(--champanhe);
  font-size: var(--t-14); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  color: var(--champanhe); background: transparent;
  transition: background var(--d-controle) var(--curva), color var(--d-controle) var(--curva), transform var(--d-controle) var(--curva);
}
.btn:hover { background: rgba(201, 164, 106, .12); }
.btn--principal { background: var(--champanhe); color: var(--noite); }
.btn--principal:hover { background: var(--champanhe-claro); }
.btn--principal:active { transform: scale(.98); }
.btn[aria-disabled="true"] { background: transparent; color: var(--taupe); border-color: var(--linha-fraca); cursor: not-allowed; }
.btn--largo { width: 100%; }
.btn .icone { width: 20px; height: 20px; }

.link-seta { display: inline-flex; align-items: center; gap: var(--e-8); color: var(--marfim); text-decoration: none; font-size: var(--t-14); letter-spacing: .06em; }
.link-seta .icone { width: 18px; height: 18px; color: var(--champanhe); transition: transform var(--d-controle) var(--curva); }
.link-seta:hover .icone { transform: translateX(4px); }

.icone { width: 22px; height: 22px; flex: none; }

.logo { display: inline-flex; flex-direction: column; align-items: center; color: var(--champanhe); line-height: 1; }
.logo__nome { font-family: var(--fonte-display); font-size: 1.45rem; letter-spacing: .14em; }
.logo .onda { width: 78%; height: 8px; margin-top: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}