/*
 * MARCA — base visual compartilhada por todas as páginas do ecossistema.
 * Cores, tipografia, logo, botões e cartões. Nada específico de um produto.
 * Referência: docs/03-design-e-conteudo/guia-de-estilo.md
 */
:root {
  /* beges */
  --branco: #FFFFFF;
  --areia: #F4EFE6;
  --linho: #EAE0D0;
  --bege: #D9C7AD;
  /* dourados */
  --dourado-claro: #D8BC7E;
  --caramelo: #B08D57;
  --bronze: #8A6A35;
  /* verdes */
  --salvia-clara: #EEF1E7;
  --salvia: #A9B69A;
  --oliva: #6B7A56;
  --verde: #2F3B2C;
  --verde-fundo: #242E22;
  /* texto */
  --cafe: #2B2622;
  --texto2: #6B6055;

  --serifa: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --raio: 18px;
  --sombra: 0 18px 40px -24px rgba(43, 38, 34, .35);
  --largura: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--areia);
  color: var(--cafe);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--bronze); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

h1, h2, h3 { font-family: var(--serifa); font-weight: 500; line-height: 1.12; margin: 0; color: var(--cafe); text-wrap: balance; }
h1 { font-size: clamp(38px, 6.2vw, 62px); letter-spacing: -.01em; }
h2 { font-size: clamp(30px, 4.4vw, 44px); }
h3 { font-size: 23px; line-height: 1.2; }
em { font-style: italic; color: var(--bronze); }

.conteudo { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 20px; }
.secao { padding: clamp(64px, 9vw, 112px) 0; }
.centro { text-align: center; }
.apoio { color: var(--texto2); max-width: 62ch; }
.centro .apoio { margin-left: auto; margin-right: auto; }

/* sobretítulo em versalete */
.sobre {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--oliva); margin-bottom: 18px;
}
.sobre::before { content: ""; width: 28px; height: 1px; background: var(--caramelo); }
.centro .sobre::after { content: ""; width: 28px; height: 1px; background: var(--caramelo); }

/* logo oficial: asas + coroa (imagem usada como máscara; a cor vem do CSS) + nome em texto */
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--bronze); }
.logo__simbolo {
  display: block; flex: none; width: 66px; aspect-ratio: 480 / 278; background-color: currentColor;
  -webkit-mask: url(../img/logo-simbolo.png) center / contain no-repeat;
          mask: url(../img/logo-simbolo.png) center / contain no-repeat;
}
.logo__nome { display: flex; flex-direction: column; line-height: 1; }
.logo__nome b { font-family: var(--serifa); font-weight: 600; font-size: 17px; letter-spacing: .13em; white-space: nowrap; }
.logo__nome span { font-family: var(--sans); font-size: 8px; font-weight: 500; letter-spacing: .36em; margin-top: 6px; padding-left: 1px; white-space: nowrap; }
.logo--claro { color: var(--dourado-claro); }
/* versão empilhada (rodapé, página de obrigada) */
.logo--empilhado { flex-direction: column; gap: 14px; text-align: center; }
.logo--empilhado .logo__simbolo { width: 190px; }
.logo--empilhado .logo__nome { align-items: center; }
.logo--empilhado .logo__nome b { font-size: 25px; letter-spacing: .1em; }
.logo--empilhado .logo__nome span { font-size: 10px; letter-spacing: .4em; margin-top: 9px; padding-left: .4em; }

/* botões */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--bronze); color: #fff; text-decoration: none;
  font-weight: 600; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; text-align: center;
  padding: 18px 34px; border-radius: 100px; border: 0; cursor: pointer;
  box-shadow: 0 14px 28px -14px rgba(138, 106, 53, .8);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.botao:hover { background: #7A5C2C; transform: translateY(-2px); box-shadow: 0 18px 32px -14px rgba(138, 106, 53, .9); }
.botao:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--oliva); outline-offset: 3px; }
.botao--dourado { background: var(--dourado-claro); color: var(--verde-fundo); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .6); }
.botao--dourado:hover { background: #E4CB92; }
.botao--pequeno { padding: 12px 22px; font-size: 12px; box-shadow: none; }
.botao--whats { background: var(--oliva); box-shadow: none; text-transform: none; letter-spacing: 0; font-size: 15px; padding: 14px 24px; }
.botao--whats:hover { background: #5C6A49; }
.botao svg { width: 18px; height: 18px; fill: currentColor; flex: none; }

/* cartões */
.cartao {
  background: var(--branco); border: 1px solid var(--linho); border-radius: var(--raio);
  padding: 28px 26px;
}
.cartao h3 { margin-bottom: 8px; }
.cartao p { color: var(--texto2); font-size: 16px; }

/* ícone redondo */
.icone {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--salvia-clara); color: var(--oliva); margin-bottom: 18px;
}
.icone svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icone--dourado { background: #F6EEDD; color: var(--bronze); }

/* moldura em arco para fotos */
.arco { position: relative; isolation: isolate; }
.arco img { width: 100%; height: 100%; object-fit: cover; border-radius: 999px 999px var(--raio) var(--raio); }
.arco::before {
  content: ""; position: absolute; inset: -14px -14px 14px 14px; z-index: -1;
  border: 1px solid var(--caramelo); border-radius: 999px 999px var(--raio) var(--raio);
}

/* entrada suave (só quando o JS liga a classe .anima) */
.anima [data-revela] { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s ease; }
.anima [data-revela].visivel { opacity: 1; transform: none; }