@font-face {
  font-family: Sora;
  src: url('/reserva-assets/sora.woff2') format('woff2');
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
}

@font-face {
  font-family: Satoshi;
  src: url('/fonts/Satoshi-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}

:root {
  color-scheme: light;
  --ink: #15231a;
  --paper: #fafafa;
  --lime: #c9ff5d;
  --muted: #626c65;
  --rule: #dfe3df;
  --hover: #376143;
  --page-gutter: clamp(20px, 4.6875vw, 90px);
  --intro-duration: 2800ms;
  --control-height: clamp(49px, 3.18vw, 61px);
  font-family: Sora, system-ui, sans-serif;
  font-size: clamp(14px, .885vw, 17px);
  color: var(--ink);
  background: var(--paper);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 0; }
button, input, select { font: inherit; }
button, summary { cursor: pointer; }
button:disabled { cursor: not-allowed; }
a { color: inherit; }
img { display: block; max-width: 100%; }
p, h1, h2, h3, figure { margin: 0; }
:focus-visible { outline: 2px solid var(--hover); outline-offset: 4px; }

.skip {
  position: fixed;
  z-index: 6;
  inset: 10px auto auto 10px;
  padding: 12px 18px;
  transform: translateY(-160%);
  border-radius: 10px;
  background: white;
}
.skip:focus { transform: translateY(0); }

.booking-header { background: var(--ink); color: var(--lime); }
.booking-header-inner {
  min-height: clamp(84px, 6.46vw, 124px);
  max-width: 1920px;
  margin-inline: auto;
  padding-inline: var(--page-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand-link { display: block; width: clamp(150px, 13.02vw, 250px); flex: none; }
.brand-link img { width: 100%; height: auto; }
.header-actions { display: flex; align-items: center; gap: clamp(8px, .78vw, 15px); }
.booking-header :focus-visible { outline-color: var(--lime); }

.action {
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  border-radius: 100px;
  min-height: clamp(44px, 2.65vw, 51px);
  padding: 8px clamp(14px, 1.6vw, 30px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  font-size: clamp(13px, .9375vw, 18px);
  letter-spacing: -.045em;
  text-decoration: none;
  line-height: 1.25;
  text-align: center;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.action.primary { background: var(--lime); border-color: var(--lime); }
.action.primary:hover:not(:disabled) { background: #d7ff85; border-color: #d7ff85; }
.action.secondary { border-color: var(--ink); }
.action.secondary:hover:not(:disabled) { background: #edf2ec; }
.action:disabled { opacity: .6; background: #ebeee7; border-color: #ebeee7; color: var(--muted); }
.action.wide { width: 100%; }
.header-contact { color: var(--lime); border-color: var(--lime); }
.header-contact:hover { background: #c9ff5d18; }
.icon { width: clamp(18px, 1.25vw, 24px); height: auto; flex: none; }
.action-icon { width: clamp(17px, 1.04vw, 20px); }

.booking-shell {
  max-width: 1920px;
  margin: 0 auto;
  padding: clamp(38px, 4.69vw, 90px) var(--page-gutter) 28px;
}
.booking-layout {
  max-width: 1643px;
  display: grid;
  grid-template-columns: minmax(0, 814fr) minmax(0, 759fr);
  gap: clamp(30px, 3.65vw, 70px);
  align-items: start;
}
.booking-visual, .booking-flow { min-width: 0; }
.booking-flow { margin-top: clamp(64px, 5.57vw, 107px); }
.booking-eyebrow {
  display: flex;
  align-items: center;
  gap: .5em;
  text-transform: uppercase;
  line-height: 1.25;
  letter-spacing: -.04em;
  margin-bottom: clamp(12px, .78vw, 15px);
}
.booking-eyebrow .icon { width: clamp(20px, 1.3vw, 25px); }
.booking-visual h1 {
  font-size: clamp(34px, 3.90625vw, 75px);
  font-weight: 400;
  line-height: 1.09;
  letter-spacing: -.052em;
}
.booking-subtitle {
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.35;
  letter-spacing: -.045em;
}
.booking-photo {
  margin-top: clamp(18px, 1.3vw, 25px);
  aspect-ratio: 814 / 605;
  border-radius: 15px;
  overflow: hidden;
  background: #e5eae3;
}
.booking-photo img { width: 100%; height: 100%; object-fit: cover; }
.booking-photo img.changed { animation: reveal-photo 360ms ease both; }

.booking-steps {
  display: flex;
  align-items: center;
  gap: clamp(6px, 1.04vw, 20px);
  margin: 0 0 clamp(16px, 1.05vw, 20px);
  padding: 0 0 clamp(16px, 1.3vw, 25px);
  border-bottom: 1px solid var(--rule);
  list-style: none;
  color: #737c75;
  font-size: clamp(12px, 1.04vw, 20px);
  letter-spacing: -.05em;
}
.booking-steps li { display: flex; align-items: center; gap: inherit; white-space: nowrap; }
.booking-steps li[data-complete], .booking-steps [aria-current="step"] { color: var(--ink); }
.booking-steps li:not(:last-child)::after {
  content: '';
  background: url('/reserva-assets/linha-inativa.svg') center / contain no-repeat;
  width: clamp(7px, 2.34vw, 45px);
  height: 2px;
}
.booking-steps li[data-reached]:not(:last-child)::after {
  background-image: url('/reserva-assets/linha-ativa.svg');
}
.booking-stage {
  display: grid;
  gap: clamp(19px, 1.5625vw, 30px);
  min-width: 0;
}
.booking-stage.entering { animation: reveal-stage 300ms ease both; }
.stage-heading h2, .booking-access h3, .reservation-page dialog h2 {
  font-size: clamp(25px, 2.083vw, 40px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.05em;
}
.stage-heading p { color: var(--muted); margin-top: 6px; letter-spacing: -.045em; line-height: 1.35; }

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.25vw, 24px) clamp(12px, 1.04vw, 20px);
}
.booking-field { min-width: 0; display: grid; align-content: start; gap: 9px; letter-spacing: -.04em; }
.field-control {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: var(--control-height);
  border: 1px solid var(--rule);
  border-radius: 15px;
  padding: 0 16px;
  color: var(--ink);
  transition: border-color .18s ease;
  font: 500 clamp(16px, 1.04vw, 20px)/1.35 Satoshi, sans-serif;
  letter-spacing: -.045em;
}
.field-control:focus-within { border-color: var(--hover); }
.field-control input {
  border: 0;
  border-radius: inherit;
  color: inherit;
  background: transparent;
  min-width: 0;
  width: 100%;
  padding: 12px 34px 12px 0;
  letter-spacing: inherit;
  outline: none;
}
.field-control input::placeholder { color: var(--muted); }
.field-control .field-icon { position: absolute; right: 15px; pointer-events: none; }
.date-control { padding: 0; }
.date-control input { flex: 1; max-width: 100%; padding-inline: 16px; min-height: calc(var(--control-height) - 2px); }
.date-control input::-webkit-calendar-picker-indicator { opacity: 0; cursor: pointer; width: 24px; height: 24px; }
.locked-field { color: #6b776d; background: #f5f6f4; cursor: not-allowed; }
.document-heading { display: flex; justify-content: space-between; align-items: center; gap: 7px; }
.document-heading select {
  min-width: 0;
  color: var(--ink);
  border: 1px solid var(--rule);
  background: var(--paper);
  border-radius: 8px;
  font-size: .82rem;
  padding: 2px 4px;
  max-width: 45%;
}

.slots-field { border: 0; padding: 0; margin: 0; min-width: 0; }
.slots-field legend { padding: 0; margin-bottom: 9px; letter-spacing: -.04em; }
.booking-times { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(7px, .52vw, 10px); }
.booking-time {
  width: 100%;
  min-height: var(--control-height);
  padding: 5px 3px;
  border: 1px solid var(--rule);
  border-radius: clamp(10px, .78vw, 15px);
  background: transparent;
  color: var(--ink);
  font: 500 clamp(13px, 1.04vw, 20px)/1.2 Satoshi, sans-serif;
  letter-spacing: -.045em;
  white-space: nowrap;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.booking-time:hover:not(:disabled):not([aria-pressed="true"]) { color: var(--hover); border-color: var(--hover); }
.booking-time[aria-pressed="true"] { color: white; border-color: var(--ink); background: var(--ink); }
.booking-time:disabled { color: #818981; border-color: #eceeec; pointer-events: none; }
.slot-unavailable { display: block; min-width: 0; cursor: not-allowed; }

.booking-summary { margin: 0; }
.booking-summary div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 0 0 18px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--rule);
  letter-spacing: -.045em;
}
.booking-summary div:last-child { margin: 0; padding-bottom: 0; border: 0; }
.booking-summary dt { color: var(--muted); }
.booking-summary dd { margin: 0; text-align: right; }
.booking-access h3 { margin-bottom: 10px; }
.booking-access label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.4;
  cursor: pointer;
}
.gate-checkbox {
  appearance: none;
  flex: none;
  margin: 0;
  width: 30px;
  height: 30px;
  border: 1.5px solid var(--ink);
  border-radius: 7px;
  background: var(--paper);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.gate-checkbox:checked { background: var(--ink); }
.gate-checkbox:checked::after {
  content: '';
  width: 15px;
  height: 15px;
  background: url('/reserva-assets/checagem.svg') center / contain no-repeat;
  filter: brightness(0) invert(1);
}
.text-button {
  background: none;
  border: 0;
  color: var(--hover);
  text-decoration: underline;
  text-underline-offset: .2em;
  min-height: 44px;
  padding: 5px 0;
  justify-self: start;
  text-align: left;
}
.action + .text-button { margin-top: -14px; }

.booking-notice, .booking-feedback, .booking-error {
  font-size: .9rem;
  line-height: 1.45;
  margin-block: 8px;
}
.booking-notice, .booking-feedback { color: var(--muted); }
.booking-error { color: #922c27; }
.booking-feedback:empty, .booking-error:empty, .booking-notice:empty, .countdown:empty { display: none; }
.checkout-panel {
  display: grid;
  gap: 15px;
  border: 1px solid var(--rule);
  border-radius: 15px;
  background: #f2f5ef;
  padding: clamp(16px, 1.25vw, 24px);
}
.checkout-panel p { color: var(--muted); line-height: 1.45; }
.status-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.status-actions > p:empty + button, .status-actions > p:empty ~ a { grid-column: 1 / -1; }
.countdown { font-variant-numeric: tabular-nums; }
.private-booking, .booking-rules { color: var(--muted); font-size: .86rem; }
.private-booking summary, .booking-rules summary { min-height: 44px; display: list-item; padding-block: 12px; }
.private-booking > p, .booking-rules > p { margin-top: 8px; line-height: 1.5; }
.small-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.booking-rules { margin-top: 14px; }
.booking-footer { padding: 10px var(--page-gutter) 22px; text-align: right; font-size: .8rem; color: var(--muted); }
.test-banner { padding: 9px var(--page-gutter); background: #edf3e5; font-size: .85rem; }
.test-banner strong { margin-right: 8px; }
.reservation-page dialog {
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 20px;
  width: min(520px, calc(100% - 32px));
  padding: clamp(20px, 3vw, 36px);
}
.reservation-page dialog::backdrop { background: #15231abb; }
.reservation-page dialog p { margin-block: 12px 18px; color: var(--muted); line-height: 1.45; }
.reservation-page dialog .booking-error { color: #922c27; }
.profile-form { display: grid; gap: 16px; }
.profile-footer { display: flex; gap: 15px; flex-wrap: wrap; }
.registration-mode .booking-steps { display: none; }

.booking-intro {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: white;
  background: var(--ink) url('/reserva-assets/abertura-fundo.svg') center bottom / cover no-repeat;
  will-change: transform;
}
.booking-intro.intro-leaving { animation: leave-intro 540ms cubic-bezier(.7, 0, .2, 1) forwards; }
.intro-pattern {
  position: absolute;
  inset: 0;
  background: url('/reserva-assets/padrao.svg') 0 0 / 45px 45px repeat;
  opacity: .08;
  pointer-events: none;
}
.intro-center {
  position: relative;
  width: min(754px, 72vw);
  text-align: center;
  animation: reveal-stage 450ms ease both;
}
.intro-center img { width: 100%; height: auto; }
.intro-progress {
  height: 5px;
  overflow: hidden;
  border-radius: 50px;
  background: #ffffff1a;
  margin: clamp(24px, 2.6vw, 50px) 0 clamp(14px, 1.56vw, 30px);
}
.intro-progress span {
  display: block;
  height: 100%;
  background: var(--lime);
  border-radius: inherit;
  transform-origin: left;
  animation: intro-progress var(--intro-duration) linear both;
}
.intro-messages { overflow: hidden; height: 1.5em; font-size: clamp(14px, 1.04vw, 20px); }
.intro-messages span { display: block; line-height: 1.5; }
.intro-messages div { animation: intro-copy var(--intro-duration) ease both; }
.intro-legal, .intro-credit {
  position: absolute;
  bottom: clamp(20px, 2.6vw, 50px);
  display: grid;
  gap: 8px;
  justify-items: center;
  color: white;
  text-align: center;
}
.intro-legal { font-size: clamp(9px, .73vw, 14px); font-weight: 300; }
.intro-credit { right: var(--page-gutter); font-size: 11px; text-decoration: none; }
.intro-credit img { width: 90px; height: auto; }
@keyframes intro-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes intro-copy {
  0%, 24% { transform: translateY(0); }
  32%, 57% { transform: translateY(-33.333%); }
  65%, 100% { transform: translateY(-66.667%); }
}
@keyframes leave-intro { to { transform: translateY(-100%); } }
@keyframes reveal-stage { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes reveal-photo { from { opacity: .62; } to { opacity: 1; } }

@media (max-width: 1100px) {
  .booking-steps { gap: 7px; }
  .booking-steps li:not(:last-child)::after { width: clamp(6px, 1.55vw, 17px); }
}
@media (max-width: 880px) {
  .booking-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .booking-flow { margin-top: 0; }
  .booking-visual h1 { font-size: clamp(34px, 6vw, 56px); }
  .booking-photo { max-height: 360px; }
  .booking-steps { gap: clamp(7px, 1.6vw, 14px); }
  .booking-steps li:not(:last-child)::after { width: clamp(7px, 3vw, 24px); }
}
@media (max-width: 480px) {
  .booking-header-inner { min-height: 74px; flex-wrap: wrap; gap: 6px 10px; padding-block: 10px; }
  .brand-link { width: clamp(114px, 31vw, 145px); }
  .header-actions { gap: 6px; margin-left: auto; }
  .header-actions .action { padding-inline: 9px; gap: 4px; font-size: 11px; }
  .header-actions .icon { width: 15px; }
  .booking-shell { padding-top: 26px; }
  .booking-photo { aspect-ratio: 1.65; border-radius: 12px; }
  .booking-layout { gap: 24px; }
  .booking-steps { justify-content: space-between; gap: 3px; font-size: 11px; }
  .booking-steps li:not(:last-child)::after { width: clamp(3px, 2.5vw, 11px); }
  .booking-times { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .field-control, .field-control input { padding-right: 10px; }
  .field-control input { padding-right: 24px; }
  .field-control .field-icon { right: 9px; width: 17px; }
  .field-control.locked-field { padding-right: 28px; }
  .intro-legal { bottom: 80px; padding-inline: 14px; }
  .intro-credit { right: auto; bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}