.contact {
  position: relative;
  overflow: hidden;
  padding: 6rem 0;
  background: linear-gradient(160deg, #1a1006 0%, #0d0a06 25%, #030305 55%, #0d0a06 85%, #1a1006 100%);
}
@media (min-width: 1024px) { .contact { padding: 8rem 0; } }

.contact__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; }
@media (min-width: 1024px) { .contact__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 5rem; } }

.contact__info { grid-column: span 1; }
@media (min-width: 1024px) { .contact__info { grid-column: span 5; } }

.contact__eyebrow { display: flex; align-items: center; gap: 0.5rem; color: var(--gold-400); font-size: 0.8125rem; margin: 0 0 1.5rem; }
.contact__eyebrow-icon { width: 2.25rem; height: 2.25rem; }
.contact__title { font-weight: 600; font-size: 3rem; color: #fff; letter-spacing: -0.02em; line-height: 1; margin: 0 0 2.5rem; }
@media (min-width: 1024px) { .contact__title { font-size: 3.75rem; } }
.contact__title-accent { font-style: italic; font-size: 3rem; }
@media (min-width: 1024px) { .contact__title-accent { font-size: 3.75rem; } }
.contact__title-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  color: var(--gold-400);
  font-style: normal;
  font-weight: 500;
  font-size: 1.125rem;
  letter-spacing: 0;
}
@media (min-width: 1024px) { .contact__title-tag { font-size: 1.375rem; } }
.contact__lead { color: var(--ink-200); line-height: 1.8; font-size: 1rem; max-width: 24rem; margin: 0 0 1.5rem; }

.contact__whatsapp { margin-bottom: 3rem; }

.contact__list { display: flex; flex-direction: column; gap: 0.75rem; margin: 0; padding: 0; }
.contact__list-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid rgba(38, 38, 44, 0.6);
  border-radius: 0.75rem;
  transition: all 300ms ease;
}
.contact__list-item:hover { border-color: rgba(212, 160, 23, 0.4); background: rgba(212, 160, 23, 0.05); }
.contact__list-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  border: 1px solid rgba(212, 160, 23, 0.3);
  background: rgba(212, 160, 23, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-400);
  flex-shrink: 0;
}
.contact__list-item dt { color: var(--ink-200); font-size: 0.8125rem; letter-spacing: 0.2em; margin: 0 0 0.375rem; }
.contact__list-item dd { color: var(--ink-100); font-size: 1rem; line-height: 1.6; margin: 0; }

.contact__flow { position: relative; grid-column: span 1; }
@media (min-width: 1024px) { .contact__flow { grid-column: span 7; } }
.contact__flow-glow {
  position: absolute;
  inset: -1.5rem;
  background: radial-gradient(ellipse at center, rgba(212, 160, 23, 0.08) 0%, transparent 65%);
  pointer-events: none;
}

.contact__form-wrap,
.contact__success {
  position: relative;
  z-index: 10;
  border: 1px solid rgba(38, 38, 44, 0.6);
  border-radius: 0.75rem;
  background: rgba(3, 3, 5, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 0;
}
@media (min-width: 480px) { .contact__form-wrap, .contact__success { padding: 2rem; } }
@media (min-width: 1024px) { .contact__form-wrap, .contact__success { padding: 3rem; } }

.contact__success {
  display: none;
  text-align: center;
  min-height: 500px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-color: var(--ink-600);
}
.contact__success.is-visible { display: flex; }
.contact__success-icon {
  width: 4rem;
  height: 4rem;
  border: 1px solid var(--gold-500);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
  position: relative;
  color: var(--gold-400);
}
.contact__success-ping { position: absolute; inset: 0; border-radius: 9999px; border: 1px solid rgba(212, 160, 23, 0.2); }
.contact__success-title { font-weight: 500; font-size: 1.875rem; color: #fff; margin: 0 0 1rem; }
.contact__success-copy { color: var(--ink-200); line-height: 1.6; max-width: 24rem; margin: 0 0 2rem; }
.contact__success-summary {
  margin-bottom: 2rem;
  text-align: left;
  width: 100%;
  max-width: 20rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-top: 1px solid var(--ink-700);
  padding-top: 1.5rem;
}
.contact__success-row { display: flex; justify-content: space-between; font-size: 0.875rem; color: var(--ink-300); }
.text-gold { color: var(--gold-400); }
.contact__reset-link { background: none; border: none; color: var(--gold-400); font-size: 0.875rem; border-bottom: 1px solid rgba(212, 160, 23, 0.4); padding: 0 0 0.125rem; transition: border-color 300ms ease; }
.contact__reset-link:hover { border-color: var(--gold-300); }

.contact__progress { display: flex; align-items: center; margin-bottom: 3rem; }
.contact__progress-step { display: flex; align-items: center; flex: 1; min-width: 0; }
.contact__progress-step:last-child { flex: none; }
.contact__progress-btn { display: flex; align-items: center; gap: 0.75rem; background: none; border: none; padding: 0; }
.contact__progress-btn:disabled { cursor: default; }
.contact__progress-circle {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 500;
  flex-shrink: 0;
  border: 1px solid var(--ink-600);
  color: var(--ink-400);
  transition: all 300ms ease;
}
.contact__progress-check { display: none; }
.contact__progress-circle.is-current { background: var(--gold-400); border-color: var(--gold-400); color: #000; }
.contact__progress-circle.is-done { background: var(--gold-400); border-color: var(--gold-400); color: var(--ink-990); }
.contact__progress-circle.is-done .contact__progress-num { display: none; }
.contact__progress-circle.is-done .contact__progress-check { display: block; }
.contact__progress-label { display: none; font-size: 0.875rem; letter-spacing: 0.01em; color: var(--ink-400); transition: color 300ms ease; }
@media (min-width: 640px) { .contact__progress-label { display: block; } }
.contact__progress-label.is-reached { color: var(--ink-100); }
.contact__progress-line { flex: 1; height: 1px; margin: 0 0.75rem; background: var(--ink-700); transition: background 500ms ease; }
@media (min-width: 640px) { .contact__progress-line { margin: 0 1rem; } }
.contact__progress-line.is-done { background: var(--gold-400); }

.contact__step { display: none; }
.contact__step.is-active { display: block; }
.contact__step-title { font-weight: 600; font-size: 1.5rem; color: #fff; margin: 0 0 0.25rem; }
.contact__step-sub { color: var(--ink-400); font-size: 0.875rem; margin: 0 0 2rem; }
.contact__field-label { color: var(--ink-200); font-size: 0.75rem; letter-spacing: 0.2em; margin: 0 0 0.75rem; }

.contact__services-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
@media (min-width: 640px) { .contact__services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.contact__service-btn {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--ink-600);
  border-radius: 0.375rem;
  background: none;
  text-align: left;
  color: var(--ink-100);
  transition: all 300ms var(--ease-silk);
}
.contact__service-btn:hover { border-color: var(--ink-400); }
.contact__service-btn.is-selected { border-color: rgba(212, 160, 23, 0.5); background: rgba(212, 160, 23, 0.05); color: var(--gold-400); }
.contact__service-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  border: 1px solid var(--ink-600);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ink-300);
  transition: color 300ms ease, border-color 300ms ease;
}
.contact__service-btn.is-selected .contact__service-icon { border-color: var(--gold-400); color: var(--gold-400); }
.contact__service-label { flex: 1; min-width: 0; font-size: 1rem; }
.contact__service-check { display: none; flex-shrink: 0; color: var(--gold-400); }
.contact__service-btn.is-selected .contact__service-check { display: block; }

.contact__date-row { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.75rem; margin-bottom: 2rem; scrollbar-width: thin; }
.contact__date-chip {
  flex-shrink: 0;
  width: 4rem;
  padding: 0.75rem 0;
  border: 1px solid var(--ink-600);
  border-radius: 0.375rem;
  background: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  color: var(--ink-200);
  transition: all 300ms ease;
}
.contact__date-chip:hover { border-color: var(--ink-400); }
.contact__date-chip.is-selected { border-color: rgba(212, 160, 23, 0.5); background: rgba(212, 160, 23, 0.05); color: var(--gold-400); }
.contact__date-chip-weekday { font-size: 0.625rem; letter-spacing: 0.02em; }
.contact__date-chip-day { font-size: 1.125rem; }
.contact__date-chip-month { font-size: 0.625rem; color: var(--ink-400); }
.contact__date-chip.is-selected .contact__date-chip-month { color: inherit; }

.contact__time-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.contact__time-btn {
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  border: 1px solid var(--ink-600);
  border-radius: 0.375rem;
  background: none;
  color: var(--ink-100);
  transition: all 200ms var(--ease-silk);
}
.contact__time-btn:hover { border-color: var(--ink-400); }
.contact__time-btn.is-selected { border-color: rgba(212, 160, 23, 0.5); color: var(--gold-400); background: rgba(212, 160, 23, 0.05); }

.contact__summary-chip {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  font-size: 0.875rem;
  background: rgba(13, 13, 17, 0.5);
  border: 1px solid rgba(38, 38, 44, 0.6);
  border-radius: 0.375rem;
  padding: 0.75rem 1rem;
  margin-bottom: 2rem;
  color: var(--ink-200);
}
.contact__summary-sep { color: var(--ink-400); }
.contact__summary-edit { margin-left: auto; background: none; border: none; color: var(--gold-400); font-size: 0.75rem; transition: color 300ms ease; }
.contact__summary-edit:hover { color: var(--gold-300); }

.contact__fields-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; margin-bottom: 2rem; }
@media (min-width: 640px) { .contact__fields-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.contact__field { margin-bottom: 2rem; }
.contact__field label { display: block; color: var(--ink-200); font-size: 0.75rem; letter-spacing: 0.2em; margin-bottom: 0.75rem; }
.contact__optional { color: var(--ink-400); text-transform: none; letter-spacing: normal; }
.contact__input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ink-500);
  color: var(--ink-50);
  font-size: 1.125rem;
  padding-bottom: 0.75rem;
  transition: border-color 300ms ease;
  font-family: var(--font-body);
}
.contact__input::placeholder { color: var(--ink-400); }
.contact__input:focus { border-color: var(--gold-500); outline: none; }
.contact__input--textarea { resize: none; }

.contact__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(38, 38, 44, 0.6);
}
.contact__back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  color: var(--ink-300);
  font-size: 0.875rem;
  transition: color 300ms ease;
}
.contact__back-btn:hover { color: var(--gold-400); }
.contact__back-btn.is-hidden { visibility: hidden; }
.contact__continue-btn, .contact__submit-btn { padding: 0.75rem 1.5rem; font-size: 0.875rem; }
.contact__continue-btn:disabled { opacity: 0.3; pointer-events: none; }
.contact__submit-btn { display: none; }