/* Kit de peças · base.css
   O motor comum de todas as peças. A CARA (cores, letras, espaços) é do site: ele redefine estas variáveis no próprio
   styles.css, carregado DEPOIS deste arquivo. As classes utilitárias usam :where() (peso zero), então a regra do site
   sempre ganha. Nada aqui é de um negócio. */

:root {
  /* Cores: troque todas pelo DIRECAO.md do site (confira o contraste AA de cada par texto/fundo) */
  --cor-fundo: #f3f1ec;
  --cor-superficie: #ffffff;
  --cor-texto: #1c1b19;
  --cor-suave: #57544e;
  --cor-destaque: #2e5b52;
  --cor-destaque-2: #b8862b;
  --cor-sobre-destaque: #ffffff;
  --cor-linha: rgba(28, 27, 25, 0.18);
  --cor-foco: #1c1b19;
  --cor-sombra: rgba(28, 27, 25, 0.28);

  /* Letras: troque pelas do site (com as fontes já baixadas e servidas pelo próprio site) */
  --letra-titulo: Georgia, "Times New Roman", serif;
  --letra-texto: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-pequena: 0.9375rem;
  --fs-texto: 1.0625rem;
  --fs-lead: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  --fs-h2: clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem);
  --fs-h1: clamp(2.5rem, 1.4rem + 5vw, 5.5rem);

  /* Espaços e medidas */
  --espaco-1: 0.5rem;
  --espaco-2: 1rem;
  --espaco-3: 1.5rem;
  --espaco-4: 2rem;
  --espaco-5: 3rem;
  --espaco-6: 5rem;
  --espaco-7: 8rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --largura: 72rem;
  --raio: 12px;
  --altura-cabecalho: 0px; /* o site põe a altura do cabeçalho fixo: as cenas presas param logo abaixo dele */
  --alvo: 44px; /* todo alvo de toque tem pelo menos 44 x 44 */

  /* Movimento */
  --dur-rapida: 160ms;
  --dur: 320ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --mola: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- Acessibilidade (valem sempre) ---------- */

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

:where(.pular) {
  position: absolute;
  left: var(--espaco-2);
  top: -100px;
  z-index: 100;
  padding: var(--espaco-1) var(--espaco-2);
  background: var(--cor-texto);
  color: var(--cor-fundo);
}

:where(.pular):focus { top: var(--espaco-2); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--cor-foco);
  outline-offset: 3px;
}

/* ---------- Peças comuns (peso zero: o site redesenha à vontade) ---------- */

:where(.botao) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: var(--alvo);
  padding: 0.75em 1.4em;
  border: 2px solid var(--cor-destaque);
  border-radius: 999px;
  background: var(--cor-destaque);
  color: var(--cor-sobre-destaque);
  font: 600 var(--fs-texto) / 1.1 var(--letra-texto);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-rapida) var(--ease), background-color var(--dur-rapida) var(--ease);
}

:where(.botao):active { transform: scale(0.97); }

:where(.botao--contorno) { background: transparent; color: var(--cor-texto); border-color: currentColor; }

:where(.rotulo) {
  font: 600 var(--fs-pequena) / 1.2 var(--letra-texto);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cor-suave);
}

/* A troca de texto do botão ("Mandar no WhatsApp" -> "Abrindo..."): as duas frases ocupam a mesma célula */
:where(.troca) { display: inline-grid; }
:where(.troca__a, .troca__b) { grid-area: 1 / 1; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
:where(.troca__b) { opacity: 0; transform: translateY(4px); }
:where(.abrindo) :where(.troca__a) { opacity: 0; transform: translateY(-4px); }
:where(.abrindo) :where(.troca__b) { opacity: 1; transform: none; }

/* Entrada suave ao aparecer na tela (Kit.revelar). Sem JS ou com "reduzir movimento", tudo já aparece. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-kit-revelar]:not(.visivel) { opacity: 0; transform: translateY(18px); }
  .js [data-kit-revelar] { transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
}

/* ---------- Reduzir movimento: nada anda sozinho ---------- */

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

/* ---------- Só para os exemplo.html do kit (o site não usa) ---------- */

.kit-demo {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font: 400 var(--fs-texto) / 1.55 var(--letra-texto);
}

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

.kit-demo img,
.kit-demo svg,
.kit-demo canvas { display: block; max-width: 100%; }

.kit-demo__aviso {
  margin: 0;
  padding: var(--espaco-1) var(--gutter);
  background: var(--cor-texto);
  color: var(--cor-fundo);
  font-size: var(--fs-pequena);
}

.kit-demo__bloco {
  width: min(100% - 2 * var(--gutter), var(--largura));
  margin-inline: auto;
  padding-block: var(--espaco-5);
}

.kit-demo__bloco > h2 { margin: 0 0 var(--espaco-2); font: 600 var(--fs-h3) / 1.2 var(--letra-titulo); }