.page {
  max-width: 980px;
  margin: 70px auto 90px;
  padding: 0 20px;
}

.page-header {
  text-align: center;
  margin-bottom: 48px;
}

.page-header h1,
body.dark-mode .page-header h1 {
  color: #de9a74 !important;
  margin-bottom: 18px;
}

.page-header p,
body.dark-mode .page-header p {
  max-width: 720px;
  margin: 0 auto;
  color: #6f6660 !important;
}

.booking-form {
  display: grid;
  gap: 26px;
}

.form-section,
body.dark-mode .form-section {
  background: #fff7f1 !important;
  border: 1px solid #efc4aa !important;
  border-radius: 32px;
  padding: 32px;
  box-shadow: 0 12px 28px rgba(120, 84, 58, 0.08) !important;
}

.form-section h2,
body.dark-mode .form-section h2 {
  color: #de9a74 !important;
  margin-top: 0;
  margin-bottom: 24px;
  font-size: 24px;
}

/* Por si alguna versión antigua aún muestra las cápsulas */

.consultas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.consulta-card,
body.dark-mode .consulta-card {
  border: 1px solid #efc4aa !important;
  border-radius: 30px;
  padding: 28px;
  background: #fff7f1 !important;
  cursor: pointer;
  transition: 0.2s ease;
  color: #4e433c !important;
}

.consulta-card:hover,
.consulta-card.active,
body.dark-mode .consulta-card:hover,
body.dark-mode .consulta-card.active {
  transform: translateY(-3px);
  border-color: #de9a74 !important;
  box-shadow: 0 14px 34px rgba(120, 84, 58, 0.12) !important;
}

.consulta-card input {
  display: none;
}

.consulta-card h3,
body.dark-mode .consulta-card h3 {
  color: #de9a74 !important;
  margin-bottom: 12px;
  font-size: 22px;
}

.consulta-price,
body.dark-mode .consulta-price {
  font-size: 28px;
  font-weight: 800;
  color: #4e433c !important;
  margin-bottom: 14px;
}

.consulta-card p,
body.dark-mode .consulta-card p {
  color: #6f6660 !important;
  line-height: 1.65;
  margin-bottom: 12px;
}

/* ==============================
   CALENDARIO
   ============================== */

.calendar-box,
body.dark-mode .calendar-box {
  border: none !important;
  border-radius: 36px;
  padding: 30px 28px 32px;
  background: linear-gradient(180deg, #fffaf6 0%, #fff3ea 100%) !important;
  box-shadow: 0 18px 42px rgba(120, 84, 58, 0.10) !important;
}

.calendar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
}

.calendar-top button,
#prev-month,
#next-month,
body.dark-mode .calendar-top button,
body.dark-mode #prev-month,
body.dark-mode #next-month {
  border: none !important;
  background: #fff7f1 !important;
  color: #de9a74 !important;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  font-size: 25px;
  cursor: pointer;
  box-shadow: 0 5px 14px rgba(120, 84, 58, 0.10) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  transition: 0.2s ease;
}

.calendar-top button:hover,
#prev-month:hover,
#next-month:hover,
body.dark-mode .calendar-top button:hover,
body.dark-mode #prev-month:hover,
body.dark-mode #next-month:hover {
  background: #de9a74 !important;
  color: #fffaf7 !important;
  border-color: #de9a74 !important;
  transform: translateY(-1px);
}

.calendar-top h3,
body.dark-mode .calendar-top h3 {
  color: #de9a74 !important;
  margin: 0;
  font-size: 22px;
}

.calendar-weekdays,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
  text-align: center;
}

.calendar-weekdays {
  margin-bottom: 14px;
  font-weight: 700;
}

.calendar-weekdays span,
body.dark-mode .calendar-weekdays span {
  color: #7a6a5f !important;
  font-size: 14px;
}

.calendar-day,
body.dark-mode .calendar-day {
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 13px 0;
  background: transparent;
  color: #b8aaa0 !important;
  font: inherit;
}

.calendar-day.available,
body.dark-mode .calendar-day.available {
  background: #fff7f1 !important;
  color: #de9a74 !important;
  border-color: #f0c8b2 !important;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(120, 84, 58, 0.06);
  transition: 0.2s ease;
}

.calendar-day.available:hover,
body.dark-mode .calendar-day.available:hover {
  background: #f7dcc9 !important;
  color: #cf875e !important;
  border-color: #de9a74 !important;
  transform: translateY(-1px);
}

.calendar-day.selected,
body.dark-mode .calendar-day.selected {
  background: #de9a74 !important;
  color: #fffaf7 !important;
  border-color: #de9a74 !important;
  box-shadow: 0 8px 18px rgba(222, 154, 116, 0.28);
}

/* ==============================
   HORAS
   ============================== */

.hours-box {
  margin-top: 28px;
  text-align: center;
}

.hours-box h3,
body.dark-mode .hours-box h3 {
  color: #de9a74 !important;
  margin-bottom: 18px;
}

.hours-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.hour-button,
body.dark-mode .hour-button {
  border: 1px solid #efc4aa !important;
  background: #fff0e5 !important;
  color: #de9a74 !important;
  border-radius: 999px;
  padding: 12px 22px;
  cursor: pointer;
  font-weight: 700;
  transition: 0.2s ease;
}

.hour-button:hover,
body.dark-mode .hour-button:hover {
  background: #f7dcc9 !important;
  border-color: #de9a74 !important;
  color: #cf875e !important;
  transform: translateY(-1px);
}

.hour-button.selected,
body.dark-mode .hour-button.selected {
  background: #de9a74 !important;
  color: #fffaf7 !important;
  border-color: #de9a74 !important;
}

/* ==============================
   RESUMEN
   ============================== */

.booking-summary,
body.dark-mode .booking-summary {
  border: 1px solid #efc4aa !important;
  border-radius: 28px;
  padding: 22px;
  background: #fff0e5 !important;
  text-align: center;
  box-shadow: 0 10px 24px rgba(120, 84, 58, 0.07) !important;
}

.booking-summary strong,
.booking-summary span,
body.dark-mode .booking-summary strong,
body.dark-mode .booking-summary span {
  color: #4e433c !important;
}

.booking-summary #summary-price,
body.dark-mode .booking-summary #summary-price {
  color: #de9a74 !important;
}

/* ==============================
   CAMPOS
   ============================== */

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field.full {
  grid-column: 1 / -1;
}

.field label,
body.dark-mode .field label {
  font-weight: 700;
  color: #4e433c !important;
}

.field input,
.field textarea,
.field select,
body.dark-mode .field input,
body.dark-mode .field textarea,
body.dark-mode .field select {
  width: 100%;
  border: 1px solid #efc4aa !important;
  border-radius: 16px;
  padding: 14px 15px;
  font-family: inherit;
  font-size: 16px;
  background: #fffaf6 !important;
  color: #4e433c !important;
}

.field input::placeholder,
.field textarea::placeholder {
  color: #a08b7d !important;
}

.field textarea {
  min-height: 120px;
  resize: vertical;
}

.hidden {
  display: none;
}

/* ==============================
   BOTÓN FINAL
   ============================== */

.submit-wrap {
  text-align: center;
  margin-top: 10px;
}

.submit-wrap .cta-button,
.submit-wrap button.cta-button,
#booking-form .cta-button,
body.dark-mode .submit-wrap .cta-button,
body.dark-mode #booking-form .cta-button {
  background: #de9a74 !important;
  color: #fffaf7 !important;
  border-color: #de9a74 !important;
}

.submit-wrap .cta-button:hover,
.submit-wrap button.cta-button:hover,
#booking-form .cta-button:hover,
body.dark-mode .submit-wrap .cta-button:hover,
body.dark-mode #booking-form .cta-button:hover {
  background: #cf875e !important;
  color: #fffaf7 !important;
  border-color: #cf875e !important;
}

.submit-wrap .cta-button span,
#precio-final,
body.dark-mode .submit-wrap .cta-button span,
body.dark-mode #precio-final {
  color: #fffaf7 !important;
}

.booking-note,
body.dark-mode .booking-note {
  color: #7a6a5f !important;
  margin-top: 14px;
  font-size: 15px;
}

.error-message,
body.dark-mode .error-message {
  color: #b00020 !important;
  margin-top: 14px;
  font-size: 15px;
  font-weight: 700;
}

/* ==============================
   RESPONSIVE
   ============================== */

@media (max-width: 900px) {
  .consultas-grid,
  .field-grid {
    grid-template-columns: 1fr;
  }

  .page {
    margin: 42px auto 70px;
  }

  .consulta-card,
  .form-section {
    padding: 26px;
  }

  .calendar-box,
  body.dark-mode .calendar-box {
    padding: 24px 18px 26px;
    border-radius: 30px;
  }

  .calendar-weekdays,
  .calendar-grid {
    gap: 8px;
  }

  .calendar-top button,
  #prev-month,
  #next-month {
    width: 38px;
    height: 38px;
    font-size: 23px;
  }

  .calendar-day,
  body.dark-mode .calendar-day {
    padding: 11px 0;
  }
}