/* Hallmark · route: custom (bespoke, v2) · structure: hero com vídeo → faixa amarela → serviços com foto + combo (claro) → pacote mensal → barbeiros → galeria → agendamento numa tela (claro) → contato com mapa → rodapé
 * idea: "Barbearia raiz no clima do logo — slab grossa, amarelo forte, foto em tudo, agendar sem pensar"
 * paper: oklch(15% 0.006 75) · cream: oklch(95% 0.018 85) · accent: oklch(84% 0.165 78) · display: Alfa Slab One · body: Jost
 * axes: dark+light alternado / slab-serif / chromatic-amber ~78° · nav: sticky com links + CTA · footer: statement + logo
 * app: instalável no celular (manifest.webmanifest + sw.js); aviso "Instalar" aparece só no celular
 * fotos: provisórias (Unsplash) marcadas em js/config.js · studied: no
 */

/* ───────── Base ───────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + var(--space-md));
  background: var(--color-paper);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol, figure, address { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, video, iframe { display: block; max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
address { font-style: normal; }
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0.005em;
  text-wrap: balance;
  overflow-wrap: anywhere;
  min-width: 0;
}
::selection { background: var(--color-accent); color: var(--color-accent-ink); }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.wrap { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); }
.accent { color: var(--color-accent); }
.skip {
  position: fixed; top: var(--space-sm); left: var(--space-sm); z-index: var(--z-modal);
  padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm);
  background: var(--color-accent); color: var(--color-accent-ink); font-weight: 600; text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus-visible { transform: none; }

/* ───────── Botões ───────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 3rem; padding: 0 var(--space-lg);
  border: 2px solid transparent; border-radius: var(--radius-pill); background: transparent;
  font-family: var(--font-body); font-size: 0.9375rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn[hidden] { display: none; }
.btn--sm { min-height: 2.75rem; padding: 0 var(--space-md); font-size: 0.875rem; }
.btn--lg { min-height: 3.5rem; padding: 0 var(--space-xl); font-size: 1rem; }
.btn--accent { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--ghost { border-color: var(--color-ink); color: var(--color-ink); }
.btn--dark { background: var(--color-cream-ink); color: var(--color-cream); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
@media (hover: hover) {
  .btn--accent:hover { background: var(--color-accent-2); }
  .btn--ghost:hover { background: var(--color-ink); color: var(--color-paper); }
  .btn--dark:hover { background: var(--color-paper-3); }
}
.link-btn {
  padding: var(--space-xs) 0; border: 0; background: none;
  color: var(--color-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 0.25em;
}
.link-btn--dark { color: var(--color-cream-ink); }

/* ───────── Topo fixo ───────── */
.nav {
  position: fixed; inset: 0 0 auto; z-index: var(--z-sticky); height: var(--nav-h);
  transition: background-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.nav.is-solid { background: var(--color-paper); box-shadow: 0 1px 0 var(--color-rule); }
.nav__inner { height: 100%; display: flex; align-items: center; gap: var(--space-lg); }
.nav__brand img { height: 3.25rem; width: auto; }
.nav__links { display: none; margin-left: auto; gap: var(--space-lg); }
.nav__links a {
  padding: var(--space-xs) 0; font-weight: 600; font-size: 0.9375rem; text-decoration: none;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-ink);
}
@media (hover: hover) { .nav__links a:hover { color: var(--color-accent); } }
.nav__inner > .btn { margin-left: auto; }
.nav__total { margin-left: var(--space-2xs); }
.nav__total[hidden] { display: none; }
@media (min-width: 56rem) {
  .nav__links { display: flex; }
  .nav__inner > .btn { margin-left: var(--space-md); }
}

/* ───────── Abertura ───────── */
.hero {
  position: relative; isolation: isolate;
  min-height: min(100svh, 56rem);
  display: flex; align-items: flex-end;
  padding: calc(var(--nav-h) + var(--space-2xl)) 0 var(--space-2xl);
}
.hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--color-paper); }
.hero__bg video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1200ms var(--ease-out);
  filter: saturate(0.6) contrast(1.05);
}
.hero__bg.is-on video { opacity: 0.6; }
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, color-mix(in oklch, var(--color-paper) 80%, transparent), transparent 75%),
    linear-gradient(180deg, color-mix(in oklch, var(--color-paper) 50%, transparent), transparent 30%, transparent 65%, var(--color-paper));
}
.hero__inner { display: grid; gap: var(--space-lg); }
.hero__kicker {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  font-weight: 600; font-size: var(--text-label); letter-spacing: 0.12em; text-transform: uppercase;
}
.dot { width: 0.6rem; height: 0.6rem; border-radius: var(--radius-pill); background: var(--color-muted); flex: none; }
.dot.is-open { background: var(--color-accent); box-shadow: 0 0 0 4px color-mix(in oklch, var(--color-accent) 25%, transparent); }
.hero__title { font-size: var(--text-hero); max-width: 12ch; text-transform: uppercase; line-height: 1.02; }
.hero__lede { max-width: 44ch; font-size: var(--text-lede); color: var(--color-ink); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.hero__facts {
  display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-xl);
  margin-top: var(--space-md); padding-top: var(--space-md);
  border-top: 1px solid color-mix(in oklch, var(--color-ink) 25%, transparent);
  color: var(--color-muted); font-size: 0.9375rem;
}
.hero__facts strong { color: var(--color-accent); font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; margin-right: var(--space-2xs); }

/* ───────── Faixa amarela ───────── */
.faixa { background: var(--color-accent); color: var(--color-accent-ink); overflow: clip; padding-block: var(--space-sm); }
.faixa__track { display: flex; width: max-content; }
.faixa__item {
  display: flex; align-items: center; gap: var(--space-lg); padding-right: var(--space-lg);
  font-family: var(--font-display); font-size: clamp(1.25rem, 1.5vw + 0.9rem, 1.875rem);
  text-transform: uppercase; white-space: nowrap;
}
.faixa__item::after { content: "✦"; font-family: var(--font-body); font-size: 0.8em; }
@media (prefers-reduced-motion: no-preference) {
  .faixa__track { animation: faixa 48s linear infinite; }
  .faixa:hover .faixa__track { animation-play-state: paused; }
}
@keyframes faixa { to { transform: translateX(-50%); } }

/* ───────── Seções ───────── */
.sec { padding-block: var(--space-3xl); }
.sec--tight { padding-top: var(--space-xl); }
.sec--cream { background: var(--color-cream); color: var(--color-cream-ink); }
.sec__head { display: grid; gap: var(--space-sm); max-width: 44rem; margin-bottom: var(--space-xl); }
.sec__head--row { max-width: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-md); }
.sec__kicker {
  font-weight: 700; font-size: var(--text-label); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-accent);
}
.sec--cream .sec__kicker { color: var(--color-accent-ink); background: var(--color-accent); justify-self: start; padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); }
.sec__title { font-size: var(--text-title); text-transform: uppercase; }
.sec__lede { max-width: 50ch; font-size: var(--text-lede); color: var(--color-muted); }
.sec--cream .sec__lede { color: var(--color-cream-muted); }

/* ───────── Serviços ───────── */
/* celular: 2 por linha, mais compactos */
.servicos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
@media (max-width: 35.99rem) {
  .servico__corpo { padding: var(--space-sm) var(--space-sm) var(--space-md); }
  .servico__nome { font-size: 1.125rem; }
  .servico__desc { font-size: 0.875rem; line-height: 1.4; }
  .servico__preco { font-size: 1.125rem; }
  .servico__add { justify-self: stretch; justify-content: center; min-width: 0; max-width: 100%; overflow: hidden; padding: 0 var(--space-2xs); font-size: 0.6875rem; letter-spacing: 0.02em; }
}
@media (min-width: 36rem) { .servicos { gap: var(--space-md); } }
@media (min-width: 64rem) { .servicos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.servico {
  display: flex; flex-direction: column;
  border-radius: var(--radius-md); overflow: hidden;
  background: var(--color-paper); color: var(--color-ink);
  box-shadow: 0 0 0 3px transparent;
  transition: box-shadow var(--dur-short) var(--ease-out);
}
.servico.is-on { box-shadow: 0 0 0 3px var(--color-accent); }
.servico__foto { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-paper-3); }
.servico__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
@media (hover: hover) { .servico:hover .servico__foto img { transform: scale(1.05); } }
.servico__preco {
  position: absolute; right: var(--space-sm); bottom: var(--space-sm);
  padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-sm);
  background: var(--color-accent); color: var(--color-accent-ink);
  font-family: var(--font-display); font-size: 1.5rem; line-height: 1.1;
}
.servico__preco small { font-family: var(--font-body); font-weight: 700; font-size: 0.55em; margin-right: 0.15em; }
.servico { min-width: 0; }
.resumo__sufixo { display: none; }
@media (min-width: 24rem) { .resumo__sufixo { display: inline; } }
.servico__corpo { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: var(--space-2xs); padding: var(--space-md) var(--space-md) var(--space-lg); flex: 1; }
.servico__nome { font-size: 1.625rem; text-transform: uppercase; }
.servico__apelido { color: var(--color-accent); font-weight: 600; font-size: 0.875rem; letter-spacing: 0.06em; text-transform: uppercase; }
.servico__desc { color: var(--color-muted); }
.servico__tempo { color: var(--color-muted); font-size: 0.875rem; }
.servico__add {
  margin-top: auto; justify-self: start;
  display: inline-flex; align-items: center; gap: var(--space-xs);
  min-height: 2.75rem; padding: 0 var(--space-md); margin-top: var(--space-sm);
  border: 2px solid var(--color-accent); border-radius: var(--radius-pill); background: transparent;
  color: var(--color-accent); font-weight: 700; font-size: 0.875rem; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.servico__add:active { transform: translateY(1px); }
.servico__add[aria-pressed="true"] { background: var(--color-accent); color: var(--color-accent-ink); }
.servico__add .on { display: none; }
.servico__add[aria-pressed="true"] .on { display: inline; }
.servico__add[aria-pressed="true"] .off { display: none; }

.combos { display: flex; justify-content: center; margin-top: var(--space-xl); }
.combos__label { font-weight: 700; }
.combos__list { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.combos > .btn { margin-left: auto; }
.chip-combo {
  min-height: 2.75rem; padding: 0 var(--space-md);
  border: 2px solid var(--color-cream-ink); border-radius: var(--radius-pill); background: transparent;
  color: var(--color-cream-ink); font-weight: 600; white-space: nowrap;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.chip-combo b { font-family: var(--font-display); font-weight: 400; margin-left: var(--space-2xs); }
.chip-combo[aria-pressed="true"], .chip-combo:hover { background: var(--color-cream-ink); color: var(--color-cream); }

/* Combo: card largo abaixo dos serviços */
.combo {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-md) var(--space-lg);
  margin-top: var(--space-md); padding: var(--space-lg);
  border-radius: var(--radius-md); background: var(--color-paper); color: var(--color-ink);
  box-shadow: 0 0 0 3px transparent;
  transition: box-shadow var(--dur-short) var(--ease-out);
}
.combo.is-on { box-shadow: 0 0 0 3px var(--color-accent); }
.combo__texto { display: grid; gap: var(--space-2xs); min-width: 0; }
.combo__selo {
  justify-self: start; padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill);
  background: var(--color-accent); color: var(--color-accent-ink);
  font-weight: 700; font-size: var(--text-label); letter-spacing: 0.12em; text-transform: uppercase;
}
.combo__nome { font-size: var(--text-lg); text-transform: uppercase; }
.combo__desc { color: var(--color-muted); }
.combo__preco { display: grid; justify-items: end; line-height: 1; }
.combo__de { color: var(--color-muted); font-weight: 600; font-size: 1.0625rem; }
.combo__por { font-family: var(--font-display); font-size: clamp(2.5rem, 2vw + 1.75rem, 3.25rem); color: var(--color-accent); }
.combo__por small { font-family: var(--font-body); font-weight: 700; font-size: 0.42em; margin-right: 0.15em; }
/* Preço por dia da semana: o dia do preço menor e, embaixo, o preço dos outros dias */
.combo__quando { margin-top: var(--space-2xs); font-weight: 700; font-size: 0.9375rem; text-align: right; }
.combo__outros { margin-top: var(--space-2xs); color: var(--color-muted); font-weight: 600; font-size: 0.875rem; text-align: right; }
.combo .servico__add {
  grid-column: 1 / -1; justify-self: stretch; justify-content: center; margin-top: 0;
  min-width: 0; padding: 0 var(--space-md); font-size: 0.875rem; letter-spacing: 0.06em;
}
@media (min-width: 48rem) {
  .combo { grid-template-columns: minmax(0, 1fr) auto auto; padding: var(--space-lg) var(--space-xl); }
  .combo .servico__add { grid-column: auto; justify-self: end; }
}
/* Preço por dia no celular: o preço desce para baixo do texto (não espreme o nome do combo) */
@media (max-width: 47.99rem) {
  .combo--dias { grid-template-columns: minmax(0, 1fr); }
  .combo--dias .combo__preco { justify-items: start; }
  .combo--dias .combo__quando, .combo--dias .combo__outros { text-align: left; }
}

/* ───────── Pacote mensal ───────── */
/* celular e tablet: só os cards. Computador: foto + dois cards lado a lado */
.pacotes { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
.pacotes__foto { display: none; }
@media (min-width: 64rem) {
  .pacotes { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .pacotes__foto:not([hidden]) { display: block; border-radius: var(--radius-md); overflow: hidden; background: var(--color-paper-2); }
  .pacotes__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
}
.pacotes__lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg) var(--space-md); }
@media (min-width: 40rem) { .pacotes__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pacote {
  position: relative; display: flex; flex-direction: column; gap: var(--space-md); min-width: 0;
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
  border: 2px solid var(--color-rule); border-radius: var(--radius-md);
  background: var(--color-paper-2);
}
.pacote--destaque { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-accent-ink); }
.pacote__selo {
  position: absolute; top: 0; left: var(--space-lg); transform: translateY(-50%);
  padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill);
  background: var(--color-cream-ink); color: var(--color-accent);
  font-weight: 700; font-size: var(--text-label); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
}
.pacote__nome { font-size: var(--text-lg); text-transform: uppercase; }
.pacote__preco { font-family: var(--font-display); font-size: clamp(3rem, 2.5vw + 2.25rem, 4rem); line-height: 1; color: var(--color-accent); }
.pacote__preco small { font-family: var(--font-body); font-weight: 700; font-size: 0.36em; margin-right: 0.15em; vertical-align: 0.95em; }
.pacote__preco span { font-family: var(--font-body); font-weight: 600; font-size: 0.32em; margin-left: 0.2em; color: var(--color-muted); }
.pacote--destaque .pacote__preco { color: var(--color-accent-ink); }
.pacote--destaque .pacote__preco span { color: inherit; opacity: 0.75; }
.pacote__itens { display: grid; gap: var(--space-xs); padding-top: var(--space-md); border-top: 1px solid var(--color-rule); }
.pacote--destaque .pacote__itens { border-top-color: color-mix(in oklch, var(--color-accent-ink) 30%, transparent); }
.pacote__itens li { display: flex; gap: var(--space-xs); font-weight: 600; }
.pacote__itens li::before { content: "✓"; flex: none; color: var(--color-accent); font-weight: 700; }
.pacote--destaque .pacote__itens li::before { color: var(--color-accent-ink); }
.pacote .btn { margin-top: auto; width: 100%; }
.pacote .btn svg { width: 1.25rem; height: 1.25rem; flex: none; }

/* ───────── Barbeiros ───────── */
.barbeiros { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
@media (min-width: 40rem) { .barbeiros { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.barbeiro { position: relative; border-radius: var(--radius-md); overflow: hidden; background: var(--color-paper-2); }
.barbeiro__foto { aspect-ratio: 4 / 5; overflow: hidden; }
.barbeiro__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
@media (hover: hover) { .barbeiro:hover .barbeiro__foto img { transform: scale(1.04); } }
.barbeiro__foto--logo { display: grid; place-items: center; background: var(--color-paper-3); }
.barbeiro__foto--logo img { width: 55%; height: auto; object-fit: contain; opacity: 0.9; transform: translateY(-12%); }
.barbeiro__info {
  position: absolute; inset: auto 0 0 0;
  display: grid; gap: var(--space-xs); padding: var(--space-xl) var(--space-md) var(--space-md);
  background: linear-gradient(180deg, transparent, color-mix(in oklch, var(--color-paper) 92%, transparent) 45%);
}
.barbeiro__nome { font-size: var(--text-lg); text-transform: uppercase; }
.barbeiro__spec { color: var(--color-muted); }
.barbeiro .btn { justify-self: start; margin-top: var(--space-xs); }
.barbeiros__any { margin-top: var(--space-lg); color: var(--color-muted); }

/* ───────── Galeria ───────── */
.galeria { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
@media (min-width: 48rem) { .galeria { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.galeria li { border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 1; background: var(--color-paper-2); }
.galeria img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
@media (hover: hover) { .galeria li:hover img { transform: scale(1.05); } }

/* ───────── Agendamento ───────── */
/* Janela flutuante, passo a passo. Celular: sobe de baixo. Computador: centro da tela. */
html.modal-aberto { overflow: hidden; }
.modal {
  width: 100%; max-width: 100%; height: fit-content; max-height: 100dvh;
  margin: auto 0 0; padding: 0; border: 0; background: transparent; color: var(--color-ink);
  overflow: visible;
}
.modal::backdrop { background: color-mix(in oklch, var(--color-paper) 75%, transparent); backdrop-filter: blur(3px); }
.modal__box {
  display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto;
  max-height: 92dvh; border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--color-paper-2); box-shadow: 0 -1px 0 var(--color-rule);
}
@media (min-width: 40rem) {
  .modal { width: min(34rem, calc(100% - 2rem)); margin: auto; }
  .modal__box { max-height: min(46rem, 90dvh); border-radius: var(--radius-md); box-shadow: 0 0 0 1px var(--color-rule), 0 30px 80px -20px var(--color-paper); }
}
.modal[open] .modal__box { animation: sobe 420ms var(--ease-out) both; }
@keyframes sobe { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
.modal__topo { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-md) var(--space-lg) var(--space-sm); }
.modal__marca { display: flex; align-items: center; gap: var(--space-sm); font-weight: 600; color: var(--color-muted); font-size: 0.875rem; }
.modal__marca img { height: 2.25rem; width: auto; }
.modal__fechar {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 0; border-radius: var(--radius-pill);
  background: var(--color-paper-3); color: var(--color-ink); font-size: 1.5rem; line-height: 1;
}
@media (hover: hover) { .modal__fechar:hover { background: var(--color-rule); } }
.modal__prog { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2xs); padding: 0 var(--space-lg); }
.modal__prog span { height: 4px; border-radius: var(--radius-pill); background: var(--color-rule); transition: background-color var(--dur-short) var(--ease-out); }
.modal__prog span.is-on { background: var(--color-accent); }
.modal__corpo { overflow-y: auto; overscroll-behavior: contain; padding: var(--space-lg); }
.passo[hidden], .pronto[hidden] { display: none; }
.passo.is-entrando { animation: passo 360ms var(--ease-out) both; }
.passo.is-voltando { animation: passo-volta 360ms var(--ease-out) both; }
@keyframes passo { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes passo-volta { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
.passo__conta { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); }
.passo__titulo { margin: var(--space-2xs) 0 var(--space-2xs); font-size: clamp(1.75rem, 2vw + 1.2rem, 2.25rem); text-transform: uppercase; }
.passo__titulo:focus { outline: none; }
.passo__dica { margin-bottom: var(--space-md); color: var(--color-muted); }
.passo__dica.is-alerta { color: var(--color-accent); font-weight: 600; }
/* Agenda online: de onde vão os dados e o campo-isca contra robô (fora da tela) */
.passo__privacidade { margin-top: var(--space-sm); font-size: 0.85em; color: var(--color-muted); }
.isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Opções (serviço, barbeiro): linhas grandes, fáceis de tocar */
.linhas { display: grid; gap: var(--space-xs); }
.op { position: relative; display: block; }
.op input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.op > span {
  display: flex; align-items: center; gap: var(--space-md);
  min-height: 3.5rem; padding: var(--space-sm) var(--space-md);
  border: 2px solid var(--color-rule); border-radius: var(--radius-md);
  background: var(--color-paper); color: var(--color-ink); font-weight: 600;
  transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}
.op img { width: 3rem; height: 3rem; border-radius: var(--radius-sm); object-fit: cover; flex: none; }
.op__nome { flex: 1; min-width: 0; }
.op__nome small { display: block; color: var(--color-muted); font-weight: 400; font-size: 0.875rem; }
.op__preco { font-family: var(--font-display); font-weight: 400; color: var(--color-accent); white-space: nowrap; }
.op__check {
  display: grid; place-items: center; width: 1.75rem; height: 1.75rem; flex: none;
  border: 2px solid var(--color-rule); border-radius: var(--radius-pill); color: transparent; font-size: 0.875rem;
}
@media (hover: hover) { .op:hover > span { border-color: var(--color-muted); } }
/* celular bem estreito: sem miniatura, mais espaço para o texto */
@media (max-width: 23.99rem) {
  .modal__corpo { padding: var(--space-md); }
  .op > span { gap: var(--space-sm); padding: var(--space-xs) var(--space-sm); }
  .op img { display: none; }
  .grade { gap: var(--space-2xs); }
}
.op input:focus-visible + span { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.op input:checked + span { border-color: var(--color-accent); background: color-mix(in oklch, var(--color-accent) 12%, var(--color-paper)); }
.op input:checked + span .op__check { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.op input:disabled + span { opacity: 0.35; cursor: not-allowed; }
.op input:disabled { cursor: not-allowed; }
.passo__combo {
  margin-top: var(--space-sm); padding: var(--space-sm) var(--space-md);
  border: 2px dashed var(--color-rule); border-radius: var(--radius-md);
  color: var(--color-muted); font-size: 0.9375rem; font-weight: 600;
}
.passo__combo[hidden] { display: none; }
.passo__combo.is-on { border-style: solid; border-color: var(--color-accent); color: var(--color-accent); }

/* Dias e horas: grade de botões */
.grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xs); }
.grade .op > span { flex-direction: column; justify-content: center; gap: 0; min-height: 4.25rem; padding: var(--space-xs); text-align: center; line-height: 1.15; }
.grade .op small { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); }
.grade .op strong { font-family: var(--font-display); font-weight: 400; font-size: 1.375rem; }
.grade--horas .op > span { min-height: 3rem; font-variant-numeric: tabular-nums; }
.grade .op input:checked + span small { color: var(--color-ink); }
.horas__grupo + .horas__grupo { margin-top: var(--space-md); }
.horas__grupo > p { margin-bottom: var(--space-xs); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); }
.vazio { color: var(--color-muted); }

.campos { display: grid; gap: var(--space-md); }
.campo { display: grid; gap: var(--space-2xs); }
.campo label { font-weight: 600; }
.campo input {
  min-height: 3.25rem; padding: 0 var(--space-md);
  border: 2px solid var(--color-rule); border-radius: var(--radius-sm);
  outline: 3px solid transparent; outline-offset: 1px;
  background: var(--color-paper); color: var(--color-ink); font-size: 1.0625rem;
}
.campo input::placeholder { color: var(--color-muted); }
.campo input:focus-visible { outline-color: var(--color-focus); border-color: var(--color-muted); }
.campo input[aria-invalid="true"] { border-color: var(--color-error); }
.campo__msg { min-height: 1.4em; font-size: 0.875rem; color: var(--color-error); }
.revisao { display: grid; gap: var(--space-2xs); margin-top: var(--space-md); padding: var(--space-md); border-radius: var(--radius-md); background: var(--color-paper); color: var(--color-muted); font-size: 0.9375rem; }
.revisao b { color: var(--color-ink); font-weight: 600; }

.modal__rodape {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg) calc(var(--space-md) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--color-rule);
}
.modal__rodape[hidden] { display: none; }
.modal__total { flex: 1; min-width: 0; font-weight: 600; font-size: 0.875rem; color: var(--color-muted); }
.modal__total strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; color: var(--color-accent); }
.modal__total s { margin-left: var(--space-2xs); font-weight: 500; }
.modal__total s[hidden] { display: none; }
.btn--voltar { min-height: 3rem; padding: 0 var(--space-md); border-color: var(--color-rule); color: var(--color-ink); }
.modal__rodape .btn--accent { min-width: 9rem; }

.pronto { display: grid; gap: var(--space-md); justify-items: start; }
.pronto__selo {
  padding: var(--space-2xs) var(--space-sm); border: 2px solid var(--color-accent); border-radius: var(--radius-sm);
  color: var(--color-accent); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; transform: rotate(-3deg);
}
.pronto__titulo { font-size: clamp(1.75rem, 2vw + 1.2rem, 2.25rem); text-transform: uppercase; }
.pronto__titulo:focus { outline: none; }
.pronto__texto { color: var(--color-ink); }
.pronto__resumo { color: var(--color-muted); }
.pronto__acoes { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); width: 100%; }
.btn--dark-modal { background: var(--color-paper-3); color: var(--color-ink); }

/* ───────── Contato ───────── */
.contato { display: grid; gap: var(--space-xl); }
@media (min-width: 56rem) { .contato { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; } }
.contato__info { display: grid; gap: var(--space-md); }
.contato__end { font-size: var(--text-lede); }
.contato__end span { display: block; color: var(--color-muted); }
.contato__status { display: inline-flex; align-items: center; gap: var(--space-xs); font-weight: 600; }
.contato__acoes { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xs); }
.horarios { width: 100%; max-width: 26rem; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.horarios th, .horarios td { padding: var(--space-xs) 0; border-bottom: 1px solid var(--color-rule); text-align: left; font-weight: 400; }
.horarios td { text-align: right; color: var(--color-muted); }
.horarios tr.is-today th, .horarios tr.is-today td { color: var(--color-accent); font-weight: 600; }
.contato__mapa { border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4 / 3; background: var(--color-paper-2); }
.contato__mapa iframe { width: 100%; height: 100%; border: 0; filter: grayscale(0.4) contrast(1.05); }

/* ───────── Rodapé ───────── */
.rodape { background: var(--color-accent); color: var(--color-accent-ink); padding-block: var(--space-2xl) var(--space-lg); }
.rodape__inner { display: grid; gap: var(--space-xl); }
.rodape__logo { width: 8rem; height: auto; filter: brightness(0) saturate(0); opacity: 0.85; }
.rodape__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.rodape__frase { font-family: var(--font-display); font-size: var(--text-title); line-height: 1.02; text-transform: uppercase; }
.rodape .btn--accent { background: var(--color-cream-ink); color: var(--color-accent); }
.rodape__whats { display: inline-flex; align-items: center; gap: var(--space-xs); font-weight: 600; text-decoration: none; }
.rodape__whats svg { width: 1.25rem; height: 1.25rem; flex: none; }
@media (hover: hover) { .rodape__whats:hover { text-decoration: underline; text-underline-offset: 0.2em; } }
.rodape__app {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  padding: 0; border: 0; background: none; color: inherit; font-weight: 600;
}
.rodape__app[hidden] { display: none; }
.rodape__app svg { width: 1.25rem; height: 1.25rem; flex: none; }
@media (hover: hover) { .rodape__app:hover { text-decoration: underline; text-underline-offset: 0.2em; } }
.rodape__meta {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-xs) var(--space-lg);
  padding-top: var(--space-md); border-top: 2px solid var(--color-accent-ink); font-weight: 500; font-size: 0.9375rem;
}

/* ───────── WhatsApp flutuante ───────── */
.whats-float {
  position: fixed; right: var(--space-md); bottom: calc(var(--space-md) + env(safe-area-inset-bottom)); z-index: var(--z-float);
  display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: var(--radius-pill);
  background: var(--color-whats); color: var(--color-ink);
  box-shadow: 0 8px 24px -8px var(--color-paper);
  transition: transform var(--dur-short) var(--ease-out), bottom var(--dur-long) var(--ease-out);
}
.whats-float svg { width: 1.875rem; height: 1.875rem; }
@media (hover: hover) { .whats-float:hover { transform: scale(1.06); } }
/* com o aviso do app aberto, o WhatsApp sobe para não ficar por baixo */
html.tem-aviso .whats-float { bottom: calc(var(--space-md) + env(safe-area-inset-bottom) + var(--aviso-h, 4.5rem) + var(--space-sm)); }

/* ───────── Aviso: instalar o app ───────── */
.app-aviso {
  position: fixed; left: var(--space-md); right: var(--space-md); bottom: calc(var(--space-md) + env(safe-area-inset-bottom));
  z-index: var(--z-float);
  display: flex; align-items: center; gap: var(--space-sm);
  max-width: 30rem; margin-inline: auto; padding: var(--space-sm);
  border: 1px solid var(--color-rule); border-radius: var(--radius-md);
  background: var(--color-paper-2); color: var(--color-ink);
  box-shadow: 0 16px 40px -12px var(--color-paper);
}
.app-aviso[hidden] { display: none; }
.motion .app-aviso { animation: sobe 420ms var(--ease-out) both; }
.app-aviso__icone { width: 2.75rem; height: 2.75rem; border-radius: var(--radius-sm); flex: none; }
.app-aviso__texto { flex: 1; min-width: 0; font-size: 0.875rem; line-height: 1.35; color: var(--color-muted); }
.app-aviso__titulo { color: var(--color-ink); font-weight: 700; font-size: 0.9375rem; }
.app-aviso__texto b { color: var(--color-ink); font-weight: 600; }
.app-aviso__share { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -0.2em; color: var(--color-accent); }
.app-aviso__btn { flex: none; min-height: 2.5rem; padding: 0 var(--space-md); font-size: 0.8125rem; }
.app-aviso__fechar {
  display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; margin: calc(var(--space-2xs) * -1) 0;
  border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-muted); font-size: 1.5rem; line-height: 1;
}
@media (hover: hover) { .app-aviso__fechar:hover { background: var(--color-paper-3); color: var(--color-ink); } }
@media (max-width: 23.99rem) { .app-aviso__icone { display: none; } }

/* Ponto que voa do "Adicionar" até o botão Agendar */
.voo { position: fixed; z-index: var(--z-modal); width: 0; height: 0; pointer-events: none; }
.voo i { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: var(--radius-pill); background: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-ink); }

/* ───────── Movimento (só com .motion) ───────── */
.motion:not(.is-loaded) .hero [data-entra] { opacity: 0; transform: translateY(24px); }
.motion .hero [data-entra] { transition: opacity 800ms var(--ease-out), transform 900ms var(--ease-out); }
.motion .hero [data-entra]:nth-child(2) { transition-delay: 90ms; }
.motion .hero [data-entra]:nth-child(3) { transition-delay: 180ms; }
.motion .hero [data-entra]:nth-child(4) { transition-delay: 270ms; }
.motion .hero [data-entra]:nth-child(5) { transition-delay: 360ms; }
.motion [data-revela]:not(.is-in) { opacity: 0; transform: translateY(28px); }
.motion [data-revela] { transition: opacity 700ms var(--ease-out), transform 800ms var(--ease-out); }

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