/* ===============================
   Página 03 — CTA Reservar (Propuesta B)
   Archivo: css/15-pages-pagina03-cta.css
   Objetivo:
   - Estados claros: disabled / enabled / hover / focus-visible / active
   - Consistencia con "Buscar hora" (hover azul)
   - Look clínico limpio y elegante
   =============================== */

/* Base del CTA */
.btn-reservar{
  width: 360px;
  height: 58px;
  border-radius: 14px;

  border: 2px solid #111;
  background: #fff;

  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.4px;

  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.06s ease;

  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Asegura el texto siempre visible (evita reglas globales raras) */
.btn-reservar{
  color: var(--primary-color);
  opacity: 1;
}

/* ? Hover (solo cuando está habilitado): azul clínico */
.btn-reservar:not([disabled]):not(.is-disabled):hover{
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
  box-shadow: 0 8px 18px rgba(27,117,187,0.18);
}

/* ? Focus accesible (solo habilitado) */
.btn-reservar:not([disabled]):not(.is-disabled):focus-visible{
  outline: none;
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(27,117,187,0.18);
}

/* ? Active (click) */
.btn-reservar:not([disabled]):not(.is-disabled):active{
  transform: scale(0.985);
  box-shadow: 0 6px 14px rgba(27,117,187,0.16);
}

/* ? Disabled (atributo o clase) — claro y limpio */
.btn-reservar[disabled],
.btn-reservar.is-disabled{
  background: #f5f7fa;
  border-color: #d6dde6;
  color: #9aa3ad;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* (opcional) Si tu footer centra el botón, lo refuerzo sin tocar layout */
.paso2-footer{
  display: flex;
  justify-content: center;
}

/* Responsive */
@media (max-width: 520px){
  .btn-reservar{
    width: 100%;
    max-width: 420px;
  }
}