/* Customer booking flow: full-height app shell. Mobile first, works from 320 px.
   The page itself never scrolls; long lists scroll inside .step-scroll.
   Step-specific parts live in book-steps.css. */

.book { --gutter: 1rem; --head: 56px; --gap: .875rem; }

.shell { height: 100vh; height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); }
.hero { display: none; }
.app { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; min-width: 0; }

/* Header: back, brand, progress, call. One row, 56 px. */
.app-head {
  display: flex; align-items: center; gap: .5rem; height: var(--head);
  padding: 0 var(--gutter); border-bottom: 1px solid var(--line); background: var(--bg);
}
.icon-btn {
  display: grid; place-items: center; flex: none; width: var(--tap); height: var(--tap); margin-left: -.5rem;
  border-radius: 50%; color: var(--ink); text-decoration: none; font-size: 1.35rem; line-height: 1;
}
.icon-btn:hover { background: var(--sand); color: var(--ink); }
.brand { display: inline-flex; align-items: center; gap: .5rem; flex: none; min-height: var(--tap); color: var(--ink); text-decoration: none; }
.brand img { width: 36px; height: 36px; border-radius: 50%; }
.brand-name { display: none; flex-direction: column; line-height: 1; font-family: var(--caps); }
.brand-name b { font-size: .95rem; letter-spacing: .14em; }
.brand-name small { font-size: .5rem; letter-spacing: .5em; color: var(--gold-deep); margin-top: .25rem; }
.step-0 .brand-name, .step-1 .brand-name, .step-6 .brand-name { display: flex; }
@media (min-width: 520px) { .brand-name { display: flex; } }

.progress { display: flex; align-items: center; gap: .5rem; flex: 1 1 auto; min-width: 0; margin: 0 .25rem; }
.progress-bar { flex: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; list-style: none; margin: 0; padding: 0; max-width: 14rem; margin-left: auto; }
.progress-bar li { height: 4px; border-radius: 2px; background: var(--line); }
.progress-bar li.done { background: var(--gold); }
.progress-bar li.current { background: var(--gold-deep); }
.progress-num { font-family: var(--caps); font-size: .68rem; letter-spacing: .12em; color: var(--muted); font-variant-numeric: tabular-nums; }

.call-btn {
  display: inline-flex; align-items: center; flex: none; min-height: var(--tap); margin-left: auto; padding: 0 .95rem;
  border: 1px solid var(--ink); border-radius: 999px; color: var(--ink); text-decoration: none; font-size: .9rem; font-weight: 500;
}
.call-btn:hover { background: var(--ink); color: var(--paper); }
.progress + .call-btn { margin-left: 0; }

/* Content area */
.app-main { min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; padding: var(--s2) var(--gutter); }
.step { display: flex; flex-direction: column; gap: var(--gap); flex: 1 1 auto; min-height: 0; animation: rise .45s var(--ease) both; }
.step-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.step-head > :last-child { margin-bottom: 0; }
.step-head .eyebrow { margin-bottom: .3rem; font-size: .68rem; }
.step-head h1 { font-size: clamp(1.9rem, 1.55rem + 1.5vw, 2.6rem); margin: 0; }
.step-head .lead { margin: .4rem 0 0; }
.step-foot { margin: 0; text-align: center; font-size: .88rem; color: var(--muted); }
.lead { font-size: 1rem; color: var(--muted); }
.step .panel { padding: var(--s2); }
.step .notice { margin: 0; padding: .6rem .85rem; font-size: .92rem; }
.app-main.is-leaving .step { opacity: 0; transform: translateY(-6px); transition: opacity .14s, transform .14s; }

/* Footer: one row of legal links */
.app-foot { display: flex; justify-content: center; gap: 1.25rem; padding: 0 var(--gutter); border-top: 1px solid var(--line); }
.app-foot a { display: inline-flex; align-items: center; min-height: var(--tap); font-size: .8rem; color: var(--muted); text-decoration: none; }
.app-foot a:hover { color: var(--ink); text-decoration: underline; }

/* Step 1: two tiles side by side, also on phones */
.step-1 .step, .step-center { justify-content: center; }
.cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.cat-card {
  position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 4; max-height: 52dvh;
  border-radius: var(--radius); background: var(--sand); color: var(--paper); text-decoration: none;
  transition: transform .25s var(--ease), box-shadow .25s;
}
.cat-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.cat-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgb(29 23 18 / .82)); }
a.cat-card:hover { color: var(--paper); box-shadow: 0 16px 30px -18px rgb(29 23 18 / .6); }
a.cat-card:hover img { transform: scale(1.04); }
a.cat-card:active { transform: scale(.98); }
.cat-text { position: absolute; z-index: 1; left: .9rem; right: .9rem; bottom: .9rem; display: grid; gap: .15rem; }
.cat-name { font-family: var(--display); font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem); line-height: 1; }
.cat-tag { order: -1; font-family: var(--caps); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-light); }
.cat-off { font-size: .85rem; line-height: 1.35; }
.cat-card.is-off img { filter: grayscale(.85); opacity: .7; }
.cat-card.is-off::after { background: linear-gradient(180deg, rgb(29 23 18 / .25), rgb(29 23 18 / .88) 70%); }

/* Confirmation, storno, error */
.step-center { width: 100%; max-width: 34rem; margin: 0 auto; }
.step-center .eyebrow { margin-bottom: .3rem; }
.step-center h1 { font-size: clamp(1.8rem, 1.5rem + 1.4vw, 2.5rem); margin: 0; }
.step-center .lead, .step-center .fine { margin: 0; }
.step-center .btn-row { margin-top: 0; gap: .6rem; }
.step-center .btn-row .btn { flex: 1 1 9rem; padding: .6rem .9rem; font-size: .95rem; }
.step-center form { margin: 0; }
.btn-whatsapp { background: var(--whatsapp); color: #fff; }
.btn-whatsapp:hover { background: #18663f; color: #fff; box-shadow: 0 10px 24px -12px rgb(31 122 77 / .7); }
.preview .summary dd a { color: var(--ink); font-weight: 500; }
.seal { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--ink); color: var(--gold-light); font-size: .85rem; letter-spacing: 0; }
.confirm .eyebrow::before { display: none; }

.summary { margin: 0; display: grid; font-size: .92rem; line-height: 1.4; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-s); padding: .2rem .9rem; }
.summary div { display: grid; grid-template-columns: 4.5rem 1fr; gap: .6rem; padding: .45rem 0; border-bottom: 1px solid var(--line); }
.summary div:last-child { border-bottom: 0; }
.summary dt { font-family: var(--caps); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); padding-top: .2rem; }
.summary dd { margin: 0; }

/* Desktop: everything in the hero. Photo left, wizard card right, both full height. */
@media (min-width: 960px) {
  .book { --gutter: 2.5rem; --head: 64px; --gap: 1.1rem; }
  .shell { grid-template-columns: minmax(0, 1fr) clamp(30rem, 40vw, 38rem); gap: .75rem; padding: .75rem; }
  .hero { display: block; position: relative; overflow: hidden; border-radius: 22px; background: var(--ink); }
  .hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
  .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(29 23 18 / .1) 40%, rgb(29 23 18 / .78)); }
  .hero-text { position: absolute; z-index: 1; left: 3rem; right: 3rem; bottom: 2.75rem; color: var(--paper); }
  .hero-kicker, .hero-sub { font-family: var(--caps); font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-light); margin: 0; }
  .hero-claim { font-family: var(--display); font-size: clamp(3.2rem, 2rem + 3vw, 5rem); line-height: .98; margin: .6rem 0 .9rem; }
  .hero-claim em { color: var(--gold-light); }
  .app { border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: var(--bg); }
  .app-main { padding: 1.75rem var(--gutter); }
  .icon-btn { margin-left: -.75rem; }
  .cat-card { max-height: 56dvh; }
}

/* Very short screens (landscape phones): let the content area scroll instead of squeezing. */
@media (max-height: 520px) {
  .step-scroll { flex: none; overflow: visible; }
}

@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
}