#online-payment {
  align-self: start;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: #fcfaf7;
  border: 1px solid #e8dce0;
  border-top: 4px solid #c71958;
}
#online-payment h3 { margin-top: 0; }
#online-payment dl {
  display: grid;
  grid-template-columns: minmax(7rem, 1fr) 2fr;
  gap: .6rem 1rem;
  margin: 1.5rem 0;
  padding: 1.25rem 0;
  border-block: 1px solid #e8dce0;
}
#online-payment dt { color: #62575a; }
#online-payment dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
#online-proof { display: grid; gap: .75rem; }
#online-proof button { justify-self: start; }

/* Agenda pública: lectura breve y controles cómodos en móvil. */
#online-section.section {
  padding-top: clamp(38px, 6vw, 76px);
  background: linear-gradient(180deg, #f8eeeb 0%, #fcfaf7 55%);
}
#online-section .booking {
  width: min(100%, 1120px);
  margin: auto;
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(24px, 5vw, 76px);
  align-items: start;
}
#online-section .online-intro { padding-top: 28px; }
#online-section .online-intro .eyebrow { color: #a51148; margin-bottom: 18px; }
#online-section .online-intro h2 { font-size: clamp(38px, 4.2vw, 64px); }
#online-section .online-intro p { max-width: 410px; margin: 24px 0 0; font-size: 16px; line-height: 1.65; }
#online-booking {
  min-width: 0;
  padding: clamp(22px, 3.3vw, 42px);
  border: 1px solid #eddfdc;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 20px 55px rgba(58, 24, 36, .07);
}
#online-booking .booking-card-head { padding-bottom: 20px; border-bottom: 1px solid #eee4e1; }
#online-booking .booking-card-head span,
#online-booking .booking-field-divider span { color: #a51148; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
#online-booking .booking-card-head h3 { margin-top: 9px; font-size: clamp(28px, 3vw, 36px); }
#online-booking label { margin: 20px 0 8px; font-size: 13px; color: #30282b; }
#online-booking input,
#online-booking select { min-width: 0; min-height: 54px; padding: 12px 14px; border: 1px solid #d9ccca; border-radius: 10px; font-size: 16px; }
#online-booking input:focus,
#online-booking select:focus { border-color: #c71958; outline: 2px solid #f7dbe4; outline-offset: 0; }
#online-service-summary { margin-top: 14px; overflow: hidden; border: 1px solid #f0d9dc; border-radius: 12px; background: #fff8f7; }
#online-service-summary[hidden], #online-payment[hidden], #online-payment-preview[hidden] { display: none !important; }
.booking-summary-main { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 18px 19px 10px; }
.booking-summary-main small { display: block; color: #795c64; font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.booking-summary-main strong { display: block; margin-top: 3px; color: #281e22; font-size: clamp(26px, 3vw, 34px); line-height: 1.1; }
.booking-summary-main > span { flex: none; padding: 6px 11px; border-radius: 30px; background: #f5e4e4; color: #85374e; font-size: 12px; font-weight: 700; }
.booking-summary-payment { padding: 0 19px 17px; color: #62565a; font-size: 12px; line-height: 1.4; }
.booking-conditions { padding: 0; border-top: 1px solid #f0d9dc; border-bottom: 0; }
.booking-conditions summary { align-items: center; padding: 13px 19px; color: #833649; font-size: 12px; font-weight: 700; }
.booking-conditions summary span { font-size: 18px; line-height: 1; }
.booking-conditions[open] summary span { transform: rotate(45deg); }
.booking-conditions ul { margin: 0; padding: 0 26px 17px 36px; color: #62565a; font-size: 12px; line-height: 1.5; }
.booking-conditions li + li { margin-top: 8px; }
#online-booking .booking-field-divider { margin: 27px 0 0; padding-top: 20px; border-top: 1px solid #eee4e1; }
#online-booking .form-row { gap: 14px; }
.online-date-wrap { position: relative; min-width: 0; }
.online-date-wrap .online-date-hint { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; color: #64575b; font-size: 15px; }
.online-date-wrap.has-date .online-date-hint { display: none; }
.online-date-wrap:not(.has-date) input { color: transparent; }
#online-booking .form-help { margin: 18px 0; font-size: 12px; line-height: 1.55; }
.payment-next-step { margin: 20px 0; padding: 18px; border-radius: 12px; background: #f9f0ef; border: 1px solid #eedbda; }
.payment-next-step span, #online-payment .payment-step { display: block; margin-bottom: 7px; color: #a51148; font-size: 11px; font-weight: 800; letter-spacing: .11em; }
.payment-next-step strong { display: block; color: #261d20; font-size: 16px; line-height: 1.3; }
.payment-next-step p { margin: 7px 0 0; color: #62565a; font-size: 13px; line-height: 1.5; }
#online-booking > button { min-height: 54px; border-radius: 10px; }
#online-payment { grid-column: 2; border-radius: 14px; scroll-margin-top: 24px; }
@media (max-width: 520px) {
  #online-payment dl { grid-template-columns: 1fr; gap: .25rem; }
  #online-payment dd { margin-bottom: .65rem; }
}
@media (max-width: 700px) {
  #online-section.section { margin-top: 43px; padding: 28px 5% 64px; }
  #online-section .booking { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 0; }
  #online-section .online-intro { padding: 0 2px; }
  #online-section .online-intro .eyebrow { margin-bottom: 9px; }
  #online-section .online-intro h2 { font-size: 36px; }
  #online-section .online-intro h2 br { display: none; }
  #online-section .online-intro p { margin-top: 10px; font-size: 14px; line-height: 1.45; }
  #online-booking { padding: 20px 17px 24px; border-radius: 16px; }
  #online-booking .booking-card-head { padding-bottom: 15px; }
  #online-booking .booking-card-head h3 { font-size: 28px; }
  #online-booking .booking-field-divider { margin-top: 22px; padding-top: 17px; }
  #online-payment { grid-column: 1; }
}
.angela-transition[hidden] { display: none !important; }
.angela-transition { min-height: 60vh; background: #fcfaf7; }
.transition-card { width: min(100%, 810px); margin: 0 auto; padding: clamp(24px, 6vw, 66px); background: #fff; border: 1px solid #eedfda; border-top: 5px solid #b4104c; border-radius: 18px; box-shadow: 0 18px 50px rgba(45,22,30,.06); }
.transition-card h1 { margin: 16px 0 22px; font-size: clamp(36px, 5vw, 64px); line-height: 1.04; }
.transition-card > p { max-width: 60ch; color: #64575b; line-height: 1.6; }
.transition-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 30px; }
.transition-facts span { padding: 9px 13px; border-radius: 24px; background: #faeef1; color: #762b46; font-size: 13px; font-weight: 700; }
.transition-card .transition-note { margin: 16px 0 0; font-size: 13px; }
@media (max-width: 700px) { .angela-transition.section { padding: 35px 5% 70px; } .transition-card { padding: 28px 20px; } }