/* Tokens do Edificado — paleta tirada do retrato da Paty: blazer de linho, mármore, metal dourado. */
:root {
  --linho: #FAF7F2;
  --cal: #FFFFFF;
  --pedra: #E6DDD0;
  --pedra-2: #D6CABA;
  --areia: #B9AB98;
  --mel: #A87A32;
  --oliva: #56603F;
  --oliva-2: #6E7A55;
  --cafe: #2A201A;
  --texto: #2A201A;
  --texto-2: #6B5E52;
  --fio: #E3D9CB;
  --erro: #9A3B2E;

  --display: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --corpo: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  --r-pilula: 999px;
  --r-pedra: 6px;
  --medida: 34rem;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--linho); color: var(--texto);
  font: 400 1.0625rem/1.65 var(--corpo); -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 650; line-height: 1.12; letter-spacing: -0.015em; margin: 0; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--mel); outline-offset: 3px; border-radius: 4px; }

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 3.25rem; padding: 0 1.6rem; border: 0; border-radius: var(--r-pilula);
  background: var(--cafe); color: var(--linho); font: 600 1rem/1 var(--corpo);
  text-decoration: none; cursor: pointer; transition: background .2s, transform .2s;
}
.botao:hover { background: #45362C; }
.botao:active { transform: translateY(1px); }
.botao.claro { background: var(--cal); color: var(--cafe); box-shadow: inset 0 0 0 1px var(--fio); }
.botao.claro:hover { background: var(--linho); }
.botao.oliva { background: var(--oliva); }
.botao.oliva:hover { background: #47502F; }
.botao[disabled] { opacity: .5; cursor: default; }

.campo { display: block; width: 100%; padding: .85rem 1rem; border: 1px solid var(--pedra-2); border-radius: 10px; background: var(--cal); color: var(--texto); font: inherit; }
.campo:focus { outline: none; border-color: var(--mel); box-shadow: 0 0 0 3px rgba(168, 122, 50, .18); }
textarea.campo { resize: vertical; min-height: 7rem; line-height: 1.55; }

/* Arco das 31 pedras */
.arco .pedra { fill: var(--pedra); stroke: var(--pedra-2); stroke-width: 1; transition: fill .4s; }
.arco .pedra.posta { fill: var(--oliva-2); stroke: var(--oliva); }
.arco .pedra.posta:nth-child(3n) { fill: var(--oliva); }
.arco .pedra.chave.posta { fill: var(--mel); stroke: #8C6526; }
.arco .pedra.hoje:not(.posta) { fill: var(--cal); stroke: var(--mel); stroke-width: 2; stroke-dasharray: 4 3; }
.arco .vao { fill: var(--cal); }
.arco .soleira { fill: var(--pedra-2); }

.marca { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; text-decoration: none; }
.marca small { display: block; font: 500 .75rem/1.2 var(--corpo); letter-spacing: 0; color: var(--texto-2); }

[hidden] { display: none !important; }
.visivel-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}