/* ==========================================================
   components.css — botões, links, seletor, barra de agendamento, régua
   Mobile-first; todo alvo de toque tem no mínimo 44px.
   ========================================================== */

/* ---------- Botões ----------
   Inspirado no RainbowButton (gradiente + borda + hover), adaptado à marca:
   acabamento em degradê do próprio bronze/dourado, borda chanfrada de 1px e,
   no hover, um brilho dourado que atravessa o botão (camada movida só por
   transform, sem repintar). Tamanho e posição dos botões não mudam. */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px;
  border: 1px solid transparent; border-radius: var(--radius);
  font-family: var(--font-body); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: var(--ls-label); text-transform: uppercase; text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 246, 230, 0.22), inset 0 -1px 0 rgba(36, 24, 18, 0.16);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}
.btn::after {
  content: ""; position: absolute; inset: -1px; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 22%, rgba(255, 240, 214, 0.22) 42%, rgba(255, 240, 214, 0.38) 50%, rgba(255, 240, 214, 0.22) 58%, transparent 78%);
  transform: translateX(-115%);
  transition: transform 0.9s var(--ease-photo);
}
.btn:focus-visible::after { transform: translateX(115%); }
.btn:active { transform: translateY(1px); }
/* Toque (sem hover): o brilho responde ao toque */
@media (hover: none) {
  .btn:active::after { transform: translateX(115%); transition-duration: 0.6s; }
}
@media (hover: hover) {
  .btn:hover { transform: translateY(-1px); }
  .btn:hover::after { transform: translateX(115%); }
  .btn:hover:active { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .btn::after { display: none; }
}
.btn--lg { min-height: 58px; padding: 0 36px; }
.btn--block { width: 100%; }
/* Degradês dentro da mesma cor (contraste do texto mantido ≥ 4,5:1) */
.btn--accent { background: var(--accent) linear-gradient(180deg, #86673c 0%, #7c5e37 100%); color: var(--ivory); }
.btn--accent:hover { background: var(--accent-hover) linear-gradient(180deg, #745834 0%, #664d2d 100%); }
.btn--accent-light { background: var(--accent-light) linear-gradient(180deg, #ddbf90 0%, #cdac79 100%); color: var(--espresso); }
.btn--accent-light:hover { background: var(--accent-light-hover) linear-gradient(180deg, #e8cfa5 0%, #d8b986 100%); }
@media (hover: hover) {
  .btn--accent:hover,
  .btn--accent-light:hover {
    box-shadow: inset 0 1px 0 rgba(255, 246, 230, 0.26), inset 0 -1px 0 rgba(36, 24, 18, 0.16),
                0 12px 26px -14px rgba(36, 24, 18, 0.55);
  }
}
@media (min-width: 640px) {
  .btn--block { width: auto; }
}

/* ---------- Link de ação secundária (44px de toque) ---------- */
.link-line {
  position: relative; display: inline-flex; align-items: center; min-height: var(--tap);
  font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--text-accent);
}
.link-line::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px;
  background: currentColor; transform-origin: left; transition: transform var(--dur-slow) var(--ease-out);
}
.link-line:hover::after { transform: scaleX(0.35); }
.surface--dark .link-line { color: var(--accent-light); }

/* ---------- Botão redondo (setas do carrossel) ---------- */
.round-btn {
  display: grid; place-items: center; width: 48px; height: 48px;
  border: 1px solid var(--line-strong); border-radius: 50%; background: transparent; color: var(--espresso); font-size: 20px;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.round-btn:hover:not(:disabled) { background: var(--espresso); border-color: var(--espresso); color: var(--ivory); }
.round-btn:disabled { opacity: 0.3; cursor: default; }

/* ---------- Barra de agendamento (celular): surge depois do hero ---------- */
.book-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  padding: 10px var(--gutter) max(10px, env(safe-area-inset-bottom));
  background: rgba(36, 24, 18, 0.96); border-top: 1px solid var(--line-dark);
  transform: translateY(110%); visibility: hidden;
  transition: transform 0.5s var(--ease-out), visibility 0s linear 0.5s;
}
.book-bar.is-shown { transform: none; visibility: visible; transition: transform 0.5s var(--ease-out), visibility 0s; }
.book-bar__inner { display: flex; gap: 10px; }
.book-bar .btn { flex: 1; min-height: 50px; }
.book-bar__wa {
  display: grid; place-items: center; flex: none; width: 50px; min-height: 50px;
  border: 1px solid var(--line-dark); border-radius: var(--radius); color: var(--accent-light); font-size: 22px;
}
@media (min-width: 900px) {
  .book-bar { display: none; }
}

/* ---------- Régua de mapeamento (desktop) ---------- */
.rail { display: none; }
@media (min-width: 1180px) {
  .rail {
    display: block; position: fixed; left: 18px; top: 50%; z-index: 30;
    width: 16px; height: min(46vh, 420px); transform: translateY(-50%); pointer-events: none;
  }
  .rail__ticks {
    position: absolute; inset: 0 auto 0 0; width: 8px;
    background: repeating-linear-gradient(to bottom, var(--gold-line) 0 1px, transparent 1px 12px); opacity: 0.6;
  }
  .rail__ticks::after {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 16px;
    background: repeating-linear-gradient(to bottom, var(--gold-line) 0 1px, transparent 1px 60px);
  }
  .rail__marker {
    position: absolute; top: 0; left: -6px; width: 28px; height: 1px; background: var(--gold-line);
    will-change: transform;
  }
  .rail__marker::after {
    content: ""; position: absolute; right: -3px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-line);
  }
}

/* Movimento reduzido: sem transições */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}