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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--fonte-texto);
  font-size: var(--t-texto);
  line-height: 1.55;
  color: var(--texto);
  background: var(--branco-quente);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

::selection { background: var(--laranja); color: var(--branco); }
html { scrollbar-color: var(--areia) var(--branco-quente); caret-color: var(--laranja); }

h1, h2 {
  font-family: var(--fonte-titulo);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.01em;
  color: var(--marrom);
  text-wrap: balance;
}
h3 { font-size: var(--t-h3); font-weight: 700; line-height: 1.3; color: var(--marrom); }
p { text-wrap: pretty; }

.so-pc { display: none !important; }
@media (min-width: 641px) { .so-pc { display: inline !important; } .so-celular { display: none !important; } }

.icone { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- BOTÕES ---------- */
.botao {
  position: relative;
  display: inline-flex; align-items: center; gap: .85rem;
  max-width: 100%;
  padding: .5rem .5rem .5rem 1.4rem;
  border-radius: var(--raio-botao);
  font: 600 var(--t-botao)/1.2 var(--fonte-texto);
  white-space: nowrap;
  color: var(--branco);
  background: var(--marrom);
  overflow: hidden; isolation: isolate;
  transition: color var(--rapido) var(--curva);
}
/* fundo que preenche da esquerda, como fio puxado */
.botao::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--laranja-vivo);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--medio) var(--curva);
}
.botao__icone {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; flex: none;
  border-radius: 50%;
  background: var(--branco); color: var(--marrom);
  transition: transform var(--medio) var(--curva);
}
.botao__icone .icone { width: 1.15rem; height: 1.15rem; stroke-width: 2; }
.botao:hover::before, .botao:focus-visible::before { transform: scaleX(1); }
.botao:hover, .botao:focus-visible { color: var(--quase-preto); }
.botao--vazado:hover, .botao--vazado:focus-visible { color: var(--creme); }
.botao:hover .botao__icone, .botao:focus-visible .botao__icone { transform: rotate(45deg); }
.botao:focus-visible { outline: 2px solid var(--laranja); outline-offset: 3px; }

.botao--vivo { background: var(--laranja-vivo); color: var(--quase-preto); }
.botao--vivo::before { background: var(--branco); }
.botao--vivo .botao__icone { background: var(--quase-preto); color: var(--laranja-vivo); }

.botao--vazado {
  background: transparent; color: var(--creme);
  border: 1px solid rgb(237 225 209 / .35);
  padding: .95rem 1.4rem;
}
.botao--vazado::before { background: rgb(237 225 209 / .12); }
.botao--vazado:hover { border-color: rgb(237 225 209 / .7); }

/* ---------- ENTRADA AO ROLAR (só com JS) ---------- */
.anim-pronta .surge { opacity: 0; transform: translateY(18px); transition: opacity var(--medio) var(--curva), transform var(--medio) var(--curva); }
.anim-pronta .surge.visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .anim-pronta .surge { opacity: 1; transform: none; transition: none; }
  .botao::before, .botao__icone { transition: none; }
}