/* ==========================================================================
   BOOKING MODAL — ventana de "Agendar una clase" del landing
   <dialog> nativo: el ::backdrop y el centrado los pone el navegador.
   ========================================================================== */

.booking-modal {
  width: min(560px, calc(100vw - 2rem));
  max-height: min(86vh, 720px);
  padding: clamp(1.75rem, 1rem + 3vw, 2.75rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-soft);
  overflow: auto;
}
.booking-modal::backdrop {
  background: rgba(10, 6, 8, 0.72);
  backdrop-filter: blur(3px);
}
.booking-modal[open] { animation: bookingIn var(--dur-normal) var(--ease-out-expo) both; }
@keyframes bookingIn {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .booking-modal[open] { animation: none; }
}

/* El <form method="dialog"> existe solo para que el boton de cerrar funcione
   sin JS; no debe ocupar lugar en el flujo. */
.booking-modal__close-form { display: contents; }
.booking-modal__close {
  position: absolute;
  inset-block-start: var(--space-4);
  inset-inline-end: var(--space-4);
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.booking-modal__close:hover { color: var(--color-text); border-color: var(--brand-rosa); }
.booking-modal__close svg { width: 17px; height: 17px; }

.booking-modal h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  margin: 0 var(--space-12) var(--space-3) 0;
}
.booking-modal__lead {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin: 0 0 var(--space-6);
}

.booking-modal__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.booking-modal__option {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 0.55rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--dur-fast), border-color var(--dur-fast),
              background-color var(--dur-fast), transform var(--dur-fast);
}
.booking-modal__option:hover { color: var(--color-text); border-color: var(--brand-rosa); transform: translateY(-1px); }
.booking-modal__option[aria-pressed="true"] {
  background: var(--brand-rosa);
  border-color: var(--brand-rosa);
  color: var(--color-on-accent);
}

/* Apilados, no en fila: "Continuar y reservar" y "Preguntar por WhatsApp" no
   caben en una linea cada uno dentro de 560px y quedaban partidos en dos. */
.booking-modal__actions {
  display: grid;
  gap: var(--space-3);
}
.booking-modal__actions .btn { justify-content: center; }

.booking-modal__note {
  margin: var(--space-5) 0 0;
  color: var(--color-text-faint);
  font-size: var(--text-xs);
  line-height: var(--leading-body);
}