*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topo-altura) + 12px);
}

html.sem-rolagem {
  overflow: hidden;
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
p,
ol,
ul,
dl,
dd,
figure {
  margin: 0;
}

h1,
h2,
h3 {
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.08;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--roxo-claro);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection {
  background: rgba(176, 77, 255, 0.45);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.secao {
  position: relative;
  padding-block: clamp(72px, 11vw, 140px);
}

.secao__cabecalho {
  max-width: 720px;
  margin-bottom: clamp(36px, 6vw, 64px);
}

.secao__cabecalho--centro {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--roxo-claro);
}

.titulo-secao {
  font-size: clamp(2rem, 5.2vw, 3.5rem);
}

.subtitulo-secao {
  margin-top: 16px;
  font-size: clamp(1.02rem, 1.8vw, 1.2rem);
  color: var(--texto-suave);
}

.texto-degrade {
  background: var(--texto-degrade);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.texto-suave {
  color: var(--texto-suave);
  font-weight: 400;
}

.aviso {
  font-size: 0.86rem;
  color: var(--texto-suave);
}

/* Botões */
.botao {
  --altura: 48px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--altura);
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.2s var(--ease), box-shadow 0.25s var(--ease), background 0.25s, border-color 0.25s,
    opacity 0.2s;
}

.botao:active {
  transform: scale(0.98);
}

.botao:disabled {
  opacity: 0.45;
  pointer-events: none;
}

.botao svg {
  width: 20px;
  height: 20px;
  flex: none;
}

.botao--primario {
  background: var(--marca);
  color: #fff;
  box-shadow: 0 10px 30px -12px rgba(106, 31, 224, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.botao--primario:hover {
  background: var(--marca-hover);
  box-shadow: 0 14px 38px -12px rgba(140, 60, 255, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.botao--secundario {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--borda-forte);
  color: var(--texto);
}

.botao--secundario:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.32);
}

.botao--whatsapp {
  background: var(--whatsapp);
  color: #04210f;
}

.botao--whatsapp:hover {
  background: #3be07a;
}

.botao--grande {
  --altura: 56px;
  padding: 0 34px;
  font-size: 1.05rem;
}

.botao--pequeno {
  --altura: 38px;
  padding: 0 18px;
  font-size: 0.88rem;
}

.botao--bloco {
  width: 100%;
}

.link-botao {
  padding: 4px 2px;
  border: 0;
  background: none;
  color: var(--roxo-claro);
  font-size: 0.88rem;
  font-weight: 600;
}

.link-botao:hover {
  text-decoration: underline;
}

/* Seletores de cor e capacidade */
.seletor-cores {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.bolinha {
  display: inline-block;
  width: 24px;
  height: 24px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--cor);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 -6px 10px rgba(0, 0, 0, 0.25);
  outline: 1.5px solid transparent;
  outline-offset: 4px;
  transition: transform 0.2s var(--ease), outline-color 0.2s;
}

.bolinha--grande {
  width: 32px;
  height: 32px;
}

button.bolinha:hover {
  transform: scale(1.1);
}

.bolinha[aria-checked="true"],
.opcao input:checked + .opcao__caixa .bolinha {
  outline-color: rgba(255, 255, 255, 0.75);
}

.seletor-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  padding: 7px 14px;
  border: 1px solid var(--borda-forte);
  border-radius: 999px;
  background: transparent;
  color: var(--texto-suave);
  font-size: 0.82rem;
  font-weight: 500;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.chip:hover {
  border-color: rgba(255, 255, 255, 0.34);
  color: var(--texto);
}

.chip[aria-checked="true"] {
  border-color: var(--roxo-claro);
  background: rgba(176, 77, 255, 0.14);
  color: #fff;
}

.selo {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border: 1px solid var(--borda-forte);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.selo-desconto {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(52, 210, 123, 0.14);
  color: var(--sucesso);
  font-style: normal;
  font-size: 0.78em;
  font-weight: 600;
}

.giro {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: girar 0.8s linear infinite;
}

.giro--grande {
  width: 38px;
  height: 38px;
  border-width: 3px;
}