.appointment {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, .83fr) minmax(0, 1fr);
  gap: 36px;
  padding: 50px 30px 80px;
  scroll-margin-top: 28px;
}
.appointment::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 -24px;
  background: var(--ivory) url('assets/agendamento-background-optimized.webp') center / cover no-repeat;
  mask-image: linear-gradient(transparent, #000 12%, #000 86%, transparent);
  pointer-events: none;
}
.appointment-intro { padding: 44px 0 0 18px; min-width: 0; }
.appointment .eyebrow { font-size: clamp(12px, 1.3vw, 18px); letter-spacing: .3em; white-space: normal; line-height: 1.6; margin: 0 0 18px; }
.appointment h2 { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(45px, 5.1vw, 78px); font-weight: 400; line-height: 1.05; letter-spacing: -.06em; margin: 0 0 42px; }
.appointment h2 em { display: block; color: var(--gold); font-weight: 400; font-size: 1.15em; }
.appointment-support { font-size: clamp(21px, 2vw, 30px); line-height: 1.35; letter-spacing: -.02em; margin: 0; max-width: 570px; }
.appointment-steps { list-style: none; margin: 42px 0 0 25px; padding: 0; }
.appointment-steps li { display: flex; align-items: center; gap: 30px; position: relative; padding: 0 0 48px; font-size: clamp(20px, 1.9vw, 28px); line-height: 1.4; }
.appointment-steps li:last-child { padding-bottom: 0; }
.appointment-steps li > span { flex: 0 0 74px; color: var(--gold); font-family: 'Playfair Display', Georgia, serif; font-size: 64px; font-style: italic; line-height: 1.2; letter-spacing: -.06em; }
.appointment-steps li:not(:last-child)::after { content: ""; position: absolute; left: 32px; top: 80px; height: 34px; border-left: 1px solid var(--gold); }
.appointment-form { min-width: 0; border: 1px solid #c9a370; background: #fffcf7b3; padding: 34px 42px 28px; border-radius: 24px; }
.appointment-form h3 { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(33px, 3.4vw, 52px); font-weight: 400; line-height: 1.12; letter-spacing: -.055em; margin: 0 0 12px; }
.appointment-form-support { font-size: clamp(18px, 1.55vw, 23px); line-height: 1.45; margin: 0 0 22px; color: #6e6058; }
.appointment-field { min-width: 0; }
.appointment-field > label { display: block; font-size: 20px; font-weight: 500; line-height: 1.4; margin-bottom: 8px; }
.appointment-field input, .appointment-field select { display: block; box-sizing: border-box; width: 100%; min-width: 0; height: 55px; border: 1px solid #ad9e93; background: #fffdf854; border-radius: 9px; padding: 10px 16px; color: var(--brown); font: inherit; font-size: 18px; color-scheme: light; }
.appointment-field input::placeholder { color: #81756d; opacity: 1; }
.appointment-field select { padding-right: 10px; }
.appointment-name { margin-bottom: 24px; }
.appointment-form fieldset { border: 0; padding: 0; margin: 0 0 25px; min-width: 0; }
.appointment-form legend { padding: 0; font-size: 20px; font-weight: 500; line-height: 1.4; margin-bottom: 14px; }
.appointment-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.appointment-choice-column { display: grid; gap: 4px; align-self: start; }
.appointment-choice-column label { display: flex; align-items: flex-start; gap: 13px; min-height: 46px; padding: 5px 0; font-size: 18px; line-height: 1.4; cursor: pointer; }
.appointment-choice-column input { flex: 0 0 29px; width: 29px; height: 29px; margin: 0; accent-color: var(--brown); cursor: pointer; }
.appointment-choice-column span { padding-top: 1px; }
.appointment-preferences { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.appointment-form :focus-visible { outline: 3px solid #96702e; outline-offset: 4px; }
.appointment-form [aria-invalid="true"]:not(fieldset) { border-color: #9a3528; }
.appointment-submit { margin-top: 22px; width: 100%; white-space: normal; border-radius: 12px; min-height: 70px; font-size: 21px; line-height: 1.35; padding: 16px 18px; text-align: center; }
.appointment-submit svg { flex: 0 0 35px; width: 35px; height: 35px; }
.appointment-confirmation { margin: 15px 0 0; font-size: 16px; line-height: 1.5; color: #6e6058; text-align: center; }
.appointment-error { color: #913b2b; font-size: 15px; line-height: 1.5; margin: 8px 0 0; }
.appointment-hint { color: #6e6058; font-size: 14px; line-height: 1.5; margin: 8px 0 0; }
.appointment-error[hidden] { display: none; }
@media (max-width: 1190px) {
  .appointment { padding: 40px 10px 65px; gap: 26px; }
  .appointment-intro { padding: 26px 0 0 4px; }
  .appointment h2 { font-size: clamp(45px, 5.1vw, 60px); margin-bottom: 28px; }
  .appointment-support { font-size: 23px; }
  .appointment-steps { margin-left: 8px; }
  .appointment-steps li { font-size: 23px; gap: 18px; padding-bottom: 38px; }
  .appointment-steps li > span { font-size: 54px; flex-basis: 60px; }
  .appointment-steps li:not(:last-child)::after { top: 70px; left: 25px; height: 25px; }
  .appointment-form { padding: 28px 26px; border-radius: 20px; }
  .appointment-form h3 { font-size: 38px; }
  .appointment-field > label, .appointment-form legend { font-size: 18px; }
  .appointment-choice-column label { font-size: 16px; gap: 10px; }
  .appointment-choice-column input { width: 25px; height: 25px; flex-basis: 25px; }
  .appointment-choices { column-gap: 17px; }
  .appointment-field input, .appointment-field select { font-size: 16px; padding-inline: 12px; }
  .appointment-submit { font-size: 18px; }
}
@media (max-width: 1000px) {
  .appointment { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .appointment-intro { padding: 0; }
  .appointment h2 { font-size: clamp(45px, 7vw, 64px); }
  .appointment-support { max-width: 650px; font-size: 23px; }
  .appointment-steps { margin: 28px 0 0; }
  .appointment-steps li { padding-bottom: 24px; font-size: 22px; }
  .appointment-steps li > span { font-size: 44px; }
  .appointment-steps li:not(:last-child)::after { display: none; }
  .appointment-form { padding: 32px; }
  .appointment-form h3 { font-size: 44px; }
  .appointment-choice-column label { font-size: 18px; }
  .appointment-field > label, .appointment-form legend { font-size: 20px; }
}
@media (max-width: 640px) {
  .appointment { padding: 30px 0 60px; gap: 30px; }
  .appointment::before { inset-inline: -20px; }
  .appointment .eyebrow { font-size: 11px; letter-spacing: .22em; }
  .appointment h2 { font-size: clamp(40px, 10.4vw, 60px); margin-bottom: 25px; line-height: 1.1; }
  .appointment-support { font-size: 20px; line-height: 1.5; }
  .appointment-steps li { gap: 15px; font-size: 19px; padding-bottom: 20px; }
  .appointment-steps li > span { font-size: 40px; flex-basis: 50px; }
  .appointment-form { padding: 25px 20px; border-radius: 18px; }
  .appointment-form h3 { font-size: clamp(30px, 8.5vw, 42px); }
  .appointment-form-support { font-size: 17px; }
  .appointment-field > label, .appointment-form legend { font-size: 18px; }
  .appointment-choices { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .appointment-choice-column label { font-size: 17px; gap: 12px; }
  .appointment-choice-column input { width: 27px; height: 27px; flex-basis: 27px; }
  .appointment-preferences { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .appointment-submit { font-size: 17px; gap: 10px; padding: 16px 12px; }
  .appointment-submit svg { width: 30px; height: 30px; flex-basis: 30px; }
  .appointment-confirmation { font-size: 14px; }
}