/* ============================================================
   BOTÃO — preserva o recorte irregular desenhado à mão do
   Figma via --shape-botao (ver brand-shapes.css).
   Estados: padrão, hover, foco, ativo, desabilitado, carregando.
   ============================================================ */
.btn {
  --btn-bg: var(--c-vermelho);
  --btn-fg: #fff;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-xs);
  min-height: var(--tap-min);
  /* O rótulo NUNCA quebra em duas linhas: o recorte irregular do
     botao.svg foi desenhado para uma linha e, com duas, o traço
     esticava e o texto encostava na borda rasgada. Para caber em
     tela estreita, quem cede é o corpo e o respiro lateral — não o
     número de linhas. O maior rótulo é "Comece pelo 1º pedido". */
  white-space: nowrap;
  padding-block: var(--sp-sm);
  padding-inline: clamp(13px, 4.5vw, 32px);
  font-family: var(--font-display);
  font-weight: 400;
  font-synthesis-weight: none;
  font-size: clamp(0.8125rem, 0.62rem + 1.05vw, 1.375rem);
  letter-spacing: .01em;
  text-decoration: none;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 0;
  cursor: pointer;
  clip-path: var(--shape-botao);
  transition: background-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
/* O clip-path corta o outline do foco, então desenhamos o anel
   num pseudo-elemento externo — foco continua visível. (WCAG 2.4.11) */
.btn:focus-visible { outline: none; }
.btn:focus-visible::after {
  content: ''; position: absolute; inset: -6px;
  border: 3px solid var(--c-mostarda);
  border-radius: var(--radius-sm);
}
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); transition-duration: var(--t-micro); }

/* Primário: vermelho → tijolo com texto mostarda.
   O Figma trazia o hover em areia, mas nas seções de fundo areia
   (História, Opiniões, Fidelidade, rodapé) o botão desaparecia ao
   passar o mouse. O par tijolo+mostarda é o mesmo hover que o
   Figma já usava no botão "Cardápio" — continua sendo a marca, e
   funciona sobre qualquer fundo (5,10:1). */
.btn--primario:hover { --btn-bg: var(--c-tijolo); --btn-fg: var(--c-mostarda); }

/* Secundário: o MESMO traçado do botão cheio (botao.svg), agora só
   contornado. SVG embutido e esticado, para a irregularidade do
   traço ser a do Figma e `currentColor` acompanhar o tema. */
.btn--secundario {
  --btn-bg: transparent; --btn-fg: #fff;
  /* O recorte TEM de ficar aqui também: sem ele o fundo do hover
     pintava um retângulo atrás do contorno desenhado à mão. */
  clip-path: var(--shape-botao);
}
.btn__contorno {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
}
.btn--secundario:hover { --btn-bg: var(--c-vermelho); --btn-fg: var(--c-mostarda); }
.btn--secundario:hover .btn__contorno { color: var(--c-vermelho); }
.btn--secundario.on-light { --btn-fg: var(--c-tijolo); }
.btn--secundario.on-light:hover { --btn-fg: var(--c-mostarda); }

.btn--grande {
  min-height: 56px;
  padding-inline: clamp(15px, 5.5vw, 40px);
  font-size: clamp(0.9375rem, 0.65rem + 1.4vw, 1.75rem);
}
.btn--bloco  { width: 100%; }

.btn[aria-disabled="true"], .btn:disabled {
  --btn-bg: #C9BCA8; --btn-fg: #4A4237;   /* 3,1:1 — não comunica só por opacidade */
  cursor: not-allowed; transform: none; pointer-events: none;
}

/* Estado de carregamento */
.btn[aria-busy="true"] { pointer-events: none; }
.btn[aria-busy="true"] .btn__label { opacity: .35; }
.btn[aria-busy="true"]::before {
  content: ''; position: absolute;
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.btn__icon { width: 1.25em; height: 1.25em; flex: none; fill: currentColor; }